[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_254":255,"_256":257},"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",21,"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","oat.min.css","latestPath","fileId","af9937d8-9feb-11f1-a9eb-1607ee4eb77e","name","fileType","content","@layer theme, base, components, animations, utilities;\n@layer base {\n *, *:before, *:after {\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n * {\n margin: 0;\n }\n html {\n tab-size: 4;\n }\n body, dialog, [popover] {\n font-family: var(--font-sans);\n font-size: var(--text-regular);\n line-height: var(--leading-normal);\n color: var(--foreground);\n }\n body {\n background-color: var(--background);\n color: var(--foreground);\n -webkit-font-smoothing: antialiased;\n }\n main {\n padding-block-start: var(--space-8);\n }\n img, picture, video, canvas, svg {\n max-width: 100%;\n }\n p, h1, h2, h3, h4, h5, h6 {\n overflow-wrap: break-word;\n }\n h1, h2, h3, h4, h5, h6 {\n font-weight: var(--font-semibold);\n line-height: 1.25;\n &:first-child {\n margin-block-start: 0;\n }\n }\n h1 {\n font-size: var(--text-1);\n margin: var(--space-10) 0 var(--space-6);\n }\n h2 {\n font-size: var(--text-2);\n margin: var(--space-8) 0 var(--space-5);\n }\n h3 {\n font-size: var(--text-3);\n margin: var(--space-6) 0 var(--space-4);\n }\n h4 {\n font-size: var(--text-4);\n margin: var(--space-5) 0 var(--space-3);\n }\n h5 {\n font-size: var(--text-5);\n margin: var(--space-4) 0 var(--space-2);\n }\n h6 {\n font-size: var(--text-regular);\n margin: var(--space-4) 0 var(--space-2);\n }\n p {\n margin-block-end: var(--space-4);\n &:last-child {\n margin-block-end: 0;\n }\n }\n a {\n color: var(--primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n transition: color var(--transition-fast);\n &:hover {\n color: rgb(from var(--primary) r g b / 0.8);\n }\n }\n strong, b {\n font-weight: var(--font-semibold);\n }\n em, i {\n font-style: italic;\n }\n small {\n font-size: var(--text-7);\n }\n code {\n font-family: var(--font-mono);\n font-size: 0.875em;\n padding: calc(var(--space-1) / 2) var(--space-1);\n background-color: var(--faint);\n border-radius: var(--radius-small);\n }\n pre {\n font-family: var(--font-mono);\n padding: var(--space-4);\n background-color: var(--faint);\n border-radius: var(--radius-medium);\n overflow-x: auto;\n margin-block-end: var(--space-4);\n code {\n padding: 0;\n background: none;\n border-radius: 0;\n }\n }\n blockquote {\n border-inline-start: 4px solid var(--border);\n padding-inline-start: var(--space-4);\n margin: var(--space-4) 0;\n color: var(--muted-foreground);\n font-style: italic;\n }\n hr {\n border: none;\n border-top: 1px solid var(--border);\n margin: var(--space-8) 0;\n }\n ul, ol {\n padding-inline-start: var(--space-6);\n margin-block-end: var(--space-4);\n }\n ul {\n list-style-type: disc;\n }\n ol {\n list-style-type: decimal;\n }\n li {\n margin-block-end: var(--space-1);\n }\n mark {\n background-color: rgb(from var(--warning) r g b / 0.3);\n padding: calc(var(--space-1) / 2) var(--space-1);\n border-radius: var(--radius-small);\n }\n [hidden] {\n display: none;\n }\n :focus-visible {\n outline: 2px solid var(--ring);\n outline-offset: 2px;\n }\n :disabled, [aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n}\n@layer theme {\n :root {\n color-scheme: light dark;\n --background: light-dark(#fff, #09090b);\n --foreground: light-dark(#09090b, #fafafa);\n --card: light-dark(#fff, #18181b);\n --card-foreground: light-dark(#09090b, #fafafa);\n --primary: light-dark(#574747, #fafafa);\n --primary-foreground: light-dark(#fafafa, #18181b);\n --secondary: light-dark(#f4f4f5, #27272a);\n --secondary-foreground: light-dark(#574747, #fafafa);\n --muted: light-dark(#f4f4f5, #27272a);\n --muted-foreground: light-dark(#71717a, #a1a1aa);\n --faint: light-dark(#fafafa, #1e1e21);\n --faint-foreground: light-dark(#a1a1aa, #71717a);\n --accent: light-dark(#f4f4f5, #27272a);\n --danger: light-dark(#d32f2f, #f4807b);\n --danger-foreground: light-dark(#fafafa, #18181b);\n --success: light-dark(#008032, #6cc070);\n --success-foreground: light-dark(#fafafa, #18181b);\n --warning: light-dark(#a65b00, #f0a030);\n --warning-foreground: #09090b;\n --border: light-dark(#d4d4d8, #52525b);\n --input: light-dark(#d4d4d8, #52525b);\n --ring: light-dark(#574747, #d4d4d8);\n --space-1: 0.25rem;\n --space-2: 0.5rem;\n --space-3: 0.75rem;\n --space-4: 1rem;\n --space-5: 1.25rem;\n --space-6: 1.5rem;\n --space-8: 2rem;\n --space-10: 2.5rem;\n --space-12: 3rem;\n --space-14: 3.5rem;\n --space-16: 4rem;\n --space-18: 4.5rem;\n --radius-small: 0.125rem;\n --radius-medium: 0.375rem;\n --radius-large: 0.75rem;\n --radius-full: 9999px;\n --bar-height: 0.5rem;\n --font-sans: system-ui, sans-serif;\n --font-mono: ui-monospace, Consolas, monospace;\n --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);\n --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);\n --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);\n --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);\n --text-5: 1.125rem;\n --text-6: 1rem;\n --text-7: 0.875rem;\n --text-8: 0.75rem;\n --text-regular: var(--text-6);\n --leading-normal: 1.5;\n --font-normal: 400;\n --font-medium: 500;\n --font-semibold: 600;\n --font-bold: 600;\n --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-medium:\n 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-large:\n 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);\n --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n --z-dropdown: 50;\n --z-modal: 200;\n }\n [data-variant=\"success\"] {\n --_variant-color: var(--success);\n }\n [data-variant=\"warning\"] {\n --_variant-color: var(--warning);\n }\n :is([data-variant=\"danger\"], [data-variant=\"error\"]) {\n --_variant-color: var(--danger);\n }\n}\n@layer animations {\n @media (prefers-reduced-motion: reduce) {\n *, *:before, *:after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n }\n dialog::backdrop {\n opacity: 1;\n transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n @starting-style {\n opacity: 0;\n }\n }\n @keyframes fade-in-up {\n 0% {\n opacity: 0.6;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n}\n@layer components {\n figure[data-variant=\"avatar\"]:not([role=\"group\"]) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--sz, 2.5rem);\n height: var(--sz, 2.5rem);\n color: var(--primary);\n background-color: var(--muted);\n border-radius: var(--radius-full);\n font-weight: var(--font-medium);\n overflow: hidden;\n > img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n &.small {\n --sz: 2rem;\n }\n &.large {\n --sz: 3.25rem;\n }\n }\n figure[data-variant=\"avatar\"][role=\"group\"] {\n display: inline-flex;\n align-items: center;\n margin: 0;\n & figure[data-variant=\"avatar\"] {\n isolation: isolate;\n margin-inline-end: calc(var(--space-5) * -1);\n border: 2px solid var(--background);\n &:last-child {\n margin-inline-end: 0;\n }\n }\n &.small {\n --sz: 2rem;\n & figure[data-variant=\"avatar\"] {\n margin-inline-end: calc(var(--space-4) * -0.8);\n border-width: 1px;\n }\n }\n &.large {\n --sz: 3.25rem;\n & figure[data-variant=\"avatar\"] {\n margin-inline-end: calc(var(--space-6) * -1);\n }\n }\n }\n}\n@layer base {\n :is(button, [type=\"submit\"], [type=\"reset\"], [type=\"button\"], a.button),\n ::file-selector-button {\n --_hov: color-mix(in srgb, var(--primary), white 25%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n font-size: var(--text-7);\n font-weight: var(--font-medium);\n line-height: var(--leading-normal);\n white-space: nowrap;\n text-decoration: none;\n background-color: var(--primary);\n color: var(--primary-foreground);\n border-radius: var(--radius-medium);\n border: 1px solid;\n border-color: rgb(255 255 255 / 0.15) rgb(0 0 0 / 0.2) rgb(0 0 0 / 0.2)\n rgb(255 255 255 / 0.15);\n transition:\n background-color var(--transition-fast),\n opacity var(--transition-fast),\n transform var(--transition-fast);\n &:not(:disabled) {\n cursor: pointer;\n }\n &:hover:not(:disabled) {\n background-color: var(--_hov);\n }\n &:active:not(:disabled) {\n transform: translate(1px, 1px);\n }\n &[data-variant=\"secondary\"] {\n --_hov: color-mix(in srgb, var(--secondary), black 10%);\n background-color: var(--secondary);\n color: var(--secondary-foreground);\n border-color: rgb(255 255 255 / 0.5) rgb(0 0 0 / 0.1) rgb(0 0 0 / 0.1)\n rgb(255 255 255 / 0.5);\n }\n &[data-variant=\"danger\"] {\n --_hov: color-mix(in srgb, var(--danger), black 15%);\n background-color: var(--danger);\n color: var(--danger-foreground);\n }\n &:is(.outline, .ghost) {\n --_hov: var(--accent);\n background-color: transparent;\n color: var(--foreground);\n &[data-variant=\"danger\"] {\n --_hov: color-mix(in srgb, var(--danger), transparent 90%);\n color: var(--danger);\n }\n &[data-variant=\"secondary\"] {\n --_hov: color-mix(in srgb, var(--secondary), transparent 80%);\n color: var(--secondary-foreground);\n }\n }\n &.outline {\n border-color: var(--border);\n &[data-variant=\"danger\"] {\n border-color: var(--danger);\n }\n &[data-variant=\"secondary\"] {\n border-color: var(--secondary);\n }\n }\n &.ghost {\n border-color: transparent;\n }\n &.small {\n padding: var(--space-1) var(--space-3);\n font-size: var(--text-8);\n }\n &.large {\n height: 3rem;\n padding: 0 var(--space-6);\n font-size: var(--text-regular);\n }\n &.icon {\n width: 2.5rem;\n padding: 0;\n &.small {\n width: 2rem;\n }\n &.large {\n width: 3rem;\n }\n }\n }\n ::file-selector-button {\n background-color: transparent;\n color: var(--foreground);\n border: 1px solid var(--border);\n }\n ::file-selector-button:hover {\n background-color: var(--accent);\n }\n}\n@layer components {\n menu.buttons {\n list-style-type: none;\n padding-inline-start: 0;\n display: inline-flex;\n > li {\n &:first-child > * {\n border-start-start-radius: var(--radius-medium);\n border-end-start-radius: var(--radius-medium);\n }\n &:last-child > * {\n border-start-end-radius: var(--radius-medium);\n border-end-end-radius: var(--radius-medium);\n }\n > * {\n border-radius: 0;\n }\n &:not(:last-child) > * {\n border-inline-end: 1px solid\n rgb(from var(--primary-foreground) r g b / 0.2);\n }\n }\n }\n}\n@layer base {\n label {\n display: block;\n font-size: var(--text-7);\n font-weight: var(--font-medium);\n &:has(input:where([type=\"checkbox\"], [type=\"radio\"])) {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n row-gap: 0;\n font-weight: var(--font-normal);\n }\n }\n :where(\n input:not(\n [type=\"checkbox\"],\n [type=\"radio\"],\n [type=\"range\"],\n [type=\"file\"],\n [type=\"color\"]\n ),\n textarea,\n select\n ) {\n font-family: var(--font-sans);\n width: 100%;\n margin-block-start: var(--space-1);\n padding: var(--space-2) var(--space-3);\n font-size: var(--text-7);\n line-height: var(--leading-normal);\n background-color: var(--background);\n color: var(--foreground);\n border: 1px solid var(--input);\n border-radius: var(--radius-medium);\n transition:\n border-color var(--transition-fast),\n box-shadow var(--transition-fast);\n &::placeholder {\n color: var(--muted-foreground);\n }\n &:focus {\n outline: none;\n border-color: var(--ring);\n box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / 0.2);\n z-index: 1;\n }\n &:disabled {\n background-color: var(--muted);\n }\n &:is([aria-invalid=\"true\"], :user-invalid) {\n border-color: var(--danger);\n &:focus {\n box-shadow: 0 0 0 2px rgb(from var(--danger) r g b / 0.2);\n }\n }\n }\n textarea {\n height: auto;\n min-height: 5rem;\n padding: var(--space-3);\n resize: vertical;\n }\n select {\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--space-2) center;\n padding-inline-end: var(--space-6);\n }\n input:where([type=\"checkbox\"], [type=\"radio\"]) {\n appearance: none;\n width: 1rem;\n height: 1rem;\n margin: 0;\n position: relative;\n background-color: var(--background);\n border: 1px solid var(--input);\n transition:\n background-color var(--transition-fast),\n border-color var(--transition-fast);\n &:checked {\n background-color: var(--primary);\n border-color: var(--primary);\n &:after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: var(--primary-foreground);\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: 100%;\n }\n }\n }\n input[type=\"checkbox\"] {\n border-radius: var(--radius-small);\n &:checked:after {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E\");\n }\n &[role=\"switch\"] {\n --switch-height: calc(var(--bar-height) * 3);\n --switch-inset: 2px;\n --switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);\n width: calc(var(--switch-height) * 2);\n height: var(--switch-height);\n border-radius: var(--radius-full);\n background-color: var(--input);\n &:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: var(--switch-inset);\n transform: translateY(-50%);\n width: var(--switch-thumb);\n height: var(--switch-thumb);\n background-color: var(--background);\n border-radius: var(--radius-full);\n transition: transform var(--transition);\n box-shadow: var(--shadow-small);\n }\n &:checked {\n background-color: var(--primary);\n &:after {\n content: none;\n }\n &:before {\n transform: translateY(-50%) translate(var(--switch-height));\n }\n }\n }\n }\n input[type=\"radio\"] {\n border-radius: var(--radius-full);\n &:checked:after {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E\");\n }\n }\n :where(\n input:where([type=\"checkbox\"], [type=\"radio\"], [type=\"range\"]), select\n ):not(:disabled),\n label:has(input:where([type=\"checkbox\"], [type=\"radio\"]):not(:disabled)) {\n cursor: pointer;\n }\n input[type=\"range\"] {\n width: 100%;\n height: var(--bar-height);\n appearance: none;\n background: var(--muted);\n border-radius: var(--radius-full);\n &::-webkit-slider-thumb {\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n background: var(--primary);\n border-radius: var(--radius-full);\n transition: transform var(--transition-fast);\n &:hover {\n transform: scale(1.1);\n }\n }\n &::-moz-range-thumb {\n width: 1.25rem;\n height: 1.25rem;\n background: var(--primary);\n border: none;\n border-radius: var(--radius-full);\n }\n }\n fieldset {\n border: 1px solid var(--border);\n border-radius: var(--radius-medium);\n padding: var(--space-4);\n margin-block-end: var(--space-4);\n }\n legend {\n font-size: var(--text-7);\n font-weight: var(--font-medium);\n padding: 0 var(--space-2);\n }\n}\n@layer components {\n fieldset.group {\n display: flex;\n align-items: stretch;\n border: none;\n padding: 0;\n > :is(input, textarea, select) {\n flex: 1;\n margin-block-start: 0;\n &:not(:focus):not(:last-child) {\n border-inline-end-color: transparent;\n }\n }\n > :is(input, textarea, select, button) {\n border-radius: 0;\n &:first-child {\n border-radius: var(--radius-medium) 0 0 var(--radius-medium);\n }\n &:last-child {\n border-radius: 0 var(--radius-medium) var(--radius-medium) 0;\n }\n }\n > legend {\n float: inline-start;\n display: inline-flex;\n align-items: center;\n padding: 0 var(--space-3);\n line-height: var(--leading-normal);\n font-weight: var(--font-normal);\n color: var(--muted-foreground);\n background-color: var(--muted);\n border: 1px solid var(--input);\n border-inline-end: none;\n border-radius: var(--radius-medium) 0 0 var(--radius-medium);\n }\n }\n [data-field] {\n margin-block-end: var(--space-4);\n flex-wrap: wrap;\n [data-hint], .error {\n font-size: var(--text-8);\n font-weight: var(--font-normal);\n color: var(--muted-foreground);\n margin-block-start: var(--space-1);\n display: block;\n flex-basis: 100%;\n min-inline-size: 100%;\n }\n .error {\n display: none;\n }\n &:is([aria-invalid=\"true\"], :has([aria-invalid=\"true\"])) .error {\n display: block;\n color: var(--danger);\n }\n }\n}\n@layer base {\n .table {\n min-width: 320px;\n width: 100%;\n overflow-x: auto;\n }\n table {\n border-collapse: collapse;\n width: 100%;\n font-size: var(--text-7);\n }\n thead {\n border-bottom: 1px solid var(--border);\n }\n tfoot {\n border-top: 1px solid var(--border);\n }\n th, td {\n overflow-wrap: break-word;\n }\n th {\n padding: var(--space-3) var(--space-2);\n text-align: start;\n font-weight: var(--font-medium);\n color: var(--muted-foreground);\n }\n td {\n padding: var(--space-3) var(--space-2);\n }\n tbody tr {\n border-bottom: 1px solid var(--border);\n transition: background-color var(--transition-fast);\n &:last-child {\n border-bottom: none;\n }\n &:hover {\n background-color: rgb(from var(--muted) r g b / 0.5);\n }\n }\n}\n@layer base {\n progress, meter {\n appearance: none;\n width: 100%;\n height: var(--bar-height);\n border: none;\n border-radius: var(--radius-full);\n overflow: hidden;\n background: var(--muted);\n }\n progress {\n &::-webkit-progress-bar {\n background-color: var(--muted);\n border-radius: var(--radius-full);\n }\n &::-webkit-progress-value {\n background-color: var(--primary);\n border-radius: var(--radius-full);\n transition: width var(--transition);\n }\n &::-moz-progress-bar {\n background-color: var(--primary);\n border-radius: var(--radius-full);\n }\n }\n meter {\n &::-webkit-meter-bar {\n background: var(--muted);\n border: none;\n border-radius: var(--radius-full);\n height: var(--bar-height);\n }\n &::-webkit-meter-optimum-value,\n &::-webkit-meter-suboptimum-value,\n &::-webkit-meter-even-less-good-value {\n border-radius: var(--radius-full);\n }\n &::-webkit-meter-optimum-value {\n background: var(--success);\n }\n &::-webkit-meter-suboptimum-value {\n background: var(--warning);\n }\n &::-webkit-meter-even-less-good-value {\n background: var(--danger);\n }\n &::-moz-meter-bar {\n background: var(--success);\n border-radius: var(--radius-full);\n }\n &:-moz-meter-sub-optimum::-moz-meter-bar {\n background: var(--warning);\n }\n &:-moz-meter-sub-sub-optimum::-moz-meter-bar {\n background: var(--danger);\n }\n }\n}\n@layer components {\n [aria-busy=\"true\"] {\n &:before {\n content: \"\";\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n border: 2px solid var(--muted);\n border-top-color: var(--primary);\n border-radius: var(--radius-full);\n animation: spin 1s linear infinite;\n }\n &[data-spinner~=\"small\"]:before {\n width: 1rem;\n height: 1rem;\n }\n &[data-spinner~=\"large\"]:before {\n width: 2rem;\n height: 2rem;\n border-width: 3px;\n }\n &[data-spinner~=\"overlay\"] {\n position: relative;\n > * {\n opacity: 0.3;\n pointer-events: none;\n }\n &:before {\n position: absolute;\n inset: 0;\n margin: auto;\n z-index: 1;\n }\n }\n }\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n}\n@layer components {\n :root {\n --grid-cols: 12;\n --grid-gap: 1.5rem;\n --container-max: 1280px;\n --container-pad: 1rem;\n }\n .container {\n width: 100%;\n max-width: var(--container-max);\n margin-inline: auto;\n padding-inline: var(--container-pad);\n }\n .row {\n display: grid;\n grid-template-columns: repeat(var(--grid-cols), 1fr);\n gap: var(--grid-gap);\n width: 100%;\n }\n .col, [class*=\"col-\"] {\n grid-column-end: span\n calc(var(--span, var(--grid-cols)) + var(--offset, 0));\n }\n .col-1 {\n --span: 1;\n }\n .col-2 {\n --span: 2;\n }\n .col-3 {\n --span: 3;\n }\n .col-4 {\n --span: 4;\n }\n .col-5 {\n --span: 5;\n }\n .col-6 {\n --span: 6;\n }\n .col-7 {\n --span: 7;\n }\n .col-8 {\n --span: 8;\n }\n .col-9 {\n --span: 9;\n }\n .col-10 {\n --span: 10;\n }\n .col-11 {\n --span: 11;\n }\n .col-12 {\n --span: 12;\n }\n .offset-1 {\n --offset: 1;\n }\n .offset-2 {\n --offset: 2;\n }\n .offset-3 {\n --offset: 3;\n }\n .offset-4 {\n --offset: 4;\n }\n .offset-5 {\n --offset: 5;\n }\n .offset-6 {\n --offset: 6;\n }\n [class*=\"offset-\"] {\n margin-inline-start: calc(\n var(--offset) * (100% + var(--grid-gap)) / (var(--span) + var(--offset))\n );\n }\n .col-end {\n grid-column-start: span var(--span, 1);\n grid-column-end: -1;\n }\n @media (max-width: 768px) {\n .row {\n --grid-cols: 4;\n --grid-gap: 1rem;\n }\n .col, [class*=\"col-\"] {\n --span: 4;\n }\n [class*=\"offset-\"] {\n --offset: 0;\n margin-inline-start: 0;\n }\n }\n}\n@layer components {\n .card {\n background-color: var(--card);\n color: var(--card-foreground);\n border: 1px solid var(--border);\n border-radius: var(--radius-medium);\n box-shadow: var(--shadow-small);\n padding: var(--space-6);\n }\n}\n@layer components {\n [role=\"alert\"] {\n position: relative;\n display: flex;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-6);\n background-color: var(--background);\n border: 1px solid var(--border);\n border-radius: var(--radius-medium);\n font-size: var(--text-7);\n &[data-variant] {\n border: none;\n }\n &:is(\n [data-variant=\"error\"],\n [data-variant=\"danger\"],\n [data-variant=\"success\"],\n [data-variant=\"warning\"]\n ) {\n color: var(--_variant-color);\n background-color: light-dark(\n color-mix(in srgb, var(--_variant-color) 8%, transparent),\n color-mix(in srgb, var(--_variant-color) 20%, transparent)\n );\n & a {\n color: var(--_variant-color);\n }\n }\n }\n}\n@layer components {\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-1);\n padding: var(--space-1) var(--space-4);\n font-size: var(--text-8);\n font-weight: var(--font-medium);\n text-wrap: nowrap;\n line-height: var(--leading-normal);\n background-color: var(--primary);\n color: var(--primary-foreground);\n border-radius: var(--radius-full);\n &.outline {\n background-color: transparent;\n color: var(--foreground);\n border: 1px solid var(--border);\n }\n &[data-variant=\"secondary\"] {\n background-color: var(--secondary);\n color: var(--secondary-foreground);\n }\n &:is(\n [data-variant=\"success\"],\n [data-variant=\"warning\"],\n [data-variant=\"danger\"]\n ) {\n color: var(--_variant-color);\n background-color: light-dark(\n color-mix(in srgb, var(--_variant-color) 10%, transparent),\n color-mix(in srgb, var(--_variant-color) 30%, transparent)\n );\n }\n position: relative;\n button {\n all: unset;\n position: absolute;\n right: 0;\n padding-inline: var(--space-3) var(--space-2);\n cursor: pointer;\n opacity: 0;\n pointer-events: none;\n border-start-end-radius: inherit;\n border-end-end-radius: inherit;\n background-color: color-mix(in srgb, var(--muted) 60%, transparent);\n transition: opacity var(--transition-fast);\n }\n &:hover button, button:focus-visible {\n opacity: 1;\n pointer-events: auto;\n }\n }\n}\n@layer components {\n details {\n border: 1px solid var(--border);\n border-radius: var(--radius-medium);\n overflow: hidden;\n + details {\n margin-top: -1px;\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n &:has(+ details) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n &[open] summary {\n border-bottom: 1px solid var(--border);\n }\n }\n summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-4);\n font-weight: var(--font-medium);\n cursor: pointer;\n user-select: none;\n transition: background-color var(--transition-fast);\n &:hover {\n background-color: var(--muted);\n }\n &::-webkit-details-marker, &::marker {\n display: none;\n }\n &:after {\n content: \"\";\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n background-color: currentColor;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");\n mask-size: contain;\n mask-repeat: no-repeat;\n transition: transform var(--transition-fast);\n }\n details[open] &:after {\n transform: rotate(180deg);\n }\n }\n details > *:not(summary) {\n margin: var(--space-4);\n }\n details[open] > *:not(summary) {\n animation: fade-in-up 0.3s both;\n }\n}\n@layer components {\n [role=\"tablist\"] {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-1);\n background-color: var(--muted);\n border-radius: var(--radius-medium);\n }\n [role=\"tab\"] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-2) var(--space-3);\n font-size: var(--text-7);\n font-weight: var(--font-medium);\n white-space: nowrap;\n background-color: transparent;\n color: var(--foreground);\n border: none;\n border-radius: calc(var(--radius-medium) - 2px);\n cursor: pointer;\n transition:\n background-color var(--transition-fast),\n color var(--transition-fast);\n &:hover {\n color: var(--muted-foreground);\n }\n &[aria-selected=\"true\"] {\n background-color: var(--background);\n box-shadow: var(--shadow-small);\n }\n }\n [role=\"tabpanel\"] {\n padding: var(--space-4) 0;\n &:focus-visible {\n outline: none;\n }\n &:not([hidden]) {\n animation: fade-in-up 0.3s both;\n }\n }\n}\n@layer components {\n dialog {\n position: fixed;\n inset: 0;\n z-index: var(--z-modal);\n width: min(100% - 2rem, 32rem);\n max-height: 85vh;\n margin: auto;\n padding: 0;\n background-color: var(--card);\n border: 1px solid var(--border);\n border-radius: var(--radius-large);\n box-shadow: var(--shadow-large);\n overflow: hidden;\n opacity: 0;\n transform: scale(0.95);\n transition:\n opacity 0.15s ease,\n transform 0.15s ease,\n overlay 0.15s ease allow-discrete,\n display 0.15s ease allow-discrete;\n &:is([open], :popover-open) {\n opacity: 1;\n transform: scale(1);\n }\n @starting-style {\n &:is([open], :popover-open) {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n &::backdrop {\n background-color: #0000;\n transition:\n background-color 0.15s ease,\n overlay 0.15s ease allow-discrete,\n display 0.15s ease allow-discrete;\n }\n &:is([open], :popover-open)::backdrop {\n background-color: #00000080;\n }\n @starting-style {\n &:is([open], :popover-open)::backdrop {\n background-color: #0000;\n }\n }\n > header, > form > header {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-6);\n padding-block-end: 0;\n > :is(h1, h2, h3, h4, h5, h6) {\n margin-block-end: 0;\n }\n > p {\n font-size: var(--text-7);\n color: var(--muted-foreground);\n margin-block-end: 0;\n }\n }\n :is(&, & > form) > :is(p, div, section) {\n padding: var(--space-6);\n overflow-y: auto;\n }\n > footer, > form > footer {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: var(--space-6);\n padding-block-start: 0;\n }\n }\n}\n@layer components {\n ot-dropdown {\n [popover] {\n position: fixed;\n margin: 0;\n min-width: 12rem;\n background-color: var(--background);\n border: 1px solid var(--border);\n border-radius: var(--radius-medium);\n box-shadow: var(--shadow-small);\n opacity: 0;\n transform: translateY(-4px);\n transition:\n opacity 0.15s ease-out,\n transform 0.15s ease-out,\n display 0.15s allow-discrete,\n overlay 0.15s allow-discrete;\n &:popover-open {\n opacity: 1;\n transform: translateY(0);\n }\n @starting-style {\n &:popover-open {\n opacity: 0;\n transform: translateY(-4px);\n }\n }\n hr {\n margin: var(--space-1) 0;\n }\n }\n [role=\"menuitem\"] {\n display: flex;\n width: 100%;\n padding: var(--space-2) var(--space-3);\n justify-content: start;\n cursor: pointer;\n &:hover, &:focus {\n background-color: var(--accent);\n outline: none;\n }\n }\n }\n}\n@layer components {\n .toast-container {\n position: fixed;\n display: flex;\n flex-direction: column;\n pointer-events: none;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n overflow: visible;\n &::backdrop {\n display: none;\n }\n &[data-placement^=\"top\"] {\n inset: var(--space-4) auto auto auto;\n }\n &[data-placement^=\"bottom\"] {\n inset: auto auto var(--space-4) auto;\n flex-direction: column-reverse;\n }\n &[data-placement$=\"left\"] {\n left: var(--space-4);\n }\n &[data-placement$=\"center\"] {\n left: 50%;\n transform: translate(-50%);\n }\n &[data-placement$=\"right\"] {\n right: var(--space-4);\n }\n }\n .toast {\n --transition: 0.3s;\n --transition-in: calc(var(--transition) - 50ms);\n padding: var(--space-5) var(--space-4);\n max-width: 28rem;\n min-width: 20rem;\n pointer-events: auto;\n background-color: var(--card);\n border: 1px solid var(--border);\n border-inline-start-width: var(--space-1);\n border-inline-start-style: solid;\n border-inline-start-color: var(--_variant-color, var(--border));\n border-radius: var(--radius-medium);\n box-shadow: var(--shadow-small);\n transition:\n opacity var(--transition-in),\n transform var(--transition-in),\n margin var(--transition-in);\n line-height: 1;\n .toast-title {\n font-weight: 600;\n margin: 0 0 var(--space-3) 0;\n color: var(--_variant-color, inherit);\n }\n .toast-message {\n color: var(--muted-foreground);\n }\n > [data-close] {\n margin-inline-start: auto;\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n opacity: 0.5;\n &:hover {\n opacity: 1;\n }\n }\n margin: var(--space-2) 0;\n &[data-entering] {\n opacity: 0;\n transform: translateY(-1rem);\n }\n &[data-exiting] {\n opacity: 0;\n margin: 0;\n padding-block: 0;\n max-height: 0;\n overflow: hidden;\n transition:\n opacity var(--transition),\n margin var(--transition),\n padding var(--transition),\n max-height var(--transition);\n }\n }\n}\n@layer components {\n :root {\n --sidebar-width: 15rem;\n }\n [data-sidebar-layout] {\n display: grid;\n grid-template-columns: var(--sidebar-width) 1fr;\n grid-template-rows: auto 1fr;\n height: 100dvh;\n > main {\n grid-row: 2;\n min-width: 0;\n overflow-y: auto;\n }\n > aside[data-sidebar] {\n grid-row: 2;\n min-height: 0;\n z-index: 1;\n background-color: var(--background);\n border-inline-end: 1px solid var(--border);\n box-shadow: var(--shadow-medium);\n display: flex;\n flex-direction: column;\n > :is(header, footer) {\n flex-shrink: 0;\n padding: var(--space-3);\n }\n > footer {\n margin-block-start: auto;\n }\n > nav {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: var(--space-3) var(--space-2);\n font-size: var(--text-7);\n ul {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n li {\n margin: 0;\n }\n }\n a {\n display: flex;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-3);\n color: var(--foreground);\n text-decoration: none;\n border-radius: var(--radius-small);\n transition: background-color var(--transition-fast);\n &:is(:hover, [aria-current]) {\n background-color: var(--accent);\n }\n }\n details {\n border: none;\n overflow: visible;\n + details {\n margin-top: 0;\n }\n &[open] summary {\n border-bottom: none;\n }\n > ul {\n margin-inline-start: var(--space-4);\n padding: var(--space-1) 0;\n }\n }\n summary {\n justify-content: flex-start;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-small);\n &:after {\n width: 0.75rem;\n height: 0.75rem;\n margin-inline-start: auto;\n }\n }\n }\n }\n > nav[data-topnav] {\n grid-column: 1 / -1;\n }\n }\n nav[data-topnav] {\n position: sticky;\n top: 0;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n background-color: var(--background);\n border-bottom: 1px solid var(--border);\n box-shadow: var(--shadow-small);\n a {\n text-decoration: none;\n }\n }\n :is([data-sidebar-toggle], [data-sidebar-header]) {\n display: none;\n }\n [data-sidebar-toggle] {\n padding: 0 var(--space-1);\n background: none;\n border: 1px solid var(--border);\n border-radius: var(--radius-small);\n }\n @media (min-width: 769px) {\n [data-sidebar-layout=\"always\"] {\n transition: grid-template-columns var(--transition);\n [data-sidebar-toggle] {\n display: inline-block;\n }\n > aside[data-sidebar] {\n transform: translate(0);\n opacity: 1;\n transition:\n transform var(--transition),\n opacity var(--transition),\n visibility var(--transition);\n }\n &[data-sidebar-open] {\n grid-template-columns: 0px 1fr;\n gap: 0;\n > aside[data-sidebar] {\n overflow: hidden;\n min-width: 0;\n transform: translate(-100%);\n opacity: 0;\n visibility: hidden;\n border-inline-end: none;\n }\n }\n }\n }\n @media (max-width: 768px) {\n [data-sidebar-layout] {\n grid-template-columns: 1fr;\n > main {\n grid-column: 1;\n }\n > aside[data-sidebar] {\n grid-column: 1;\n z-index: 2;\n width: min(var(--sidebar-width), 100vw);\n transform: translate(-100%);\n transition: transform var(--transition);\n box-shadow: var(--shadow-large);\n }\n &[data-sidebar-open] > aside[data-sidebar] {\n transform: translate(0);\n }\n }\n [data-sidebar-toggle] {\n display: inline-block;\n }\n [data-sidebar-header] {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: 1px solid var(--border);\n }\n }\n}\n@layer components {\n ot-taginput {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n background-color: var(--background);\n border: 1px solid var(--input);\n border-radius: var(--radius-medium);\n cursor: text;\n transition:\n border-color var(--transition-fast),\n box-shadow var(--transition-fast);\n width: 100%;\n min-height: calc(1lh + var(--space-5));\n &:focus-within {\n border-color: var(--ring);\n box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / 0.2);\n }\n &[aria-disabled=\"true\"] {\n cursor: not-allowed;\n .badge button {\n opacity: 0;\n pointer-events: none;\n }\n }\n input {\n flex: 1;\n min-width: 8ch;\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n &:focus {\n box-shadow: none;\n }\n }\n }\n}\n@layer components {\n [role=\"status\"].skeleton {\n --_c: light-dark(\n color-mix(in srgb, var(--muted) 15%, white),\n color-mix(in srgb, var(--muted) 90%, var(--foreground))\n );\n margin-block-end: var(--space-3);\n background: var(--muted);\n border-radius: var(--radius-medium);\n animation: anim 2s infinite;\n background-size: 200% 100%;\n background-image: linear-gradient(\n 90deg,\n var(--muted) 0%,\n var(--_c) 50%,\n var(--muted) 100%\n );\n &.box {\n width: 4rem;\n height: 4rem;\n }\n &.line {\n height: 1rem;\n width: 100%;\n }\n }\n [role=\"status\"].skeleton:last-child {\n margin-block-end: 0;\n }\n @keyframes anim {\n 0% {\n background-position: 200% 0;\n }\n to {\n background-position: -200% 0;\n }\n }\n}\n@layer components {\n [data-tooltip] {\n position: relative;\n --_c: translateX(-50%);\n --_o: translateY(4px);\n &:before, &:after {\n position: absolute;\n inset-inline-start: 50%;\n transform: var(--_c) var(--_o);\n opacity: 0;\n visibility: hidden;\n transition:\n opacity var(--transition-fast),\n transform var(--transition-fast),\n visibility var(--transition-fast);\n pointer-events: none;\n z-index: calc(var(--z-modal) + 10);\n }\n &:after {\n content: attr(data-tooltip);\n inset-block-end: calc(100% + 10px);\n padding: var(--space-2) var(--space-3);\n font-size: var(--text-7);\n line-height: 1;\n white-space: nowrap;\n background: var(--foreground);\n color: var(--background);\n border-radius: var(--radius-medium);\n }\n &:before {\n content: \"\";\n inset-block-end: calc(100% - 5px);\n border: 8px solid transparent;\n border-top-color: var(--foreground);\n }\n &[data-tooltip-placement=\"bottom\"] {\n --_o: translateY(-4px);\n &:before, &:after {\n inset-block-start: calc(100% + 10px);\n inset-block-end: auto;\n }\n &:before {\n inset-block-start: calc(100% - 5px);\n border-color: transparent;\n border-bottom-color: var(--foreground);\n }\n }\n &:is([data-tooltip-placement=\"left\"], [data-tooltip-placement=\"right\"]) {\n --_c: translateY(-50%);\n &:before, &:after {\n inset-block-start: 50%;\n inset-block-end: auto;\n }\n &:before {\n border-color: transparent;\n }\n }\n &[data-tooltip-placement=\"left\"] {\n --_o: translateX(4px);\n &:before, &:after {\n inset-inline-start: auto;\n }\n &:after {\n inset-inline-end: calc(100% + 10px);\n }\n &:before {\n inset-inline-end: calc(100% - 5px);\n border-inline-start-color: var(--foreground);\n }\n }\n &[data-tooltip-placement=\"right\"] {\n --_o: translateX(-4px);\n &:after {\n inset-inline-start: calc(100% + 10px);\n }\n &:before {\n inset-inline-start: calc(100% - 5px);\n border-inline-end-color: var(--foreground);\n }\n }\n &:is(:hover, :focus-visible) {\n --_o: translateY(0);\n &:before, &:after {\n opacity: 1;\n visibility: visible;\n transition-delay: 0.7s;\n }\n }\n }\n}\n@layer components {\n ot-upload {\n cursor: pointer;\n width: 100%;\n &[data-drag] {\n border-color: var(--ring);\n box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / 0.2);\n }\n .badge {\n text-overflow: ellipsis;\n max-width: 20ch;\n overflow: hidden;\n display: inline-block;\n }\n }\n}\n@layer utilities {\n .align-left {\n text-align: start;\n }\n .align-center {\n text-align: center;\n }\n .align-right {\n text-align: end;\n }\n .text-light {\n color: var(--muted-foreground);\n }\n .text-lighter {\n color: var(--faint-foreground);\n }\n .flex {\n display: flex;\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .hstack {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n flex-wrap: wrap;\n align-content: flex-start;\n height: auto;\n > * {\n margin: 0;\n }\n }\n .vstack {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n }\n .gap-1 {\n gap: var(--space-1);\n }\n .gap-2 {\n gap: var(--space-2);\n }\n .gap-4 {\n gap: var(--space-4);\n }\n .gap-6 {\n gap: var(--space-6);\n }\n .mt-2 {\n margin-block-start: var(--space-2);\n }\n .mt-4 {\n margin-block-start: var(--space-4);\n }\n .mt-6 {\n margin-block-start: var(--space-6);\n }\n .mt-8 {\n margin-block-start: var(--space-8);\n }\n .mb-2 {\n margin-block-end: var(--space-2);\n }\n .mb-4 {\n margin-block-end: var(--space-4);\n }\n .mb-6 {\n margin-block-end: var(--space-6);\n }\n .mb-8 {\n margin-block-end: var(--space-8);\n }\n .p-4 {\n padding: var(--space-4);\n }\n .w-100 {\n width: 100%;\n }\n :is(ul, ol).unstyled {\n list-style: none;\n text-decoration: none;\n padding: 0;\n }\n a.unstyled {\n color: inherit;\n text-decoration: none;\n &:hover {\n color: var(--primary);\n }\n }\n}","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();","createdAt",["D",1787597129829],"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=1789556399&sig=f55b1da9030932fec62e1a097b2a1e82a86b7e16c80b8da846d667319f37c879","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":250,"_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":251,"_81":252,"_83":253,"_85":25},"tree",[217,218,219,220,221,222,223,224],"files",[217,218,219,220,221,222,223,224],"counts",{"_207":63,"_208":157,"_209":63,"_210":211,"_212":213},"contents",[142,143,144,145,146,147,148,149],"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=1789556399&sig=d4d039bf60786a03d56ec8a29ec1b19630253aab318e490fcd07a6f24846b070",{"_42":201,"_32":202,"_30":203,"_153":-5,"_40":41,"_39":157,"_155":59,"_37":204,"_13":63,"_33":20,"_34":205,"_24":25,"_159":-5,"_27":206},{"_42":195,"_32":196,"_30":197,"_153":-5,"_40":41,"_39":157,"_155":59,"_37":198,"_13":63,"_33":20,"_34":199,"_24":25,"_159":-5,"_27":200},{"_42":187,"_32":188,"_30":189,"_153":-5,"_40":41,"_39":190,"_155":25,"_37":191,"_13":192,"_33":20,"_34":193,"_24":25,"_159":-5,"_27":194},{"_42":181,"_32":182,"_30":57,"_153":-5,"_40":41,"_39":183,"_155":59,"_37":184,"_13":157,"_33":185,"_34":36,"_24":25,"_159":-5,"_27":186},{"_42":177,"_32":28,"_30":31,"_153":-5,"_40":41,"_39":14,"_155":25,"_37":178,"_13":179,"_33":20,"_34":36,"_24":25,"_159":-5,"_27":180},{"_42":169,"_32":170,"_30":171,"_153":-5,"_40":41,"_39":172,"_155":59,"_37":173,"_13":174,"_33":166,"_34":175,"_24":25,"_159":-5,"_27":176},{"_42":161,"_32":162,"_30":163,"_153":-5,"_40":41,"_39":164,"_155":59,"_37":165,"_13":157,"_33":166,"_34":167,"_24":25,"_159":-5,"_27":168},{"_42":150,"_32":151,"_30":152,"_153":-5,"_40":41,"_39":154,"_155":59,"_37":156,"_13":157,"_33":20,"_34":158,"_24":25,"_159":-5,"_27":160},"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",[151],"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}",[162],"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})();",[170],"3a6846bf-78bd-46e7-b29f-db2d14abb691",["D",1787597129829],6,[28],"4bff3c8c-f19b-421f-8d5a-ae4f294000a6","main.tsx",20,["D",1787597126623],"http",[182],"8292e7e7-bb65-4ef0-b990-2fe7c82f3e6a","index.html","01a03514-76ac-76e3-8213-a88fd71c2b1b",15,["D",1787597084194],7,"\n\n \n \n \n Oat kitchensink dashboard demo — Oat UI\n\n \n \n \n\n \n \n \n \n \n\n \n

Hi there!

\n\n

\n I'm your cool new webpage. Made with Val Town!\n

\n \n",[188],"81d995b8-31a6-480e-bb34-1d9b3e2de104","favicon.svg","01a03514-76ac-76e3-8213-a643883a760c",["D",1787596928590],"",[196],"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",[202],"pulls","branches","forks","envVars",{"_214":63,"_216":63},"connections",{"_214":63,"_215":63},"count","unfilledCount","emptyCount",{"_42":201,"_32":202,"_30":203,"_153":-5,"_40":41,"_39":157,"_155":59,"_37":247,"_13":63,"_33":20,"_34":205,"_24":25,"_159":-5,"_226":248,"_27":249},{"_42":195,"_32":196,"_30":197,"_153":-5,"_40":41,"_39":157,"_155":59,"_37":244,"_13":63,"_33":20,"_34":199,"_24":25,"_159":-5,"_226":245,"_27":246},{"_42":187,"_32":188,"_30":189,"_153":-5,"_40":41,"_39":190,"_155":25,"_37":241,"_13":192,"_33":20,"_34":193,"_24":25,"_159":-5,"_226":242,"_27":243},{"_42":181,"_32":182,"_30":57,"_153":-5,"_40":41,"_39":183,"_155":59,"_37":238,"_13":157,"_33":185,"_34":36,"_24":25,"_159":-5,"_226":239,"_27":240},{"_42":177,"_32":28,"_30":31,"_153":-5,"_40":41,"_39":14,"_155":25,"_37":235,"_13":179,"_33":20,"_34":36,"_24":25,"_159":-5,"_226":236,"_27":237},{"_42":169,"_32":170,"_30":171,"_153":-5,"_40":41,"_39":172,"_155":59,"_37":232,"_13":174,"_33":166,"_34":175,"_24":25,"_159":-5,"_226":233,"_27":234},{"_42":161,"_32":162,"_30":163,"_153":-5,"_40":41,"_39":164,"_155":59,"_37":229,"_13":157,"_33":166,"_34":167,"_24":25,"_159":-5,"_226":230,"_27":231},{"_42":150,"_32":151,"_30":152,"_153":-5,"_40":41,"_39":154,"_155":59,"_37":225,"_13":157,"_33":20,"_34":158,"_24":25,"_159":-5,"_226":227,"_27":228},["D",1787596994002],"children",[],[151],["D",1787597038928],[],[162],["D",1787597115030],[],[170],["D",1787597129829],[],[28],["D",1787597126623],[],[182],["D",1787597084194],[],[188],["D",1787596928590],[],[196],["D",1787596928590],[],[202],["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":287,"_288":289,"_290":291,"_292":25,"_293":25,"_294":25,"_295":59,"_296":-5,"_297":-7,"_298":-7,"_299":63,"_300":25,"_301":25,"_302":-5,"_303":25,"_304":25,"_305":25,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":87,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"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 · v21