<!DOCTYPE html>

<html>
<head>
<meta content="width=device-width, initial-scale=1" data-n-head="ssr" name="viewport"/>
<meta property="og:title" content="Meme Generator"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://memegenerator.net/css/mg2.admin.style.css"/>
<meta property="og:image"/>
<meta property="og:description"/>
<title>Meme Generator</title>
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=G-P952PRPTTR"></script>
<script async="async" src="https://static.addtoany.com/menu/page.js"></script>
<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-P952PRPTTR');</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old Standard TT|Oswald|Special Elite&amp;display=swap"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shorthandcss@1.1.1/dist/shorthand.min.css"/>
<link rel="stylesheet" href="/css/defaults.css"/>
<link rel="stylesheet" href="/css/layout.css"/>
<link rel="stylesheet" href="/css/transitions.css"/>
<link rel="stylesheet" href="/lib/prism/prism.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.2.3/dexie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-async-computed"></script>
<script src="/lib/prism/prism.js"></script>
<script>window.components = [{"name":"app","path":"\\app.ws.yaml","source":{"dom":{"div#1":{"div#2":{".site-loading":{"ui.loading":{"v-if":"$root.isLoading"}},"site.header":{"class":"site-width"},"div#3":{"class":"header-spacer"}},".pages":{":class":"{ 'site-width': true }","page.test":null,"page.admin.index":null,"page.home":null,"page.thread":null,"page.category":null,"page.builder":null,"page.generator":null,"page.instance":null,"page.media":null}}},"name":"app","style":{".site-loading":{"position":"fixed","top":"50%","left":"50%"},".site-width":{"width":"min(1000px, 90vw)","margin":"auto"},".pages > div":{"position":"absolute","top":0,"padding-bottom":"20vh"},".comp-site-header":{"position":"fixed","top":0,"margin":"0 0 1rem","background-repeat":"no-repeat","background-size":"cover","background-position":"center","transition":"0s !important","left":"50%","transform":"translateX(-50%)","z-index":1000000},".header-spacer":{"height":"8rem"}},"template":"<div class=\"comp-app\" path=\"96801.\"><div path=\"96801.0\"><div class=\"site-loading\" path=\"96801.0.0\"><ui-loading v-if=\"$root.isLoading\" path=\"96801.0.0.0\"></ui-loading></div><site-header class=\"site-width\" path=\"96801.0.1\"></site-header><div class=\"header-spacer\" path=\"96801.0.2\"></div></div><div class=\"pages\" :class=\"{ 'site-width': true }\" path=\"96801.1\"><page-test></page-test><page-admin-index></page-admin-index><page-home></page-home><page-thread></page-thread><page-category></page-category><page-builder></page-builder><page-generator></page-generator><page-instance></page-instance><page-media></page-media></div></div>"}},{"name":"content.article","path":"\\content\\article.ws.yaml","source":{"dom":{"div":{".text":{"slot":{"name":"content"}}}},"methods":null,"style":{".text":{"min-height":"10rem","-webkit-mask-image":"#-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, #0, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, #0.4)))"}},"name":"content-article","template":"<div class=\"comp-content-article\" path=\"191531137.\"><div class=\"text\" path=\"191531137.0\"><slot name=\"content\" path=\"191531137.0.0\"></slot></div></div>"}},{"name":"content.meet.the.meme","path":"\\content\\meet.the.meme.ws.yaml","source":{"dom":{"div#1":{"h2":{"v-text":"'Meet the Meme'"},"transition":{"name":"slide","div#2":{"v-if":"generator",":key":"generator?._id",".grid1":{"e.generator.square":{":generator":"generator"},".article1":{"v-text":"generator.desc.article"}},"div#3":{"class":"clear-both"}}}}},"data":{"generator":null,"isInited":false},"mounted":"async function() {\n  this.$watch(() => this.$root.params.page, {\n    handler: async (page) => {\n      if (page != \"home\") {\n        this.generator = null;\n        return;\n      }\n      await this.init();\n      this.isInited = true;\n    },\n    immediate: true\n  });\n}\n","methods":{"init":"async function() {\n  this.generator = (await this.$root.dbp.generators.sample.popular(1))[0];\n}\n"},"name":"content-meet-the-meme","style":{"h2":{"font-size":"3em"},".article1":{"max-height":"10em","overflow":"auto"},".grid1":{"display":"grid","grid-template":"1fr / 1fr 3fr","gap":"1em"}},"template":"<div class=\"comp-content-meet-the-meme\" path=\"-1242656353.\"><h2 v-text=\"'Meet the Meme'\" path=\"-1242656353.0\"></h2><transition name=\"slide\" path=\"-1242656353.1\"><div v-if=\"generator\" :key=\"generator?._id\" path=\"-1242656353.1.0\"><div class=\"grid1\" path=\"-1242656353.1.0.0\"><e-generator-square :generator=\"generator\" path=\"-1242656353.1.0.0.0\"></e-generator-square><div class=\"article1\" v-text=\"generator.desc.article\" path=\"-1242656353.1.0.0.1\"></div></div><div class=\"clear-both\" path=\"-1242656353.1.0.1\"></div></div></transition></div>"}},{"name":"content.poem.full","path":"\\content\\poem\\full.ws.yaml","source":{"dom":{".box":{".line":{"v-for":"(line, index) in lines",":class":"getLineCssClass(index)","v-text":"line"}}},"props":{"lines":null},"methods":{"getLineCssClass":"\nfunction(index) {\n  if (!index) return null;\n  return `ml-l${index}`;\n}\n"},"name":"content-poem-full","style":{".box":{"margin":"auto","width":"fit-content","padding":"1rem","-webkit-mask-image":"-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.3)), to(rgba(0,0,0,1)))"},".line":{"line-height":"1em","font-size":"200%","font-family":"Old Standard TT"}},"template":"<div class=\"comp-content-poem-full box\" path=\"1035076097.\"><div class=\"line\" v-for=\"(line, index) in lines\" :class=\"getLineCssClass(index)\" v-text=\"line\" path=\"1035076097.0\"></div></div>"}},{"name":"content.poem.stanza","path":"\\content\\poem\\stanza.ws.yaml","source":{"dom":{"div":{"v-if":"item",".lines":{".line.mono":{"v-for":"line in getLines()","v-text":"line"}}}},"props":{"item":null,"lines":null},"methods":{"getLines":"function() {\n  if (!this.lines) return this.item;\n  return this.item.take(this.lines);\n}\n"},"style":{".comp-content-poem-stanza":{"width":"100%","height":"fit-content","background":"linear-gradient(45deg, black, #ffffff30)","border":"1px solid gray","box-shadow":"inset -4px 4px 2px #000"},".lines":{"padding":"1rem"},".line":{"text-shadow":"-5px 5px 3px #000"}},"name":"content-poem-stanza","template":"<div class=\"comp-content-poem-stanza\" v-if=\"item\" path=\"-1353349913.\"><div class=\"lines\" path=\"-1353349913.0\"><div class=\"line mono\" v-for=\"line in getLines()\" v-text=\"line\" path=\"-1353349913.0.0\"></div></div></div>"}},{"name":"content.recommendations","path":"\\content\\recommendations.ws.yaml","source":{"dom":{".list":{"transition.group":{"tag":"ul","name":"list","li":{"v-for":"generator in items","e.generator.wide":{":item":"generator"},":key":"generator.generatorID"}}}},"style":{".list":{"display":"flex","flex-direction":"column","gap":"1rem"}},"props":{"items":null},"name":"content-recommendations","template":"<div class=\"comp-content-recommendations list\" path=\"-1482246043.\"><transition-group tag=\"ul\" name=\"list\" path=\"-1482246043.0\"><li v-for=\"generator in items\" :key=\"generator.generatorID\" path=\"-1482246043.0.0\"><e-generator-wide :item=\"generator\" path=\"-1482246043.0.0.0\"></e-generator-wide></li></transition-group></div>"}},{"name":"content.stream","path":"\\content\\stream.ws.yaml","source":{"dom":{"ui.infinite.scroll":{"on_scroll":"loadMore","transition.group":{"tag":"ul","name":"slide",":class":"gridClass",":style":"{ gap: gap }","li":{"v-for":"(item, index) in items",":key":"$root.getKey(item)","component":{":is":"itemType.kebabize()",":item":"item","v-bind":"itemProps"}}}}},"name":"content-stream","props":{"itemType":null,"itemProps":null,"getMoreItems":null,"gridClass":null,"gap":null},"data":{"pageIndex":0,"items":[],"queue":[],"visibleItemIndex":null},"mounted":"function() {\n  this.processQueue();\n  this.reset();\n  document.addEventListener('scroll', this.onScroll.bind(this));\n}\n","methods":{"add":"function(item) {\n  this.scrollTo(this.visibleItemIndex);\n  this.items.insertAt(this.visibleItemIndex, item, true);\n}\n","scrollTo":"function(index) {\n  const items = this.$el.querySelectorAll('li');\n  const item = items[index];\n  if (!item) return;\n  const rect = item.getBoundingClientRect();\n  const topMargin = 250;\n  const top = rect.top + window.scrollY - topMargin;\n  window.scrollTo({ top, behavior: 'smooth' });\n}\n","onScroll":"function() {\n  this.updateVisibleItemIndex();\n}\n","updateVisibleItemIndex":"function() {\n  const items = this.$el.querySelectorAll('li');\n  const visibleItemIndex = Array.from(items).findIndex(this.isOnScreen.bind(this));\n  this.visibleItemIndex = visibleItemIndex;\n}\n","isOnScreen":"function(item) {\n  const rect = item.getBoundingClientRect();\n  const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);\n  return (rect.top > 0) && (rect.bottom < viewHeight);\n}\n","reset":"async function() {\n  this.pageIndex = 0;\n  this.items = [];\n  await this.loadMore();\n}\n","clear":"function() {\n  this.items = [];\n}\n","loadMore":"function() {\n  return new Promise((resolve, reject) => {\n    if (!this.getMoreItems) return resolve();\n    const pageIndex = this.pageIndex++;\n    const lastItemID = this.items?.last()?._id;\n    this.queue.push(async () => {\n      let newItems = await this.getMoreItems(pageIndex, lastItemID);\n      newItems = newItems.exceptBy(this.items, this.$root.getKey);\n      this.items.push(...newItems);\n      this.updateVisibleItemIndex();\n      resolve();\n    });\n  });\n}\n","processQueue":"async function() {\n  const next = this.queue.shift();\n  if (next) await next();\n  setTimeout(this.processQueue.bind(this), 300);\n}\n"},"style":{"ul":{"display":"grid"},".grid-3 > li":{"margin-bottom":"2em"}},"template":"<ui-infinite-scroll class=\"comp-content-stream\" on_scroll=\"loadMore\" path=\"-30902635.\"><transition-group tag=\"ul\" name=\"slide\" :class=\"gridClass\" :style=\"{ gap: gap }\" path=\"-30902635.0\"><li v-for=\"(item, index) in items\" :key=\"$root.getKey(item)\" path=\"-30902635.0.0\"><component :is=\"itemType.kebabize()\" :item=\"item\" v-bind=\"itemProps\" path=\"-30902635.0.0.0\"></component></li></transition-group></ui-infinite-scroll>"}},{"name":"content.title","path":"\\content\\title.ws.yaml","source":{"dom":{"div#1":{":class":"getCssClass()","div#2":{"class":"content-title site-width","div#3":{"class":"background"},"transition.group":{"name":"list","tag":"ul","li":{":key":"title||Date.now()","ui.image":{"v-if":"imageID",":imageID":"imageID",":url":"url"},"ui.large.title":{":text":"title"}}}},"div#4":{"class":"spacer"}}},"props":{"imageID":null,"title":null,"url":null},"data":{"isStuck":false},"methods":{"onScroll":"function() {\n  const scrollTop = window.scrollY;\n  this.isStuck = scrollTop > 0;\n}\n","getCssClass":"function() {\n  return { stuck: this.isStuck };\n}\n"},"mounted":"function() {\n  window.addEventListener('scroll', this.onScroll);\n}\n","style":{".stuck .title":{"font-size":"6vh","transform":"translateX(-10%)"},".background":{"background":"linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))","position":"absolute","width":"100%","height":"7.5rem","top":0},".content-title":{"position":"fixed","top":"7rem","z-index":10,"border-radius":0,"transition":"0s !important"},".comp-ui-image":{"position":"relative","top":"1rem","max-width":"15% !important","margin":"0 1em","float":"left","box-shadow":"-0.5rem 0.5rem 0.5rem #000000","z-index":20},".comp-ui-image img":{"aspect-ratio":1,"object-fit":"cover","max-height":"7rem"},".comp-ui-large-title":{"padding-top":"0.4em !important","z-index":10},".spacer":{"height":"6rem"}},"name":"content-title","template":"<div class=\"comp-content-title\" :class=\"getCssClass()\" path=\"-1385872221.\"><div class=\"content-title site-width\" path=\"-1385872221.0\"><div class=\"background\" path=\"-1385872221.0.0\"></div><transition-group name=\"list\" tag=\"ul\" path=\"-1385872221.0.1\"><li :key=\"title||Date.now()\" path=\"-1385872221.0.1.0\"><ui-image v-if=\"imageID\" :imageID=\"imageID\" :url=\"url\" path=\"-1385872221.0.1.0.0\"></ui-image><ui-large-title :text=\"title\" path=\"-1385872221.0.1.0.1\"></ui-large-title></li></transition-group></div><div class=\"spacer\" path=\"-1385872221.1\"></div></div>"}},{"name":"e.builder","path":"\\e\\builder.ws.yaml","source":{"dom":{"component":{"v-if":"builder",":is":"$root.getBuilderComponentName(builder)",":editable":true,":builder":"builder",":key":"builder._id","on_cancel":"$emit('cancel')"}},"props":{"builder":null},"name":"e-builder","template":"<component class=\"comp-e-builder\" v-if=\"builder\" :is=\"$root.getBuilderComponentName(builder)\" :editable=\"true\" :builder=\"builder\" :key=\"builder._id\" on_cancel=\"$emit('cancel')\" path=\"926534418.\"></component>"}},{"name":"e.comment.create","path":"\\e\\comment\\create.ws.yaml","source":{"dom":{".flex":{".poster":{"transition":{"name":"slide","e.generator.square":{":show-tooltip":"false",":show-anonymous":"true"}}},"ui.textarea":{"hint":"what's on your mind?",":value":"value","on_input":"$emit('input', $event)"}}},"props":{"value":null},"style":{".flex":{"gap":"1em"},".poster":{"width":"6em"}},"name":"e-comment-create","template":"<div class=\"comp-e-comment-create flex\" path=\"-322969580.\"><div class=\"poster\" path=\"-322969580.0\"><transition name=\"slide\" path=\"-322969580.0.0\"><e-generator-square :show-tooltip=\"false\" :show-anonymous=\"true\" path=\"-322969580.0.0.0\"></e-generator-square></transition></div><ui-textarea hint=\"what's on your mind?\" :value=\"value\" on_input=\"$emit('input', $event)\" path=\"-322969580.1\"></ui-textarea></div>"}},{"name":"e.comment.list","path":"\\e\\comment\\list.ws.yaml","source":{"dom":{"div":{"h3":{"v-text":"comments.length + ' comments'"},"ui.list":{":items":"topComments","v-slot":"slotProps","e.comment":{":item":"slotProps.item"}}}},"props":{"entityID":null},"data":{"comments":[]},"computed":{"topComments":"\nfunction() {\n  return this.comments?.sortBy(c => -c.totalVotesScore).take(30);\n}\n"},"watch":{"entityID":{"handler":"\nasync function() {\n  this.comments = await this.$root.dbp.comments.select.by(this.entityID);\n}\n","immediate":true}},"style":{"ul":{"gap":"3px"}},"name":"e-comment-list","template":"<div class=\"comp-e-comment-list\" path=\"616682934.\"><h3 v-text=\"comments.length + ' comments'\" path=\"616682934.0\"></h3><ui-list :items=\"topComments\" v-slot=\"slotProps\" path=\"616682934.1\"><e-comment :item=\"slotProps.item\" path=\"616682934.1.0\"></e-comment></ui-list></div>"}},{"name":"e.comment","path":"\\e\\comment.ws.yaml","source":{"dom":{".comment":{".comment-text":{"v-text":"item.text"},".vote-score":{"v-text":"item.totalVotesScore"}}},"props":{"item":null},"style":{".comment":{"display":"grid","grid-template":"1fr / 1fr 4em","max-height":"2em","overflow":"hidden","background":"#ffffff30","padding":"0.3em 0.6em"},".comment:hover":{"max-height":"10em"},".vote-score":{"text-align":"right","opacity":0.5},".vote-score:before":{"content":"+"}},"name":"e-comment","template":"<div class=\"comp-e-comment comment\" path=\"1645988310.\"><div class=\"comment-text\" v-text=\"item.text\" path=\"1645988310.0\"></div><div class=\"vote-score\" v-text=\"item.totalVotesScore\" path=\"1645988310.1\"></div></div>"}},{"name":"e.format.image.grid","path":"\\e\\format\\image.grid.ws.yaml","source":{"dom":{"div":{"e.template.editor":{"ref":"TemplateEditor1",":builder":"builder",":temp":"temp",":editable":"editable",":show-property-editor":"false","on_media-created":"onMediaCreated","on_cancel":"$emit('cancel')"}}},"props":{"builder":null,"media":null,"editable":false},"data":{"temp":null},"methods":{"builderSourceToTemplate":"function(source) {\n  if (!source) return null;\n\n  const temp = {\n    id: this.$root.getUniqueClientID(),\n    type: \"grid\",\n    visible: true,\n    aspectRatio: null,\n    gap: 0.02,\n    caption: {\n      visible: true,\n      editable: source.title.editable,\n      text: source.title.text,\n      font: 'Arial',\n      color: 'white',\n      align: {\n        h: \"center\",\n        v: \"top\"\n      },\n      uppercase: false,\n      scale: 0.6\n    },\n    items: []\n  };\n\n  const hasSubgrid = true || (source.subgrid.items > 1);\n\n  const captionItems = source.captions.items || source.captions;\n  const editable = source.captions.editable || false;\n\n  for (let i = 0; i < captionItems.length; i++)\n  {\n    const caption = {\n      visible: true,\n      editable: editable,\n      text: captionItems[i],\n      font: 'Arial',\n      color: 'white',\n      align: {\n        h: \"center\",\n        v: \"bottom\"\n      },\n      uppercase: false,\n    };\n\n    let subgrid = temp;\n\n    if (hasSubgrid)\n    {\n      subgrid = {\n        id: this.$root.getUniqueClientID(),\n        type: \"grid\",\n        visible: true,\n        aspectRatio: \"1/1\",\n        caption,\n        rotation: 0,\n        items: []\n      };\n\n      temp.items.push(subgrid);\n    }\n\n    for (let j = 0; j < source.subgrid.items; j++)\n    {\n      subgrid.items.add({\n        id: this.$root.getUniqueClientID(),\n        type: \"image\",\n        visible: true,\n        imageID: null,\n        removeBackground: false,\n        caption: (hasSubgrid ? null : caption),\n        trans: {\n            pos: {\n                x: 0.5,\n                y: 0.5\n            },\n            scale: 1\n        },\n        shadow: {\n          x: 0,\n          y: 0,\n          blur: 0,\n          color: '#000000',\n          opacity: 1\n        },\n      });\n    }\n  }\n\n  return temp;\n}\n","applyMediaToTemplate":"async function (media, temp) {\n  if (!media) return null;\n  let index = 0;\n  // Walk the tree and set caption text and image IDs\n  // [{text: 'test', {image: {_id: 1}}, ..]\n  const walk = (node) => {\n    const item = media.content.items[index];\n    Object.assign(node, item);\n    index++;\n    for (const child of (node.items||[])) walk(child);\n  };\n  walk(temp);\n}\n","initFromBuilder":"function (builder) {\n  this.temp = this.builderSourceToTemplate(builder?.source);\n}\n","onMediaCreated":"async function (media) {\n  this.initFromBuilder(this.builder);\n}\n"},"watch":{"builder":{"handler":"function(builder) {\n  if (!builder) return;\n  this.initFromBuilder(builder);\n}\n","immediate":true},"media":{"handler":"async function(media) {\n  if (!media) return;\n  const builder = await this.$root.getBuilder(media.builderID);\n  const temp = this.builderSourceToTemplate(builder.source);\n  this.applyMediaToTemplate(media, temp);\n  this.temp = temp;\n}\n","immediate":true}},"name":"e-format-image-grid","template":"<div class=\"comp-e-format-image-grid\" path=\"-603568889.\"><e-template-editor ref=\"TemplateEditor1\" :builder=\"builder\" :temp=\"temp\" :editable=\"editable\" :show-property-editor=\"false\" on_media-created=\"onMediaCreated\" on_cancel=\"$emit('cancel')\" path=\"-603568889.0\"></e-template-editor></div>"}},{"name":"e.format.template","path":"\\e\\format\\template.ws.yaml","source":{"dom":{"div":{"e.template.editor":{"ref":"TemplateEditor1",":temp":"item",":show-property-editor":"false","on_cancel":"$emit('cancel')"}}},"props":{"item":null},"name":"e-format-template","template":"<div class=\"comp-e-format-template\" path=\"105070856.\"><e-template-editor ref=\"TemplateEditor1\" :temp=\"item\" :show-property-editor=\"false\" on_cancel=\"$emit('cancel')\" path=\"105070856.0\"></e-template-editor></div>"}},{"name":"e.generator.list","path":"\\e\\generator\\list.ws.yaml","source":{"dom":{"transition.group":{"name":"list","tag":"ul","li":{"v-for":"generator in generators",":key":"generator._id","e.generator.wide2":{":generator":"generator"}}}},"props":{"generators":null},"data":null,"watch":null,"style":{"li":{"margin-top":"0.5em"}},"name":"e-generator-list","template":"<transition-group class=\"comp-e-generator-list\" name=\"list\" tag=\"ul\" path=\"-398935166.\"><li v-for=\"generator in generators\" :key=\"generator._id\" path=\"-398935166.0\"><e-generator-wide2 :generator=\"generator\" path=\"-398935166.0.0\"></e-generator-wide2></li></transition-group>"}},{"name":"e.generator.search","path":"\\e\\generator\\search.ws.yaml","source":{"dom":{"div":{"ui.text.box":{"type":"search","icon":"🔎","hint":"search memes…","v-model":"query"},"e.generator.list":{":generators":"generators"}}},"props":null,"data":{"query":null,"generators":[]},"mounted":"async function() {\n  this.search(this.query);\n}\n","methods":{"search":"async function(query) {\n  this.generators = await this.$root.dbp.generators.select.search(query);\n}\n"},"watch":{"query":{"handler":"(async function(query) {\n  this.search(query);\n}).debounce(400)\n","immediate":true}},"style":{"li":{"margin-top":"0.5em"}},"name":"e-generator-search","template":"<div class=\"comp-e-generator-search\" path=\"-928430196.\"><ui-text-box type=\"search\" icon=\"🔎\" hint=\"search memes…\" v-model=\"query\" path=\"-928430196.0\"></ui-text-box><e-generator-list :generators=\"generators\" path=\"-928430196.1\"></e-generator-list></div>"}},{"name":"e.generator.select","path":"\\e\\generator\\select.ws.yaml","source":{"dom":{"div":{".grid":{"e.generator.square":{"v-for":"generator in generators",":value":"generator",":key":"generator?.generatorID",":show-anonymous":"true","on_click":"() => onClick(generator)"}}}},"props":{"allowAnonymous":false},"data":{"query":null,"generators":null},"mounted":"async function() {\n  await this.init();\n}\n","methods":{"init":"\nasync function () {\n  this.generators = (await this.$root.dbp.generators.select.popular());\n  if (this.allowAnonymous) {\n    this.generators.unshift(null);\n    this.generators.pop();\n  }\n}\n","onClick":"\nfunction (generator) {\n  this.$emit('input', generator)\n}\n"},"style":{".grid":{"grid-template":"1fr / repeat(5, auto)","gap":"0.5em"},".comp-ui-image":{"filter":"grayscale(1)","opacity":0.5,"cursor":"pointer","transition":"0.3s"},".comp-ui-image:hover":{"filter":"grayscale(0)","opacity":1,"transition":"0s"}},"name":"e-generator-select","template":"<div class=\"comp-e-generator-select\" path=\"-928114976.\"><div class=\"grid\" path=\"-928114976.0\"><e-generator-square v-for=\"generator in generators\" :value=\"generator\" :key=\"generator?.generatorID\" :show-anonymous=\"true\" on_click=\"() =&gt; onClick(generator)\" path=\"-928114976.0.0\"></e-generator-square></div></div>"}},{"name":"e.generator.small","path":"\\e\\generator\\small.ws.yaml","source":{"dom":{"ui.link":{"class":"grayish",":url":"$root.url.generator(item)",".badge":{"ui.image":{":imageID":"item.imageID"}}}},"props":{"item":null},"style":{".title":{"font-size":"120%"},".badge":{"display":"flex","margin-top":"1rem"},".comp-ui-image":{"width":"20% !important","margin-right":"1rem"}},"name":"e-generator-small","template":"<ui-link class=\"comp-e-generator-small grayish\" :url=\"$root.url.generator(item)\" path=\"524478115.\"><div class=\"badge\" path=\"524478115.0\"><ui-image :imageID=\"item.imageID\" path=\"524478115.0.0\"></ui-image></div></ui-link>"}},{"name":"e.generator.square","path":"\\e\\generator\\square.ws.yaml","source":{"dom":{"ui.image#1":{"v-if":"!generator","class":"anonymous","tooltip":"Anonymous",":src":"'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Anonymous_emblem.svg/1200px-Anonymous_emblem.svg.png'","on_click":"$emit('click')"},"ui.link":{"v-else-if":"generator",":url":"$root.url.generator(generator)","ui.image#2":{":tooltip":"showTooltip && generator.displayName",":imageID":"generator.imageID",":key":"generator.generatorID",":square":"true","on_click":"$emit('click', generator)"}}},"props":{"generator":null,"showTooltip":true,"showAnonymous":false},"computed":null,"style":{".anonymous":{"opacity":0.5}},"name":"e-generator-square","template":"<ui-image class=\"comp-e-generator-square anonymous\" v-if=\"!generator\" tooltip=\"Anonymous\" :src=\"'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Anonymous_emblem.svg/1200px-Anonymous_emblem.svg.png'\" on_click=\"$emit('click')\" path=\"-916767999.\"></ui-image><ui-link v-else-if=\"generator\" :url=\"$root.url.generator(generator)\"><ui-image :tooltip=\"showTooltip &amp;&amp; generator.displayName\" :imageID=\"generator.imageID\" :key=\"generator.generatorID\" :square=\"true\" on_click=\"$emit('click', generator)\"></ui-image></ui-link>"}},{"name":"e.generator.teaser","path":"\\e\\generator\\teaser.ws.yaml","source":{"dom":{"ui.link":{":url":"$root.url.generator(item)","ui.card1":{"div#1":{"class":"grid-1-3","div#2":{"ui.image":{":imageID":"item.imageID"}},"div#3":{"content.poem.stanza":{"v-if":"item.desc?.poem","class":"show-on-hover",":item":"$root.getRandomStanza(item.desc?.poem)",":lines":1}}}}}},"props":{"item":null},"style":{".grid-1-3":{"gap":"1vw"},".comp-content-poem-stanza":{"width":"100% !important","font-size":"140%"}},"name":"e-generator-teaser","template":"<ui-link class=\"comp-e-generator-teaser\" :url=\"$root.url.generator(item)\" path=\"-899800012.\"><ui-card1 path=\"-899800012.0\"><div class=\"grid-1-3\" path=\"-899800012.0.0\"><div path=\"-899800012.0.0.0\"><ui-image :imageID=\"item.imageID\" path=\"-899800012.0.0.0.0\"></ui-image></div><div path=\"-899800012.0.0.1\"><content-poem-stanza class=\"show-on-hover\" v-if=\"item.desc?.poem\" :item=\"$root.getRandomStanza(item.desc?.poem)\" :lines=\"1\" path=\"-899800012.0.0.1.0\"></content-poem-stanza></div></div></ui-card1></ui-link>"}},{"name":"e.generator.wide","path":"\\e\\generator\\wide.ws.yaml","source":{"dom":{"ui.link":{":url":"url","ui.card1":{"class":"grayish",".show-on-hover-container":{".grid":{"ui.image":{":imageID":"item.imageID"},"div":{"v-text":"item.displayName"}},"content.poem.stanza":{"v-if":"false && item.desc?.poem","class":"show-on-hover",":item":"$root.getRandomStanza(item.desc?.poem)"}}}}},"props":{"item":null},"style":{".comp-e-generator-wide":{"display":"block","margin-bottom":"1rem"},".comp-ui-image":{"display":"block"},".show-on-hover-container:hover img":{"transform":"scale(1.5)"},".grid":{"grid-template":"1fr / 1fr 3fr","gap":"1rem"},"img":{"aspect-ratio":1,"width":"100%","object-fit":"cover"}},"computed":{"url":"function() {\n  return `/${this.item.urlName}`;\n}\n"},"name":"e-generator-wide","template":"<ui-link class=\"comp-e-generator-wide\" :url=\"url\" path=\"-398607945.\"><ui-card1 class=\"grayish\" path=\"-398607945.0\"><div class=\"show-on-hover-container\" path=\"-398607945.0.0\"><div class=\"grid\" path=\"-398607945.0.0.0\"><ui-image :imageID=\"item.imageID\" path=\"-398607945.0.0.0.0\"></ui-image><div v-text=\"item.displayName\" path=\"-398607945.0.0.0.1\"></div></div><content-poem-stanza class=\"show-on-hover\" v-if=\"false &amp;&amp; item.desc?.poem\" :item=\"$root.getRandomStanza(item.desc?.poem)\" path=\"-398607945.0.0.1\"></content-poem-stanza></div></ui-card1></ui-link>"}},{"name":"e.generator.wide2","path":"\\e\\generator\\wide2.ws.yaml","source":{"dom":{"ui.link":{":url":"$root.url.generator(generator)",".grid":{"class":"grayish","ui.image":{":imageID":"generator.imageID"},"div":{"v-text":"generator.displayName"}}}},"props":{"generator":null},"style":{".grid":{"grid-template":"1fr / 1fr 4fr","gap":"0.5em"}},"name":"e-generator-wide2","template":"<ui-link class=\"comp-e-generator-wide2\" :url=\"$root.url.generator(generator)\" path=\"528055643.\"><div class=\"grayish grid\" path=\"528055643.0\"><ui-image :imageID=\"generator.imageID\" path=\"528055643.0.0\"></ui-image><div v-text=\"generator.displayName\" path=\"528055643.0.1\"></div></div></ui-link>"}},{"name":"e.instance.create","path":"\\e\\instance\\create.ws.yaml","source":{"dom":{"div#1":{"class":"hidden","transition#1":{"name":"slide","e.generator.select":{"v-show":"!generator && showGeneratorSelect","v-model":"generator || tempInstance.generator","on_input":"showGeneratorSelect = false"}},".container":{":class":"layout","div#2":{"transition#2":{"name":"slide","e.instance":{"class":"{ clickable: !generator  }","v-if":"((layout == 'horizontal') || hasText)",":item":"tempInstance",":key":"tempInstance.generator?.generatorID",":show-create-post":"false",":show-footer":"false","on_click":"showGeneratorSelect = !showGeneratorSelect"}}},".inputs":{"input#1":{"v-model":"tempInstance.text0","placeholder":"top text","on_focus":"onFocus"},"input#2":{"v-model":"tempInstance.text1","placeholder":"bottom text","on_focus":"onFocus"},"transition#3":{"name":"slide","ui.button":{"v-if":"showCreateButton && hasText","text":"create",":is-loading":"isCreating","on_click":"create"}}}}}},"props":{"value":null,"generator":null,"layout":null,"showCreateButton":true},"data":{"tempInstance":"getNewTempInstance()","showGeneratorSelect":false,"isCreating":false},"methods":{"create":"async function() {\n  this.isCreating = true;\n  try\n  {\n    const newInstance = await this.$root.dbp.instances.create.one(null, this.tempInstance.generator?._id, null, this.tempInstance.text0, this.tempInstance.text1);\n    this.clear();\n    this.$emit(\"instance-created\", newInstance);\n  }\n  finally\n  {\n    this.isCreating = false;\n  }\n}\n","clear":"function() {\n  this.tempInstance.text0 = null;\n  this.tempInstance.text1 = null;\n}\n","onFocus":"function(e) {\n  if (!this.tempInstance.generator) this.showGeneratorSelect = true;\n}\n","getNewTempInstance":"function() {\n  return { generator: null, imageID: null, text0: null, text1: null };\n}\n"},"computed":{"hasContent":"function() {\n  return (this.hasGenerator && this.hasText) ? true : false;\n}\n","hasGenerator":"function() {\n  return !!this.tempInstance.generator;\n}\n","hasText":"function() {\n  return !!this.tempInstance.text0 || !!this.tempInstance.text1;\n}\n"},"watch":{"value":{"handler":"function(newValue) {\n  this.tempInstance = newValue || this.getNewTempInstance();\n}\n","immediate":true},"generator":{"handler":"function(generator) {\n  this.tempInstance.generator = generator;\n}\n","immediate":true},"tempInstance":{"handler":"function(newTempInstance) {\n  this.$emit(\"input\", newTempInstance);\n}\n","deep":true},"hasContent":"function(newHasContent) {\n  this.$emit(\"has-content\", newHasContent);\n}\n"},"name":"e-instance-create","style":{".container":{"margin-bottom":"2rem"},".horizontal":{"display":"grid !important","grid-template":"1fr / 1fr 3fr","gap":"1rem"},"img":{"margin-bottom":"1rem"},".inputs input":{"text-align":"center","text-transform":"uppercase","padding":"0.3em 0.5em !important","margin-bottom":"0.5rem"},"button":{"display":"block","width":"70%","margin":"0.5rem auto"}},"template":"<div class=\"comp-e-instance-create hidden\" path=\"-903297812.\"><transition name=\"slide\" path=\"-903297812.0\"><e-generator-select v-show=\"!generator &amp;&amp; showGeneratorSelect\" v-model=\"generator || tempInstance.generator\" on_input=\"showGeneratorSelect = false\" path=\"-903297812.0.0\"></e-generator-select></transition><div class=\"container\" :class=\"layout\" path=\"-903297812.1\"><div path=\"-903297812.1.0\"><transition name=\"slide\" path=\"-903297812.1.0.0\"><e-instance class=\"{ clickable: !generator }\" v-if=\"((layout == 'horizontal') || hasText)\" :item=\"tempInstance\" :key=\"tempInstance.generator?.generatorID\" :show-create-post=\"false\" :show-footer=\"false\" on_click=\"showGeneratorSelect = !showGeneratorSelect\" path=\"-903297812.1.0.0.0\"></e-instance></transition></div><div class=\"inputs\" path=\"-903297812.1.1\"><input v-model=\"tempInstance.text0\" placeholder=\"top text\" on_focus=\"onFocus\" path=\"-903297812.1.1.0\"/><input v-model=\"tempInstance.text1\" placeholder=\"bottom text\" on_focus=\"onFocus\" path=\"-903297812.1.1.1\"/><transition name=\"slide\" path=\"-903297812.1.1.2\"><ui-button v-if=\"showCreateButton &amp;&amp; hasText\" text=\"create\" :is-loading=\"isCreating\" on_click=\"create\" path=\"-903297812.1.1.2.0\"></ui-button></transition></div></div></div>"}},{"name":"e.instance","path":"\\e\\instance.ws.yaml","source":{"dom":{"div#1":{"on_click":"$emit('click')","v-if":"instance","ui.link":{":url":"$root.url.instance(instance)","class":"instance","div#2":{"ui.image":{"ref":"image1",":imageID":"instance.imageID || instance.generator?.imageID","on_change":"updateImageSize"},".texts":{".text":{"v-for":"(text, index) in [instance.text0, instance.text1]","v-text":"text",":style":"{ fontSize: fontSizes[index] }"}},"div#3":{"class":"spacer"}}},".footer":{"v-if":"showFooter && !showFullFooter","e.generator.wide2#1":{":generator":"$root.instanceToGenerator(instance)"}},".footer2":{"v-if":"showFullFooter","e.generator.wide2#2":{":generator":"$root.instanceToGenerator(instance)"},"ui.share":{":item":"instance"}},"e.post.create":{"v-if":"showCreatePost",":generator":"$root.instanceToGenerator(instance)",":entityID":"instance._id"}}},"name":"e-instance","props":{"item":null,"showFooter":true,"showFullFooter":false,"showCreatePost":false,"instanceID":null},"data":{"width":null,"instance":null},"methods":{"getFontSize":"function (s) {\n  if (!s) return 0;\n  if (!this.width) return 0;\n  const size = Math.min(3, Math.max(14, (36 - (s.length / 6))) / 50 *  this.width / 150);\n  return `${size*2.5}vh`;\n}\n","updateImageSize":"function () {\n  this.width = this.$refs.image1.width;\n}\n"},"computed":{"showGenerator":"function () {\n  if (!this.instance) return false;\n  if (this.instance.urlName == this.$root.params.urlName) return false;\n  return true;\n}\n","fontSizes":"function () {\n  if (!this.instance) return [0, 0];\n  const sizes = [this.getFontSize(this.instance.text0), this.getFontSize(this.instance.text1)];\n  return sizes;\n}\n"},"watch":{"item":{"handler":"function (item) {\n  this.instance = item;\n}\n","immediate":true},"instanceID":{"handler":"async function (instanceID) {\n  if (this.item) return;\n  this.instance = !instanceID ? null : await this.$root.dbp.instances.select.one(instanceID);\n}\n","immediate":true}},"style":{".instance":{"display":"block","box-shadow":"0px 10px 10px #000000a0"},".footer":{"margin-top":"1em"},".footer2":{"margin-top":"1em","display":"grid","grid-template-columns":"4fr 2fr"},".footer2 .comp-e-generator-wide2":{"font-size":"140%"},".admin-footer":{"display":"flex","justify-content":"center","margin-top":"1rem"},".comp-e-post-create":{"margin-top":"1rem !important"},".comp-ui-image":{"width":"100%"},".comp-ui-image, img":{"aspect-ratio":1,"object-fit":"cover"},".instance .comp-ui-image, .texts, .text":{"position":"absolute"},".spacer, .texts":{"width":"100%","aspect-ratio":1},".text":{"text-align":"center","display":"block","width":"100%","top":0,"overflow":"hidden","color":"#fff","line-height":"1.2em","font-family":"Impact,Oswald","text-transform":"uppercase","text-shadow":"-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000","-webkit-font-smoothing":"antialiased","box-sizing":"border-box","padding":"0.3em","filter":"drop-shadow(-2px 4px 2px #00000060)","transition":"0s"},".text:nth-child(2)":{"top":"auto","bottom":0}},"template":"<div class=\"comp-e-instance\" on_click=\"$emit('click')\" v-if=\"instance\" path=\"643573758.\"><ui-link class=\"instance\" :url=\"$root.url.instance(instance)\" path=\"643573758.0\"><div path=\"643573758.0.0\"><ui-image ref=\"image1\" :imageID=\"instance.imageID || instance.generator?.imageID\" on_change=\"updateImageSize\" path=\"643573758.0.0.0\"></ui-image><div class=\"texts\" path=\"643573758.0.0.1\"><div class=\"text\" v-for=\"(text, index) in [instance.text0, instance.text1]\" v-text=\"text\" :style=\"{ fontSize: fontSizes[index] }\" path=\"643573758.0.0.1.0\"></div></div><div class=\"spacer\" path=\"643573758.0.0.2\"></div></div></ui-link><div class=\"footer\" v-if=\"showFooter &amp;&amp; !showFullFooter\" path=\"643573758.1\"><e-generator-wide2 :generator=\"$root.instanceToGenerator(instance)\" path=\"643573758.1.0\"></e-generator-wide2></div><div class=\"footer2\" v-if=\"showFullFooter\" path=\"643573758.2\"><e-generator-wide2 :generator=\"$root.instanceToGenerator(instance)\" path=\"643573758.2.0\"></e-generator-wide2><ui-share :item=\"instance\" path=\"643573758.2.1\"></ui-share></div><e-post-create v-if=\"showCreatePost\" :generator=\"$root.instanceToGenerator(instance)\" :entityID=\"instance._id\" path=\"643573758.3\"></e-post-create></div>"}},{"name":"e.media","path":"\\e\\media.ws.yaml","source":{"dom":{"div":{"component":{":is":"formatComponentName",":media":"media"},".flex.justify-around":{"ui.share":{":item":"media"},"ui.button":{"v-if":"$root.isAdmin",":text":"'❌ delete'",":click":"() => $root.dbp.medias.delete.one(media._id)"}}}},"props":{"item":null,"mediaID":null},"data":{"media":null,"temp":null,"formatComponentName":null},"methods":{"getFormatComponentName":"async function (media) {\n  if (!media) return;\n  const builder = await this.$root.getBuilder(this.media.builderID);\n  return `e-format-${builder.format.replace(/\\./g, '-')}`;\n}\n"},"computed":null,"watch":{"media":{"handler":"async function (media) {\n  this.formatComponentName = await this.getFormatComponentName(media);\n}\n","immediate":true},"item":{"handler":"function (item) {\n  this.media = item;\n}\n","immediate":true},"mediaID":{"handler":"async function (mediaID) {\n  if (this.item) return;\n  this.media = !mediaID ? null : await this.$root.dbp.medias.select.one(mediaID);\n}\n","immediate":true}},"name":"e-media","template":"<div class=\"comp-e-media\" path=\"864271643.\"><component :is=\"formatComponentName\" :media=\"media\" path=\"864271643.0\"></component><div class=\"flex justify-around\" path=\"864271643.1\"><ui-share :item=\"media\" path=\"864271643.1.0\"></ui-share><ui-button v-if=\"$root.isAdmin\" :text=\"'❌ delete'\" :click=\"() =&gt; $root.dbp.medias.delete.one(media._id)\" path=\"864271643.1.1\"></ui-button></div></div>"}},{"name":"e.post.create","path":"\\e\\post\\create.ws.yaml","source":{"dom":{".container":{"div#1":{"transition#1":{"name":"slide","e.instance.create":{"v-if":"showInstanceCreate","ref":"createInstance1","layout":"horizontal",":show-create-button":"false","v-model":"tempInstance",":generator":"generator","on_has-content":"hasInstanceContent = $event"}}},"transition#2":{"name":"slide","div#2":{"v-show":"showLarpGeneratorSelect","h3":{"v-text":"'Larping as'"},"e.generator.select":{"v-model":"larpGenerator",":allow-anonymous":"true","on_input":"showLarpGeneratorSelect = false;"}}},"transition#3":{"name":"slide","div#3":{"e.comment.create":{"v-if":"showCommentCreate","v-model":"text"}}},"transition#4":{"name":"slide","ui.button":{"v-if":"canPost","text":"post",":click":"post"}}}},"props":{"threadID":null,"generator":null,"entityID":null},"data":{"larpGenerator":null,"tempInstance":null,"text":null,"hasInstanceContent":false,"showLarpGeneratorSelect":false,"isLoading":false},"mounted":"async function() {\n}\n","methods":{"post":"async function() {\n  const { generator, text0, text1 } = (this.tempInstance || {});\n  const instance = !generator ? null : { generatorID: generator.generatorID, text0, text1 };\n  const post = await this.$root.dbp.posts.create.one(this.threadID, this.text, { type: \"instance\", ...instance });\n  this.clear();\n  // New thread\n  if (!this.threadID)\n  {\n    this.$root.navigateTo(post);\n    return;\n  }\n  this.$emit('created', post);\n}\n","clear":"function() {\n  this.text = null;\n  this.tempInstance = null;\n}\n"},"watch":{"tempInstance":"function() {\n}\n","threadID":"{\n  handler: function() {\n    //this.showInstanceCreate = !this.threadID;\n  },\n  immediate: true\n}\n"},"computed":{"showInstanceCreate":"function() {\n  return !this.hasCommentContent;\n}\n","showCommentCreate":"function() {\n  return !this.hasInstanceContent;\n}\n","hasCommentContent":"function() {\n  return !!this.text;\n}\n","canPost":"function() {\n  if (this.hasInstanceContent) return true;\n  if (this.text) return true;\n  return false;\n}\n","larpGeneratorTooltip":"function() {\n  return `Larping as ${this.larpGenerator?.displayName || 'Anonymous'}`;\n}\n"},"style":{".container":{"display":"flex","flex-direction":"column","align-items":"center","max-width":"25em","margin":"auto","gap":"1em"},"h3":{"text-align":"center"}},"config":{"track":{"state":true}},"name":"e-post-create","template":"<div class=\"comp-e-post-create container\" path=\"1762525697.\"><div path=\"1762525697.0\"><transition name=\"slide\" path=\"1762525697.0.0\"><e-instance-create v-if=\"showInstanceCreate\" ref=\"createInstance1\" layout=\"horizontal\" :show-create-button=\"false\" v-model=\"tempInstance\" :generator=\"generator\" on_has-content=\"hasInstanceContent = $event\" path=\"1762525697.0.0.0\"></e-instance-create></transition></div><transition name=\"slide\" path=\"1762525697.1\"><div v-show=\"showLarpGeneratorSelect\" path=\"1762525697.1.0\"><h3 v-text=\"'Larping as'\" path=\"1762525697.1.0.0\"></h3><e-generator-select v-model=\"larpGenerator\" :allow-anonymous=\"true\" on_input=\"showLarpGeneratorSelect = false;\" path=\"1762525697.1.0.1\"></e-generator-select></div></transition><transition name=\"slide\" path=\"1762525697.2\"><div path=\"1762525697.2.0\"><e-comment-create v-if=\"showCommentCreate\" v-model=\"text\" path=\"1762525697.2.0.0\"></e-comment-create></div></transition><transition name=\"slide\" path=\"1762525697.3\"><ui-button v-if=\"canPost\" text=\"post\" :click=\"post\" path=\"1762525697.3.0\"></ui-button></transition></div>"}},{"name":"e.post.menu","path":"\\e\\post\\menu.ws.yaml","source":{"dom":{"div":{".center":{"ui.time":{":value":"item.created"}},".post-menu":{"ui.button":{"text":"❌",":click":"onDelete"}}}},"props":{"item":null},"methods":{"onDelete":"function () {\n  this.$root.dbp.posts.delete.one(this.item._id);\n  this.$emit(\"refresh-thread\");\n}\n"},"style":{".comp-e-post-menu":{"margin-bottom":"0.5rem"},".center, .post-menu":{"display":"flex","justify-content":"center"}},"name":"e-post-menu","template":"<div class=\"comp-e-post-menu\" path=\"404353956.\"><div class=\"center\" path=\"404353956.0\"><ui-time :value=\"item.created\" path=\"404353956.0.0\"></ui-time></div><div class=\"post-menu\" path=\"404353956.1\"><ui-button text=\"❌\" :click=\"onDelete\" path=\"404353956.1.0\"></ui-button></div></div>"}},{"name":"e.post","path":"\\e\\post.ws.yaml","source":{"dom":{"div#1":{":class":"{ post: true, enlarged }",".post-media":{"v-if":"item.instance","e.instance":{":item":"item.instance"},"on_click":"onInstanceClick"},".post-text":{"e.generator.square":{"class":"larping-generator",":value":"item.larpGenerator"},"div#2":{"v-html":"$root.textToHtml(item.text)"}},"div#3":{"class":"clear-both"},"e.post.menu":{":item":"item","on_refresh-thread":"$emit('refresh-thread')"}}},"props":{"item":null},"data":{"enlarged":false},"methods":{"onInstanceClick":"function () {\n  this.enlarged = !this.enlarged;\n}\n"},"style":{".post":{"background":"#ffffff20","border":"2px solid gray","box-shadow":"inset -6px 6px 2px #000","z-index":10},".post .post-menu":{"max-height":0,"overflow":"hidden","opacity":0,"transform":"translateY(-1em)"},".post:hover .post-menu":{"max-height":"5em","transition":"0.5s linear","opacity":1,"transform":"translateY(0)"},".post .instance:hover":{"border":"1px solid #000000a0","transition":"0s !important"},".instance":null,".larping-generator":{"width":"4rem !important","float":"left","margin-right":"1em","margin-bottom":"1em"},".post-media":{"float":"left","width":"35%","left":"-1rem","top":"-1rem","z-index":10},".post-media a":{"cursor":"pointer !important"},".comp-e-instance .footer":{"display":"none"},".post-text":{"padding":"1rem","opacity":0.9},".enlarged .post-media":{"width":"100%"},".enlarged .post-text":null,".anonymous":{"display":"none"},".greentext":{"color":"#35c735"}},"name":"e-post","template":"<div class=\"comp-e-post\" :class=\"{ post: true, enlarged }\" path=\"-1357494135.\"><div class=\"post-media\" v-if=\"item.instance\" on_click=\"onInstanceClick\" path=\"-1357494135.0\"><e-instance :item=\"item.instance\" path=\"-1357494135.0.0\"></e-instance></div><div class=\"post-text\" path=\"-1357494135.1\"><e-generator-square class=\"larping-generator\" :value=\"item.larpGenerator\" path=\"-1357494135.1.0\"></e-generator-square><div v-html=\"$root.textToHtml(item.text)\" path=\"-1357494135.1.1\"></div></div><div class=\"clear-both\" path=\"-1357494135.2\"></div><e-post-menu :item=\"item\" on_refresh-thread=\"$emit('refresh-thread')\" path=\"-1357494135.3\"></e-post-menu></div>"}},{"name":"e.teaser","path":"\\e\\teaser.ws.yaml","source":{"dom":{"ui.link":{":url":"url","ui.image":{":imageID":"imageID","aspect-ratio":"2 / 1"},"h3":{"v-text":"title"}}},"props":{"imageID":null,"title":null,"url":null},"name":"e-teaser","template":"<ui-link class=\"comp-e-teaser\" :url=\"url\" path=\"1222941689.\"><ui-image :imageID=\"imageID\" aspect-ratio=\"2 / 1\" path=\"1222941689.0\"></ui-image><h3 v-text=\"title\" path=\"1222941689.1\"></h3></ui-link>"}},{"name":"e.template.caption.editor","path":"\\e\\template\\caption\\editor.ws.yaml","source":{"dom":{"div":{"ui.textarea":{":hint":"item.hint","v-model":"item.text"},"ui.select#1":{":options":"['Oswald', 'Special Elite']","type":"dropdown","input-type":"value","v-model":"item.font"},"ui.select#2":{":options":"['white', 'black']","type":"dropdown","input-type":"value","v-model":"item.color"},"ui.select#3":{":options":"['left', 'center', 'right']","type":"dropdown","input-type":"value","v-model":"item.align.h"},"ui.select#4":{":options":"['top', 'center', 'bottom']","type":"dropdown","input-type":"value","v-model":"item.align.v"}}},"props":{"item":null,"hint":null},"name":"e-template-caption-editor","template":"<div class=\"comp-e-template-caption-editor\" path=\"-1537870880.\"><ui-textarea :hint=\"item.hint\" v-model=\"item.text\" path=\"-1537870880.0\"></ui-textarea><ui-select :options=\"['Oswald', 'Special Elite']\" type=\"dropdown\" input-type=\"value\" v-model=\"item.font\" path=\"-1537870880.1\"></ui-select><ui-select :options=\"['white', 'black']\" type=\"dropdown\" input-type=\"value\" v-model=\"item.color\" path=\"-1537870880.2\"></ui-select><ui-select :options=\"['left', 'center', 'right']\" type=\"dropdown\" input-type=\"value\" v-model=\"item.align.h\" path=\"-1537870880.3\"></ui-select><ui-select :options=\"['top', 'center', 'bottom']\" type=\"dropdown\" input-type=\"value\" v-model=\"item.align.v\" path=\"-1537870880.4\"></ui-select></div>"}},{"name":"e.template.caption.item","path":"\\e\\template\\caption\\item.ws.yaml","source":{"dom":{"div#1":{"v-if":"item","div#2":{":class":"{ sizeRef: true, clickable: editable }","ref":"sizeRef1",".text":{":class":"getCssClass(item)",":style":"itemStyle","div#3":{"v-html":"getItemText(item)","title":"✏️ edit","on_click":"onClickText"},"transition":{"name":"slide","ui.text.box":{"v-if":"showEditor",":class":"getCssClass(item)","v-model":"item.text"}}}}}},"name":"e-template-caption-item","props":{"item":null,"editable":false},"data":{"width":null,"showEditor":false},"mounted":"function () {\n  window.addEventListener(`resize`, this.recalc.bind(this));\n  // Detect if the image element changes its size\n  let resizeObserver = new ResizeObserver(this.recalc.bind(this));\n  resizeObserver.observe(this.$refs.sizeRef1);\n}\n","methods":{"getItemText":"function (item) {\n  let text = this.$root.textToHtml(item.text);\n  if (this.editable && item.editable) text = `✏️ ${text}`;\n  return text;\n}\n","onClickText":"function () {\n  if (this.editable && this.item.editable)\n  {\n    this.showEditor = !this.showEditor;\n    return;\n  }\n  this.$emit(\"click\");\n}\n","onLoad":"function () {\n  this.recalc();\n  [1,2,3].forEach(i => setTimeout(this.recalc.bind(this), i * 100))\n}\n","recalc":"function () {\n  if (!this.$refs.sizeRef1) return;\n  let rect = this.$refs.sizeRef1.getBoundingClientRect();\n  this.width = Math.round(rect.width);\n  this.height = Math.round(rect.height);\n  this.$emit(\"change\");\n}\n","getCssClass":"function(item) {\n  const cls = {};\n  cls[`h-${item.align.h}`] = true;\n  cls[`v-${item.align.v}`] = true;\n  return cls;\n}\n","getStyle":"function(item) {\n  const style = {};\n  style.fontSize = this.getFontSize(item.text);\n  style.fontFamily = item.font;\n  if (item.uppercase) style.textTransform = \"uppercase\";\n  style.color = item.color;\n  const isDark = (item.color == \"black\");\n  const outlineColor = (isDark ? \"white\" : \"black\");\n  let outlineWidth = Math.max(1, Math.round(this.width/400));\n  outlineWidth = `${(isDark ? outlineWidth : outlineWidth*2)}px`;\n  style.textShadow = `-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000`\n    .replace(/1px/g, outlineWidth)\n    .replace(/#000/g, outlineColor);\n  return style;\n}\n","getFontSize":"function (s) {\n  if (!s) return 0;\n  if (!this.width) return 0;\n  let size = Math.min(3, Math.max(14, (36 - (s.length / 6))) / 50 *  this.width / 150);\n  size = size * 2.5;\n  if (this.item.scale) size *= this.item.scale;\n  return `${size}vh`;\n}\n"},"computed":{"itemStyle":"function () {\n  return this.getStyle(this.item);\n}\n"},"style":{"input[type=\"text\"]":{"font-size":"100%"},".size-ref, .text":{"width":"100%","object-fit":"cover","position":"relative","user-select":"none"},".size-ref":{"height":"fit-content"},".h-left":{"text-align":"left"},".h-center":{"text-align":"center"},".h-center input":{"text-align":"center"},".h-right":{"text-align":"right"},".v-top":{"top":0},".v-center":{"top":"50%","transform":"translateY(-50%)"},".v-bottom":{"bottom":0},".text":{"display":"block","overflow":"hidden","color":"#fff","line-height":"1.2em","font-family":"Impact,Oswald","-webkit-font-smoothing":"antialiased","box-sizing":"border-box","padding":"0.3em","filter":"drop-shadow(-2px 4px 2px #00000080)","transition":"0s"}},"template":"<div class=\"comp-e-template-caption-item\" v-if=\"item\" path=\"128142918.\"><div :class=\"{ sizeRef: true, clickable: editable }\" ref=\"sizeRef1\" path=\"128142918.0\"><div class=\"text\" :class=\"getCssClass(item)\" :style=\"itemStyle\" path=\"128142918.0.0\"><div v-html=\"getItemText(item)\" title=\"✏️ edit\" on_click=\"onClickText\" path=\"128142918.0.0.0\"></div><transition name=\"slide\" path=\"128142918.0.0.1\"><ui-text-box v-if=\"showEditor\" :class=\"getCssClass(item)\" v-model=\"item.text\" path=\"128142918.0.0.1.0\"></ui-text-box></transition></div></div></div>"}},{"name":"e.template.editor","path":"\\e\\template\\editor.ws.yaml","source":{"dom":{"div#1":{"v-if":"temp",":class":"getCssClass()",".div1":{":style":"getStyle()","div#2":{"v-if":"showTree","ui.tree":{":root":"temp",":initial-expanded":2,"item-type":"e.template.item.icon",":get-item":"(node) => node",":get-children":"(node) => node.items","on_node-select":"onNodeSelect"}},".div2":{"ui.image.select":{"class":"hidden","ref":"imageSelect1","v-if":"(selectedItem?.type=='image')","v-model":"selectedItem.imageID"},"e.template.grid.item":{":item":"temp",":editable":"editable"},".flex.justify-around.mt-l2":{"v-if":"editable","ui.button#1":{":text":"'✖️ cancel'",":click":"() => $emit('cancel')"},"ui.button#2":{":text":"'✔️ Create'",":click":"createMedia"}},"div#3":{"v-if":"selectedItem && showPropertyEditor","ui.section#1":{":title":"selectedItem.type","v-model":"showFilters",":opposite":true,"transition":{"name":"slide2","component":{"ref":"selectedItemEditor1",":is":"selectedItemEditorType",":item":"selectedItem","on_toggle-disabled":"toggleDisabled($event)",":key":"selectedItemIndex"}}},"ui.section#2":{"v-if":"canApplyEffects(selectedItem)","title":"effects","v-model":"showFilters","e.template.item.filters":{":imageID":"selectedItem.imageID","v-model":"selectedItem.filters","on_input":"() => onItemChange(selectedItem)"}}}},".help":{"v-if":"editable",".message#1":{"ui.video#1":{"src":"/video/interface/image/drop.webm"},"div#4":{"v-text":"'Drop images on boxes to upload.'"}},".message#2":{"ui.video#2":{"src":"/video/interface/image/move.webm"},"div#5":{"v-text":"'Drag images inside boxes to move.'"}},".message#3":{"ui.video#3":{"src":"/video/interface/image/scale.webm"},"div#6":{"v-text":"'Ctrl-drag images inside boxes to resize.'"}},".message#4":{"v-if":"hasMoreThanOneImagePerGrid","class":"large-video","ui.video#4":{"src":"/video/interface/image/visible.webm"},"div#7":{"v-text":"'Toggle image visibility using the tree on the left.'"}},".message#5":{"v-if":"hasMoreThanOneImagePerGrid","class":"large-video","ui.video#5":{"src":"/video/interface/image/rotate.webm"},"div#8":{"v-text":"'If less than 4 images are visible, click the title (Body, Hair..) to change the layout.'"}}}}}},"props":{"temp":null,"builder":null,"editable":false,"showPropertyEditor":true},"data":{"selectedItemIndex":0,"disabled":0,"showFilters":false},"mounted":"async function() {\n  await this.init();\n}\n","methods":{"createMedia":"async function() {\n  try\n  {\n    let media = this.getMedia(this.temp);\n    // Check that [title] is not empty\n    if (media.content.items.some(item => item.caption?.text == '[title]'))\n    {\n      alertify.error('Click \"[title]\" to edit it.');\n      return;\n    }\n    // Check if all images are empty\n    if (media.content.items.every(item => !item.imageID))\n    {\n      alertify.error('Drop image files from your computer onto boxes to upload.');\n      return;\n    }\n    const _uid = this.$root.getRandomUniqueID();\n    media._uid = _uid;\n    media = await this.$root.dbp.medias.create.one(media);\n    // When POSTing from localhost to db.mg.net, we don't get the response,\n    // so we're making another request\n    if (!media) media = await this.$root.dbp.medias.select.one(_uid);\n    this.$emit('media-created', media);\n    await this.$root.navigateTo(media);\n  }\n  finally\n  {\n  }\n}\n","getMedia":"function(temp) {\n  // Walk the tree and collect caption text and image IDs into an array\n  // [{text: 'test', {image: {_id: 1}}, ..]\n  let items = [];\n  const walk = (node) => {\n    const item = {};\n    Object.assign(item, node);\n    items.push(item);\n    if (node.items) node.items.forEach(walk);\n  };\n  walk(temp);\n\n  items = JSON.parse(JSON.stringify(items));\n\n  const media = {\n    created: new Date(),\n    builderID: this.builder._id,\n    content: { items }\n  }\n\n  return media;\n}\n","init":"async function() {\n}\n","canApplyEffects":"function(item) {\n  if (!item) return false;\n  return item.type === 'image';\n}\n","getCssClass":"function() {\n  return {\n    disabled: (this.disabled > 0)\n  };\n}\n","getStyle":"function() {\n  const columns = this.showTree ? [1, 4, 1.5] : this.editable ? [5, 1.5] : [1];\n  return {\n    gridTemplate: `1fr / ${columns.map(c => `${c}fr`).join(' ')}`\n  };\n}\n","selectItem":"function(index) {\n  this.selectedItemIndex = index;\n}\n","onNodeSelect":"function(node) {\n  // selectedItem is computed, only the root node\n  // When editing specific nodes with the property editor, this would be enabled\n  //this.selectedItem = node;\n}\n","onItemChange":"function(item) {\n}\n","getTabClass":"function(index) {\n  return {\n    clickable: true,\n    'selected': index === this.selectedItemIndex\n  };\n}\n","toggleDisabled":"function(disabled) {\n  if (disabled) this.disabled++;\n  else this.disabled--;\n}\n","eval":"function(s) {\n  return eval(s);\n}\n"},"computed":{"selectedItem":"function() {\n  return this.temp;\n  //return this.temp.items[this.selectedItemIndex];\n}\n","selectedItemEditorType":"function() {\n  if (!this.selectedItem) return;\n  return `e-template-${this.selectedItem.type}-editor`;\n}\n","imageItems":"function() {\n  return this.temp.items.filter(item => item.type === 'image');\n}\n","showTree":"function() {\n  return this.editable && this.hasMoreThanOneImagePerGrid;\n}\n","hasMoreThanOneImagePerGrid":"function() {\n  if (!this.temp) return false;\n\n  const checkNode = (node) => {\n    if (node.type != 'grid') return false;\n    const imageItems = node.items.filter(item => item.type === 'image');\n    if (imageItems.length > 1) return true;\n    for (const child of node.items)\n    {\n      if (checkNode(child)) return true;\n    }\n    return false;\n  }\n\n  return checkNode(this.temp);\n}\n"},"watch":{"builder":"async function(builder) {\n  if (!builder) this.temp = null;\n}\n"},"name":"e-template-editor","style":{".div1":{"display":"grid","margin-bottom":"5rem","gap":"1em"},".div1 > div":{"overflow":"hidden"},".div2":{"display":"flex","flex-direction":"column","gap":"1em"},".tabs":{"display":"flex","flex-direction":"column-reverse","align-items":"end","justify-content":"start"},".tabs input[type=\"checkbox\"]":{"position":"relative","top":"0.1em","transform":"scale(0.7)"},".tabs li":{"transition":"0.3s;"},".tabs li.selected":{"transform":"scale(1.2);"},".layout-layers":{"aspect-ratio":"1 / 1","overflow":"hidden"},".layout-layers .layer":{"position":"absolute","top":0,"left":0,"width":"100%","height":"100%","pointer-events":"none"},".layout-layers .layer .comp-ui-image":null,".layout-vertical":{"border":"2px solid #ffffff60","display":"flex","flex-direction":"column-reverse"},".layout-vertical .item":{"width":"100%"},".layout-vertical, .layout-vertical .item":{"overflow":"hidden"},".item":{"overflow":"hidden"},".item.selected, .item.selected:hover":{"background":"none !important"},".help":{"margin-top":"4em"},".help .message":{"display":"grid","grid-template":"1fr / 1fr 2fr","gap":"1em","text-align":"left"},".help video":{"filter":"grayscale(1)"},".message.large-video":{"grid-template":"1fr / 1fr"}},"template":"<div class=\"comp-e-template-editor\" v-if=\"temp\" :class=\"getCssClass()\" path=\"-650358312.\"><div class=\"div1\" :style=\"getStyle()\" path=\"-650358312.0\"><div v-if=\"showTree\" path=\"-650358312.0.0\"><ui-tree :root=\"temp\" :initial-expanded=\"2\" item-type=\"e.template.item.icon\" :get-item=\"(node) =&gt; node\" :get-children=\"(node) =&gt; node.items\" on_node-select=\"onNodeSelect\" path=\"-650358312.0.0.0\"></ui-tree></div><div class=\"div2\" path=\"-650358312.0.1\"><ui-image-select class=\"hidden\" ref=\"imageSelect1\" v-if=\"(selectedItem?.type=='image')\" v-model=\"selectedItem.imageID\" path=\"-650358312.0.1.0\"></ui-image-select><e-template-grid-item :item=\"temp\" :editable=\"editable\" path=\"-650358312.0.1.1\"></e-template-grid-item><div class=\"flex justify-around mt-l2\" v-if=\"editable\" path=\"-650358312.0.1.2\"><ui-button :text=\"'✖️ cancel'\" :click=\"() =&gt; $emit('cancel')\" path=\"-650358312.0.1.2.0\"></ui-button><ui-button :text=\"'✔️ Create'\" :click=\"createMedia\" path=\"-650358312.0.1.2.1\"></ui-button></div><div v-if=\"selectedItem &amp;&amp; showPropertyEditor\" path=\"-650358312.0.1.3\"><ui-section :title=\"selectedItem.type\" v-model=\"showFilters\" :opposite=\"true\" path=\"-650358312.0.1.3.0\"><transition name=\"slide2\" path=\"-650358312.0.1.3.0.0\"><component ref=\"selectedItemEditor1\" :is=\"selectedItemEditorType\" :item=\"selectedItem\" on_toggle-disabled=\"toggleDisabled($event)\" :key=\"selectedItemIndex\" path=\"-650358312.0.1.3.0.0.0\"></component></transition></ui-section><ui-section v-if=\"canApplyEffects(selectedItem)\" title=\"effects\" v-model=\"showFilters\" path=\"-650358312.0.1.3.1\"><e-template-item-filters :imageID=\"selectedItem.imageID\" v-model=\"selectedItem.filters\" on_input=\"() =&gt; onItemChange(selectedItem)\" path=\"-650358312.0.1.3.1.0\"></e-template-item-filters></ui-section></div></div><div class=\"help\" v-if=\"editable\" path=\"-650358312.0.2\"><div class=\"message\" path=\"-650358312.0.2.0\"><ui-video src=\"/video/interface/image/drop.webm\" path=\"-650358312.0.2.0.0\"></ui-video><div v-text=\"'Drop images on boxes to upload.'\" path=\"-650358312.0.2.0.1\"></div></div><div class=\"message\" path=\"-650358312.0.2.1\"><ui-video src=\"/video/interface/image/move.webm\" path=\"-650358312.0.2.1.0\"></ui-video><div v-text=\"'Drag images inside boxes to move.'\" path=\"-650358312.0.2.1.1\"></div></div><div class=\"message\" path=\"-650358312.0.2.2\"><ui-video src=\"/video/interface/image/scale.webm\" path=\"-650358312.0.2.2.0\"></ui-video><div v-text=\"'Ctrl-drag images inside boxes to resize.'\" path=\"-650358312.0.2.2.1\"></div></div><div class=\"large-video message\" v-if=\"hasMoreThanOneImagePerGrid\" path=\"-650358312.0.2.3\"><ui-video src=\"/video/interface/image/visible.webm\" path=\"-650358312.0.2.3.0\"></ui-video><div v-text=\"'Toggle image visibility using the tree on the left.'\" path=\"-650358312.0.2.3.1\"></div></div><div class=\"large-video message\" v-if=\"hasMoreThanOneImagePerGrid\" path=\"-650358312.0.2.4\"><ui-video src=\"/video/interface/image/rotate.webm\" path=\"-650358312.0.2.4.0\"></ui-video><div v-text=\"'If less than 4 images are visible, click the title (Body, Hair..) to change the layout.'\" path=\"-650358312.0.2.4.1\"></div></div></div></div></div>"}},{"name":"e.template.grid.editor","path":"\\e\\template\\grid\\editor.ws.yaml","source":{"dom":{"div#1":{"v-if":"false && item","div#2":{"v-text":"item.items.length + ' items'"},"ui.select#1":{"v-if":false,":options":"['layers', 'vertical', 'grid']","input-type":"value","type":"dropdown","v-model":"item.layout"},"ui.select#2":{"v-if":false,":options":"['2/3', '1/1', '3/2', '4/3', '5/4', '16/9', '16/10', '21/9']","input-type":"value","type":"dropdown","v-model":"item.aspectRatio"},"ui.range":{"v-if":false,"text":"gap","v-model":"item.gap","min":0,"max":0.1,"step":0.01}}},"props":{"item":null},"name":"e-template-grid-editor","template":"<div class=\"comp-e-template-grid-editor\" v-if=\"false &amp;&amp; item\" path=\"-1104249974.\"><div v-text=\"item.items.length + ' items'\" path=\"-1104249974.0\"></div><ui-select :options=\"['layers', 'vertical', 'grid']\" input-type=\"value\" type=\"dropdown\" v-model=\"item.layout\" path=\"-1104249974.1\"></ui-select><ui-select :options=\"['2/3', '1/1', '3/2', '4/3', '5/4', '16/9', '16/10', '21/9']\" input-type=\"value\" type=\"dropdown\" v-model=\"item.aspectRatio\" path=\"-1104249974.2\"></ui-select><ui-range text=\"gap\" v-model=\"item.gap\" max=\"0.1\" step=\"0.01\" path=\"-1104249974.3\"></ui-range></div>"}},{"name":"e.template.grid.item","path":"\\e\\template\\grid\\item.ws.yaml","source":{"dom":{"ui.track.size":{"v-if":"item","div#1":{":class":"'flex caption-layout-' + item.caption?.align.v","on_input":"onSizeChange","div#2":{":key":"key1",":class":"'items container grid' + ' grid-items-' + item.items.length + ' items-' + getVisibleItemsCount(item.items) + ' rotation-' + item.rotation",":style":"getMainStyle(item)","component":{"v-for":"item in item.items",":key":"item.id","v-if":"item.visible",":editable":"editable",":class":"getItemClass(item)",":style":"getItemStyle(item)",":is":"getItemType(item)",":item":"item","on_image-load":"(src) => onItemImageLoad(item, src)","on_file-drop":"(item, files) => $emit('file-drop', item, files)"}},"e.template.caption.item":{"v-if":"item.caption",":editable":"editable",":item":"item.caption","on_click":"toggleRotation(item)"}}}},"props":{"item":null,"editable":false},"data":{"size":null,"mainStyle":null,"key1":1},"methods":{"getMainStyle":"function(item) {\n  if (!item) return {};\n  const style = {};\n  //if (item.layout == 'layers') style.aspectRatio = eval(item.aspectRatio);\n  const gap = 0.02; // item.gap;\n  if ((this.size) && (gap)) style.gap = `${Math.round(gap * this.size.diagonal)}px`;\n  return style;\n}\n","getItemClass":"function(item) {\n  return {\n    'item': true,\n    'selected': (item === this.selectedItem),\n  };\n}\n","getItemStyle":"function(item) {\n  if (!item) return;\n  let style = {};\n  const { filters } = item;\n  const cssFilters = [];\n  if (filters)\n  {\n    if (filters.blur) cssFilters.push(`blur(${filters.blur*10}px)`);\n    if (filters.transparent) cssFilters.push(`opacity(${1-filters.transparent})`);\n    if (filters.grayscale) cssFilters.push(`grayscale(${filters.grayscale})`);\n  }\n  style.filter = cssFilters.join(' ');\n  //if (this.item.layout != 'layers')\n  style.aspectRatio = eval(this.item.aspectRatio);\n  return style;\n}\n","getItemType":"function(item) {\n  return `e-template-${item.type}-item`;\n}\n","onItemImageLoad":"function(item, src) {\n  const handler = this.$refs.selectedItemEditor1?.onItemImageLoad;\n  if (handler) handler(src);\n}\n","onSizeChange":"function(size) {\n  this.size = size;\n  //this.refresh();\n  //this.mainStyle = this.getMainStyle(this.item);\n}\n","toggleRotation":"function(item) {\n  item.rotation = ((item.rotation||0) + 1) % 2;\n  this.refresh();\n}\n","getVisibleItemsCount":"function(items) {\n  if (!items) return 0;\n  return items.filter(item => item.visible).length;\n}\n","refresh":"function() {\n  this.key1++;\n}\n"},"watch":null,"style":{"div":{"transition":"0s !important"},".caption-layout-top":{"flex-direction":"column-reverse"},".caption-layout-bottom":{"flex-direction":"column"},".container":{"gap":"0.5em"},".items":{"width":"100%"},".items .item":{"background":"#ffffff20"},".grid-items-3, .grid-items-6, .grid-items-9":{"grid-template":"1fr / 1fr 1fr 1fr"},".grid-items-4.items-2.rotation-1":{"grid-template":"1fr / 1fr 1fr"},".grid-items-4.items-2.rotation-1 > div":{"aspect-ratio":"1 / 2.05 !important","grid-row":"1 / span 2"},".grid-items-4.items-2 > div":{"grid-column":"auto !important"},".grid-items-4.items-2.rotation-1 div":null,".grid-items-4.items-3":{"grid-template":"1fr / 1fr 1fr"},".grid-items-4.items-3 > div:nth-child(1), .items-2 > div":{"aspect-ratio":"2.05 / 1 !important","grid-column":"1 / span 2"},".grid-items-4.items-3.rotation-1 > div:nth-child(1)":{"aspect-ratio":"1 / 2.1 !important","grid-column":1,"grid-row":"1 / span 2"},".items-4":{"grid-template":"1fr / 1fr 1fr"},"img.empty":{"height":"100%"}},"name":"e-template-grid-item","template":"<ui-track-size class=\"comp-e-template-grid-item\" v-if=\"item\" path=\"-1435649936.\"><div :class=\"'flex caption-layout-' + item.caption?.align.v\" on_input=\"onSizeChange\" path=\"-1435649936.0\"><div :key=\"key1\" :class=\"'items container grid' + ' grid-items-' + item.items.length + ' items-' + getVisibleItemsCount(item.items) + ' rotation-' + item.rotation\" :style=\"getMainStyle(item)\" path=\"-1435649936.0.0\"><component v-for=\"item in item.items\" :key=\"item.id\" v-if=\"item.visible\" :editable=\"editable\" :class=\"getItemClass(item)\" :style=\"getItemStyle(item)\" :is=\"getItemType(item)\" :item=\"item\" on_image-load=\"(src) =&gt; onItemImageLoad(item, src)\" on_file-drop=\"(item, files) =&gt; $emit('file-drop', item, files)\" path=\"-1435649936.0.0.0\"></component></div><e-template-caption-item v-if=\"item.caption\" :editable=\"editable\" :item=\"item.caption\" on_click=\"toggleRotation(item)\" path=\"-1435649936.0.1\"></e-template-caption-item></div></ui-track-size>"}},{"name":"e.template.image.editor","path":"\\e\\template\\image\\editor.ws.yaml","source":{"dom":{".items":{"v-if":"item","transition#1":{"name":"slide2","div#1":{"v-if":"!showShadowEditor",".message#1":{"div#2":{"v-text":"'Drag the image to move it'"},"div#3":{"v-text":"'Ctrl-drag up/down to scale it'"}},"transition#2":{"name":"slide2","ui.checkbox":{"v-if":"(!removingBackground)","text":"remove background","v-model":"item.removeBackground"}},"ui.image.select":{"ref":"imageSelect1","v-model":"item.imageID","on_uploading":"onImageUploading"},"transition#3":{"name":"slide2",".message#2":{"v-if":"removingBackground","div#4":{"v-text":"'Removing background'"},"ui.loading":null}}}},"div":{"ui.expand":{"text":"shadow","v-model":"showShadowEditor"},"transition#4":{"name":"slide2","div#5":{"v-if":"showShadowEditor",".message#3":{"div#6":{"v-text":"'Drag the shadow to move it'"},"div#7":{"v-text":"'Ctrl-drag up/down to change the blur'"}},"ui.range#1":{"text":"x","v-model":"item.shadow.x","min":-1,"max":1,"step":0.01},"ui.range#2":{"text":"y","v-model":"item.shadow.y","min":-1,"max":1,"step":0.01},"ui.range#3":{"text":"blur","v-model":"item.shadow.blur","min":0,"max":1,"step":0.01},"ui.range#4":{"text":"opacity","v-model":"item.shadow.opacity","min":0,"max":1,"step":0.01}}}}}},"props":{"item":null},"data":{"removingBackground":false,"showMoveScale":false,"showShadowEditor":false,"processingNewImage":false},"style":{".comp-ui-image-select":{"margin-top":"1em"},".items":{"display":"flex","flex-direction":"column","gap":"1rem"}},"mounted":"async function() {\n  this.$watch('item.removeBackground', async (removeBackground) => {\n    this.removingBackground = removeBackground;\n  });\n}\n","methods":{"onLayerDragBy":"function(dpos) {\n  const pos = (this.showShadowEditor ? this.item.shadow : this.item.trans.pos);\n  pos.x += dpos.dx;\n  pos.y += dpos.dy;\n}\n","onLayerScaleBy":"function(ds) {\n  if (this.showShadowEditor) {\n    this.item.shadow.blur += ds;\n  }\n  else\n  {\n    this.item.trans.scale += ds;\n  }\n}\n","onFileDrop":"function(files) {\n  this.$refs.imageSelect1.onFileDrop(files);\n}\n","onImageUploading":"function(isUploading) {\n  if (isUploading) {\n    this.processingNewImage = true;\n    this.item.removeBackground = false;\n  }\n  this.$emit('toggle-disabled', isUploading);\n}\n","onLayerImageLoad":"function(src) {\n  if (src.includes(\".nobg.\"))\n  {\n    this.removingBackground = false;\n    this.processingNewImage = false;\n  }\n  else\n  {\n    if (this.processingNewImage)\n    {\n      // After a user uploads a new image,\n      // we wait until the browser loads the image\n      // and then mark the checkbox to remove the background.\n      this.item.trans.pos.x = 0.5;\n      this.item.trans.pos.y = 0.5;\n      this.item.trans.scale = 1;\n      setTimeout(() => {\n        this.item.removeBackground = true;\n      }, 100);\n    }\n  }\n}\n"},"watch":{"processingNewImage":"function(newValue) {\n  this.$emit('toggle-disabled', newValue);\n}\n"},"name":"e-template-image-editor","template":"<div class=\"comp-e-template-image-editor items\" v-if=\"item\" path=\"1046603147.\"><transition name=\"slide2\" path=\"1046603147.0\"><div v-if=\"!showShadowEditor\" path=\"1046603147.0.0\"><div class=\"message\" path=\"1046603147.0.0.0\"><div v-text=\"'Drag the image to move it'\" path=\"1046603147.0.0.0.0\"></div><div v-text=\"'Ctrl-drag up/down to scale it'\" path=\"1046603147.0.0.0.1\"></div></div><transition name=\"slide2\" path=\"1046603147.0.0.1\"><ui-checkbox v-if=\"(!removingBackground)\" text=\"remove background\" v-model=\"item.removeBackground\" path=\"1046603147.0.0.1.0\"></ui-checkbox></transition><ui-image-select ref=\"imageSelect1\" v-model=\"item.imageID\" on_uploading=\"onImageUploading\" path=\"1046603147.0.0.2\"></ui-image-select><transition name=\"slide2\" path=\"1046603147.0.0.3\"><div class=\"message\" v-if=\"removingBackground\" path=\"1046603147.0.0.3.0\"><div v-text=\"'Removing background'\" path=\"1046603147.0.0.3.0.0\"></div><ui-loading></ui-loading></div></transition></div></transition><div path=\"1046603147.1\"><ui-expand text=\"shadow\" v-model=\"showShadowEditor\" path=\"1046603147.1.0\"></ui-expand><transition name=\"slide2\" path=\"1046603147.1.1\"><div v-if=\"showShadowEditor\" path=\"1046603147.1.1.0\"><div class=\"message\" path=\"1046603147.1.1.0.0\"><div v-text=\"'Drag the shadow to move it'\" path=\"1046603147.1.1.0.0.0\"></div><div v-text=\"'Ctrl-drag up/down to change the blur'\" path=\"1046603147.1.1.0.0.1\"></div></div><ui-range text=\"x\" v-model=\"item.shadow.x\" min=\"-1\" max=\"1\" step=\"0.01\" path=\"1046603147.1.1.0.1\"></ui-range><ui-range text=\"y\" v-model=\"item.shadow.y\" min=\"-1\" max=\"1\" step=\"0.01\" path=\"1046603147.1.1.0.2\"></ui-range><ui-range text=\"blur\" v-model=\"item.shadow.blur\" max=\"1\" step=\"0.01\" path=\"1046603147.1.1.0.3\"></ui-range><ui-range text=\"opacity\" v-model=\"item.shadow.opacity\" max=\"1\" step=\"0.01\" path=\"1046603147.1.1.0.4\"></ui-range></div></transition></div></div>"}},{"name":"e.template.image.item","path":"\\e\\template\\image\\item.ws.yaml","source":{"dom":{"div":{"ui.loading":{"class":"absolute-center","v-show":"isLoading"},"ui.file.dropzone":{"v-show":"!isLoading",":enabled":"editable","on_file-drop":"onFileDrop(item, $event)","ui.movable":{":enabled":"editable","on_drag-by":"({ dx, dy }) => onItemDragBy(item, { dx, dy })","on_scale-by":"(ds) => onItemScaleBy(item, ds)","ui.image":{"ref":"image1","v-if":"item",":style":"getStyle(item)",":imageID":"item.imageID",":remove-background":"item.removeBackground","on_load":"onImageLoad","on_change":"refresh"}}},"e.template.caption.item":{"v-if":"item.caption",":item":"item.caption"}}},"props":{"item":null,"editable":false},"data":{"isLoading":0},"mounted":"async function () {\n}\n","methods":{"onFileDrop":"async function(item, files) {\n  await this.$nextTick();\n  if (files.length > 1) return alertify.error('One file at a time, please');\n  this.isLoading++;\n  try\n  {\n    const image = await this.$root.uploadFile(files[0]);\n    item.imageID = image._id;\n  }\n  finally\n  {\n    this.isLoading--;\n  }\n}\n","onItemDragBy":"function(item, dpos) {\n  const pos = item.trans.pos;\n  pos.x += dpos.dx;\n  pos.y += dpos.dy;\n}\n","onItemScaleBy":"function(item, ds) {\n  item.trans.scale += ds;\n}\n","onImageLoad":"function(e) {\n  this.$emit('image-load', e);\n}\n","refresh":"function() {\n}\n","getStyle":"function(item) {\n  if (!item) return;\n  let style = {};\n  style.transform = `translate(${(-0.5 + item.trans.pos.x) * 100}%, ${(-0.5 + item.trans.pos.y) * 100}%) scale(${item.trans.scale})`;\n  const cssFilters = [];\n  const image1 = this.$refs.image1;\n  if (image1 && item.shadow)\n  {\n    // Apply the opacity to the shadow color\n    const color = item.shadow.color.replace(/#(..)(..)(..)/, (match, r, g, b) => {\n      const opacity = Math.round(item.shadow.opacity*255).toString(16);\n      return `#${r}${g}${b}${opacity}`;\n    });\n    const values = {\n      x: (item.shadow.x*image1.width).toFixed(2),\n      y: (item.shadow.y*image1.height).toFixed(2),\n      blur: item.shadow.blur/20*image1.diagonal.toFixed(2),\n      color: color\n    };\n    const dropShadow = `drop-shadow(${values.x}px ${values.y}px ${values.blur}px ${values.color})`;\n    cssFilters.push(dropShadow);\n  }\n  style.filter = cssFilters.join(' ');\n  return style;\n}\n"},"watch":{"item":{"handler":"async function(item) {\n}\n","deep":true}},"style":{".comp-e-template-caption-item":{"position":"absolute","top":0,"width":"100%","height":"100%","pointer-events":"none"}},"name":"e-template-image-item","template":"<div class=\"comp-e-template-image-item\" path=\"1623568049.\"><ui-loading class=\"absolute-center\" v-show=\"isLoading\" path=\"1623568049.0\"></ui-loading><ui-file-dropzone v-show=\"!isLoading\" :enabled=\"editable\" on_file-drop=\"onFileDrop(item, $event)\" path=\"1623568049.1\"><ui-movable :enabled=\"editable\" on_drag-by=\"({ dx, dy }) =&gt; onItemDragBy(item, { dx, dy })\" on_scale-by=\"(ds) =&gt; onItemScaleBy(item, ds)\" path=\"1623568049.1.0\"><ui-image ref=\"image1\" v-if=\"item\" :style=\"getStyle(item)\" :imageID=\"item.imageID\" :remove-background=\"item.removeBackground\" on_load=\"onImageLoad\" on_change=\"refresh\" path=\"1623568049.1.0.0\"></ui-image></ui-movable></ui-file-dropzone><e-template-caption-item v-if=\"item.caption\" :item=\"item.caption\" path=\"1623568049.2\"></e-template-caption-item></div>"}},{"name":"e.template.item.editor","path":"\\e\\template\\item\\editor.ws.yaml","source":{"dom":{"div":{"v-text":"item"}},"props":{"item":null},"name":"e-template-item-editor","template":"<div class=\"comp-e-template-item-editor\" v-text=\"item\" path=\"644061981.\"></div>"}},{"name":"e.template.item.filters","path":"\\e\\template\\item\\filters.ws.yaml","source":{"dom":{"div":{"v-if":"value","ui.image.options#1":{":imageID":"imageID","filter":"blur","v-model":"value.blur"},"ui.image.options#2":{":imageID":"imageID","filter":"opacity",":reverse":true,"v-model":"value.transparent"},"ui.image.options#3":{":imageID":"imageID","filter":"grayscale","v-model":"value.grayscale"}}},"props":{"imageID":null,"value":null},"data":null,"methods":null,"name":"e-template-item-filters","template":"<div class=\"comp-e-template-item-filters\" v-if=\"value\" path=\"-475504565.\"><ui-image-options :imageID=\"imageID\" filter=\"blur\" v-model=\"value.blur\" path=\"-475504565.0\"></ui-image-options><ui-image-options :imageID=\"imageID\" filter=\"opacity\" :reverse=\"true\" v-model=\"value.transparent\" path=\"-475504565.1\"></ui-image-options><ui-image-options :imageID=\"imageID\" filter=\"grayscale\" v-model=\"value.grayscale\" path=\"-475504565.2\"></ui-image-options></div>"}},{"name":"e.template.item.icon","path":"\\e\\template\\item\\icon.ws.yaml","source":{"dom":{".icon":{"on_click":"$emit('click')","ui.checkbox":{"v-model":"item.visible","size":"normal"},"div#1":{"v-if":"hasImage","ui.image":{":imageID":"item.imageID",":square":true}},"div#2":{"v-if":"(!hasImage)","v-text":"getItemTypeIcon(item.type)"},"div#3":{"v-if":"(item.type!='image')","class":"no-wrap","v-text":"item.caption?.text?.shorten(20)||('['+item.type+']')"}}},"props":{"item":null},"methods":{"getItemTypeIcon":"function(type) {\n  return {\n    'container': ' ',\n    'image': '🖼️',\n    'caption': '✏️',\n    'rainbow': '🌈'\n  }[type] || '';\n}\n"},"computed":{"hasImage":"function() {\n  if (!this.item) return false;\n  return (this.item.type == 'image') && this.item.imageID;\n}\n"},"style":{".comp-ui-image":{"width":"2.2rem !important"},".icon":{"display":"flex","width":"5em","font-size":"110%"},".no-wrap":{"white-space":"nowrap"}},"name":"e-template-item-icon","template":"<div class=\"comp-e-template-item-icon icon\" on_click=\"$emit('click')\" path=\"-562339287.\"><ui-checkbox v-model=\"item.visible\" size=\"normal\" path=\"-562339287.0\"></ui-checkbox><div v-if=\"hasImage\" path=\"-562339287.1\"><ui-image :imageID=\"item.imageID\" :square=\"true\" path=\"-562339287.1.0\"></ui-image></div><div v-if=\"(!hasImage)\" v-text=\"getItemTypeIcon(item.type)\" path=\"-562339287.2\"></div><div class=\"no-wrap\" v-if=\"(item.type!='image')\" v-text=\"item.caption?.text?.shorten(20)||('['+item.type+']')\" path=\"-562339287.3\"></div></div>"}},{"name":"e.template.rainbow.editor","path":"\\e\\template\\rainbow\\editor.ws.yaml","source":{"dom":{"div#1":{"div#2":{"table":{"tbody":{"tr#1":{"th#1":{"v-text":"'pattern'"},"td#1":{"ui.select":{"v-slot":"slotProps",":options":"patternOptions","input-type":"value","v-model":"item.pattern",":show-text":"false","template":{"img":{"class":"pattern-image",":src":"'/img/rainbow/patterns/'+slotProps.item+'.png'"}}}}},"tr#2":{"th#2":{"v-text":"'detail'"},"td#2":{"input#1":{"type":"range","min":2,"max":36,"v-model":"item.slices"}}},"tr#3":{"th#3":{"v-text":"'colors'"},"td#3":{".flex":{"ui.button#1":{"v-text":"'➖'",":click":"removeColor"},"input#2":{"class":"clickable","type":"color","v-for":"index in item.colorsCount","v-model":"item.colors[index-1]"},"ui.button#2":{"v-text":"'➕'",":click":"addColor"}}}}}}}}},"props":{"item":null},"data":{"patternOptions":["radial","lines","checkers","pizza"]},"methods":{"onColorChange":"function (index, value) {\n  this.item.colors[index] = value;\n}\n","addColor":"function () {\n  if (this.item.colorsCount >= this.item.colors.length) return;\n  this.item.colorsCount++;\n  if (this.item.colorsCount > this.item.slices) this.item.slices = this.item.colorsCount;\n}\n","removeColor":"function () {\n  this.item.colorsCount--;\n}\n"},"watch":{"item":{"handler":"function(item) {\n}\n","deep":true}},"style":{"ul":{"display":"flex"},"li":{"flex-grow":1},"li > div":{"text-align":"center"},".pattern-image":{"filter":"grayscale(1) contrast(1) brightness(1.5)"}},"name":"e-template-rainbow-editor","template":"<div class=\"comp-e-template-rainbow-editor\" path=\"637897232.\"><div path=\"637897232.0\"><table path=\"637897232.0.0\"><tbody path=\"637897232.0.0.0\"><tr path=\"637897232.0.0.0.0\"><th v-text=\"'pattern'\" path=\"637897232.0.0.0.0.0\"></th><td path=\"637897232.0.0.0.0.1\"><ui-select v-slot=\"slotProps\" :options=\"patternOptions\" input-type=\"value\" v-model=\"item.pattern\" :show-text=\"false\" path=\"637897232.0.0.0.0.1.0\"><template path=\"637897232.0.0.0.0.1.0.0\"><img class=\"pattern-image\" :src=\"'/img/rainbow/patterns/'+slotProps.item+'.png'\" path=\"637897232.0.0.0.0.1.0.0.0\"/></template></ui-select></td></tr><tr path=\"637897232.0.0.0.1\"><th v-text=\"'detail'\" path=\"637897232.0.0.0.1.0\"></th><td path=\"637897232.0.0.0.1.1\"><input type=\"range\" min=\"2\" max=\"36\" v-model=\"item.slices\" path=\"637897232.0.0.0.1.1.0\"/></td></tr><tr path=\"637897232.0.0.0.2\"><th v-text=\"'colors'\" path=\"637897232.0.0.0.2.0\"></th><td path=\"637897232.0.0.0.2.1\"><div class=\"flex\" path=\"637897232.0.0.0.2.1.0\"><ui-button v-text=\"'➖'\" :click=\"removeColor\" path=\"637897232.0.0.0.2.1.0.0\"></ui-button><input class=\"clickable\" type=\"color\" v-for=\"index in item.colorsCount\" v-model=\"item.colors[index-1]\" path=\"637897232.0.0.0.2.1.0.1\"/><ui-button v-text=\"'➕'\" :click=\"addColor\" path=\"637897232.0.0.0.2.1.0.2\"></ui-button></div></td></tr></tbody></table></div></div>"}},{"name":"e.template.rainbow.item","path":"\\e\\template\\rainbow\\item.ws.yaml","source":{"dom":{"div":{"canvas":{"ref":"canvas1","width":1000,"height":1000}}},"props":{"item":null},"data":{"drawTimer":null},"mounted":"function () {\n  window.addEventListener(`resize`, this.draw.bind(this));\n  // Detect if the image element changes its size\n  let resizeObserver = new ResizeObserver(this.draw.bind(this));\n  resizeObserver.observe(this.$refs.canvas1);\n}\n","methods":{"draw":"function () {\n  const canvas = this.$refs.canvas1;\n  if (!canvas) return;\n  const ctx = canvas.getContext(\"2d\");\n  const width = canvas.width;\n  const height = canvas.height;\n  const slices = this.item.slices;\n  const colors = this.item.colors;\n  const colorsCount = this.item.colorsCount;\n  const pattern = this.item.pattern?.toTitleCase();\n  if (!pattern) return;\n  this[`draw${pattern}`](ctx, width, height, slices, colors, colorsCount);\n}\n","drawRadial":"function (ctx, width, height, slices, colors, colorsCount) {\n  const grd = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width * 2);\n  for (let i = 0; i < slices; i++) {\n    grd.addColorStop(i / slices, colors[i % colorsCount]);\n  }\n  grd.addColorStop(1, colors[0]);\n  ctx.fillStyle = grd;\n  ctx.fillRect(0, 0, width, height);\n}\n","drawLines":"function (ctx, width, height, slices, colors, colorsCount) {\n  const grd = ctx.createLinearGradient(0, 0, width, height);\n  for (let i = 0; i < slices; i++) {\n    grd.addColorStop(i / slices, colors[i % colorsCount]);\n  }\n  grd.addColorStop(1, colors[0]);\n  ctx.fillStyle = grd;\n  ctx.fillRect(0, 0, width, height);\n}\n","drawCheckers":"function (ctx, width, height, slices, colors, colorsCount) {\n  // Slice the canvas into slices, like a pizza\n  const sliceWidth = width / slices;\n  const sliceHeight = height / slices;\n  for (let i = 0; i < slices; i++) {\n    for (let j = 0; j < slices; j++) {\n      ctx.fillStyle = colors[(i + j) % colorsCount];\n      ctx.fillRect(i * sliceWidth, j * sliceHeight, sliceWidth, sliceHeight);\n    }\n  }\n}\n","drawPizza":"function (ctx, width, height, slices, colors, colorsCount) {\n  const center = { x: width / 2, y: height / 2 };\n  const angle = 2 * Math.PI / slices;\n  const radius = Math.max(width, height);\n  for (let i = 0; i < slices; i++) {\n    ctx.beginPath();\n    ctx.moveTo(center.x, center.y);\n    ctx.arc(center.x, center.y, radius, i * angle, (i + 1) * angle);\n    ctx.closePath();\n    ctx.fillStyle = colors[i % colorsCount];\n    ctx.fill();\n  }\n}\n"},"watch":{"item":{"handler":"function () {\n  this.$nextTick(this.draw.bind(this));\n}\n","immediate":true,"deep":true}},"style":{"canvas":{"width":"100%","height":"100%"}},"name":"e-template-rainbow-item","template":"<div class=\"comp-e-template-rainbow-item\" path=\"-1952272266.\"><canvas ref=\"canvas1\" width=\"1000\" height=\"1000\" path=\"-1952272266.0\"></canvas></div>"}},{"name":"e.thread.list","path":"\\e\\thread\\list.ws.yaml","source":{"dom":{"div#1":{"ui.loading":{"v-if":"isLoading && !threads.length"},"ui.list":{"v-slot":"slotProps",":items":"threads","ui.link":{":class":"{ selected: isCurrentThread(slotProps.item) }",":url":"$root.url.thread(slotProps.item)",".grid":{"div#2":{"e.instance":{":item":"firstPost(slotProps.item)?.instance"}},"ui.title":{":number":"slotProps.item.posts.length"},"div#3":{"v-text":"getThreadTitle(slotProps.item)"}}}}}},"data":{"threads":[],"isLoading":false},"mounted":"async function() {\n  this.$watch(() => this.$root.params.url, this.init.bind(this), { immediate: true });\n}\n","methods":{"init":"async function() {\n  this.isLoading = true;\n  try\n  {\n      this.threads = await this.$root.dbp.threads.select.all();\n  }\n  finally\n  {\n    this.isLoading = false;\n  }\n}\n","isCurrentThread":"function(thread) {\n  return this.$root.params.url == this.$root.url.thread(thread);\n}\n","getThreadTitle":"function(thread) {\n  const post = thread.posts[0];\n  if (!post) return null;\n  return post.text ||\n    post.instance?.text1 ||\n    post.instance?.text0 ||\n    post.instance?.displayName;\n}\n","firstPost":"function(thread) {\n  return thread.posts[0];\n}\n"},"name":"e-thread-list","style":{".grid":{"grid-template":"1fr / 2rem 2rem 1fr","gap":"0.5rem"}},"template":"<div class=\"comp-e-thread-list\" path=\"-335521287.\"><ui-loading v-if=\"isLoading &amp;&amp; !threads.length\" path=\"-335521287.0\"></ui-loading><ui-list v-slot=\"slotProps\" :items=\"threads\" path=\"-335521287.1\"><ui-link :class=\"{ selected: isCurrentThread(slotProps.item) }\" :url=\"$root.url.thread(slotProps.item)\" path=\"-335521287.1.0\"><div class=\"grid\" path=\"-335521287.1.0.0\"><div path=\"-335521287.1.0.0.0\"><e-instance :item=\"firstPost(slotProps.item)?.instance\" path=\"-335521287.1.0.0.0.0\"></e-instance></div><ui-title :number=\"slotProps.item.posts.length\" path=\"-335521287.1.0.0.1\"></ui-title><div v-text=\"getThreadTitle(slotProps.item)\" path=\"-335521287.1.0.0.2\"></div></div></ui-link></ui-list></div>"}},{"name":"e.thread","path":"\\e\\thread.ws.yaml","source":{"dom":{"div":{"v-if":"thread","h3":{"v-text":"thread.title"},"transition.group":{"tag":"ul","name":"list","li":{"v-for":"post in [...thread.posts,null]",":key":"post?._id||0","e.post":{"v-if":"post",":item":"post","on_refresh-thread":"refresh"},"e.post.create":{"v-else-if":"!post",":threadID":"thread?._id","on_created":"refresh"}}}}},"props":{"value":null},"data":{"thread":null},"methods":{"refresh":"\nasync function() {\n  const updatedThread = await this.$root.dbp.threads.select.one(this.thread._id);\n  // Thread was deleted\n  if (!updatedThread) return this.$root.navigateTo('/');\n  this.$emit('input', updatedThread);\n}\n"},"watch":{"value":"\n{\n  handler: function(newValue) {\n    this.thread = newValue;\n  },\n  immediate: true\n}\n"},"style":{"ul":{"margin":"auto"},"li":{"margin-bottom":"2vh"}},"name":"e-thread","template":"<div class=\"comp-e-thread\" v-if=\"thread\" path=\"1226205107.\"><h3 v-text=\"thread.title\" path=\"1226205107.0\"></h3><transition-group tag=\"ul\" name=\"list\" path=\"1226205107.1\"><li v-for=\"post in [...thread.posts,null]\" :key=\"post?._id||0\" path=\"1226205107.1.0\"><e-post v-if=\"post\" :item=\"post\" on_refresh-thread=\"refresh\" path=\"1226205107.1.0.0\"></e-post><e-post-create v-else-if=\"!post\" :threadID=\"thread?._id\" on_created=\"refresh\" path=\"1226205107.1.0.1\"></e-post-create></li></transition-group></div>"}},{"name":"ide.component.editor","path":"\\ide\\component\\editor.ws.yaml","source":{"dom":{"div":{"v-if":"component","ui.tabs":{":options":"['🧊 state', '📁 view']","direction":"horizontal","template#1":{"v-slot":"tab0","ide.state.tracker":{":uid":"vueUid"}},"template#2":{"v-slot":"tab1","ide.component.view.editor":{":component":"component"}}}}},"props":{"vueUid":null},"data":{"component":null},"methods":null,"watch":{"vueUid":"function(vueUid) {\n  this.component = !vueUid ? null : this.$root.getComponent(vueUid);\n}\n"},"name":"ide-component-editor","template":"<div class=\"comp-ide-component-editor\" v-if=\"component\" path=\"-965690814.\"><ui-tabs :options=\"['🧊 state', '📁 view']\" direction=\"horizontal\" path=\"-965690814.0\"><template v-slot:tab0 path=\"-965690814.0.0\"><ide-state-tracker :uid=\"vueUid\" path=\"-965690814.0.0.0\"></ide-state-tracker></template><template v-slot:tab1 path=\"-965690814.0.1\"><ide-component-view-editor :component=\"component\" path=\"-965690814.0.1.0\"></ide-component-view-editor></template></ui-tabs></div>"}},{"name":"ide.component.info","path":"\\ide\\component\\info.ws.yaml","source":{"dom":{"div#1":{"div#2":{"ui.button":{":text":"'refresh'",":click":"updateChanges"}},"table":{"tr":{"class":"hoverable","v-for":"change in changes","on_mouseenter":"onItemHover(change)","on_mouseleave":"onItemUnhover(change)","on_click":"onItemClick(change)","td#1":{"class":"opacity-50","v-text":"change.id"},"td#2":{"v-text":"'📦'"},"td#3":{"class":"opacity-50","v-text":"getItemCompName(change)"},"td#4":{"class":"clickable","v-text":"'📌'","on_click":"onClickHideField(change)"},"td#5":{"v-text":"'🧊'"},"td#6":{"class":"opacity-30","v-text":"change.key"},"td#7":{"div#3":{":class":"getValueType(change.newValue)","v-text":"previewValue(change.newValue)"}},"td#8":{"class":"opacity-30","div#4":{":class":"getValueType(change.newValue)","v-text":"previewValue(change.oldValue)"}}}}}},"props":{"item":null},"data":{"changes":[],"hoveredItem":null,"hiddenFields":[]},"methods":{"onClickHideField":"function(change) {\n  const compName = this.getItemCompName(change);\n  const key = change.key;\n  this.hiddenFields.push({ compName, key });\n  this.updateChanges();\n}\n","onItemHover":"function(change) {\n  this.hoveredItem = change;\n}\n","onItemUnhover":"function(change) {\n  this.hoveredItem = null;\n}\n","isHiddenField":"function(change) {\n  const compName = this.getItemCompName(change);\n  return this.hiddenFields.some(item => item.compName == compName && item.key == change.key);\n}\n","getItemCompName":"function(change) {\n  return this.$root.vues[change.uid]()?.$options?._componentTag;\n}\n","updateChanges":"function() {\n  this.changes = this.getChanges();\n}\n","getChanges":"function() {\n  if (!this.item) return [];\n  let items = this.getStateChanges(this.item());\n  items = items.sortBy(item => item.id);\n  items = [...items].reverse();\n  return items;\n}\n","getStateChanges":"function(vue) {\n  if (!vue) return [];\n  let items = [];\n  items.push(...(vue.$data._?.state.items||[]));\n  items = items.filter(item => !this.isHiddenField(item));\n  items.push(...((vue.$children||[]).flatMap(c => this.getStateChanges(c))));\n  return items;\n}\n","onItemClick":"function(change) {\n  console.log(change);\n}\n","getItemProperties":"function() {\n  const props = [];\n  if (!this.item) return props;\n  props.push(...this.getItemProps(this.item().$data));\n  props.push(...this.getItemProps(this.item().$props));\n  props.push(...this.getItemProps(this.item().$options.computed));\n  return props;\n}\n","getItemProps":"function(collection) {\n  if (!collection) return [];\n  const props = [];\n  for (const name of Object.keys(collection)) {\n    if ([\"$\", \"_\"].some(s => name.startsWith(s))) continue;\n    props.push({\n      name,\n      value: (name in collection) ? collection[name] : this.item()[name],\n    });\n  }\n  return props;\n}\n","previewValue":"function(value) {\n  if (typeof value == \"function\") return value.toString();\n  try\n  {\n    return jsyaml.dump(value);\n  }\n  catch (ex)\n  {\n    return ex.message;\n  }\n}\n","getValueType":"function(value) {\n  return typeof value;\n}\n"},"watch":{"hoveredItem":"function(newItem, oldItem) {\n  const newVue = (!newItem) ? null : this.$root.vues[newItem.uid]();\n  const oldVue = (!oldItem) ? null : this.$root.vues[oldItem.uid]();\n  console.log(newVue);\n  newVue?.$el.classList.add(\"highlighted2\");\n  oldVue?.$el.classList.remove(\"highlighted2\");\n}\n"},"style":{".comp-ide-component-info":{"max-width":"40em","max-height":"30em","overflow":"auto"},"td":{"font-size":"1rem","white-space":"pre","padding":"0 0.3rem"},".object":{"max-width":"20rem","max-height":"5rem","overflow":"auto","opacity":0.5,"padding":"0.5em","border":"1px solid gray"},".clickable":{"filter":"grayscale(1)"},".clickable:hover":{"filter":"none"}},"name":"ide-component-info","template":"<div class=\"comp-ide-component-info\" path=\"-1793052989.\"><div path=\"-1793052989.0\"><ui-button :text=\"'refresh'\" :click=\"updateChanges\" path=\"-1793052989.0.0\"></ui-button></div><table path=\"-1793052989.1\"><tr class=\"hoverable\" v-for=\"change in changes\" on_mouseenter=\"onItemHover(change)\" on_mouseleave=\"onItemUnhover(change)\" on_click=\"onItemClick(change)\" path=\"-1793052989.1.0\"><td class=\"opacity-50\" v-text=\"change.id\" path=\"-1793052989.1.0.0\"></td><td v-text=\"'📦'\" path=\"-1793052989.1.0.1\"></td><td class=\"opacity-50\" v-text=\"getItemCompName(change)\" path=\"-1793052989.1.0.2\"></td><td class=\"clickable\" v-text=\"'📌'\" on_click=\"onClickHideField(change)\" path=\"-1793052989.1.0.3\"></td><td v-text=\"'🧊'\" path=\"-1793052989.1.0.4\"></td><td class=\"opacity-30\" v-text=\"change.key\" path=\"-1793052989.1.0.5\"></td><td path=\"-1793052989.1.0.6\"><div :class=\"getValueType(change.newValue)\" v-text=\"previewValue(change.newValue)\" path=\"-1793052989.1.0.6.0\"></div></td><td class=\"opacity-30\" path=\"-1793052989.1.0.7\"><div :class=\"getValueType(change.newValue)\" v-text=\"previewValue(change.oldValue)\" path=\"-1793052989.1.0.7.0\"></div></td></tr></table></div>"}},{"name":"ide.component.picker","path":"\\ide\\component\\picker.ws.yaml","source":{"dom":{"div":{"ui.keyboard":{"on_ctrl":"onCtrlKey"},"ui.mouse":{"on_hovered-element":"onHoveredElement",":global":true},"ui.context.window":{"ref":"context1",":global":true,":visible":"showPicker","icon":"📦",":title":"getTitle(hoveredVueUID)","template":{"v-slot":"content",".flex.flex-column.gap-1":{"ide.component.editor":{":vue-uid":"selectedVueUID||hoveredVueUID"},".parent-chain":{"ide.component.title#1":{"v-for":"uid in parentChainUIDs",":item":"$root.vm.vues[uid]",":class":"{ 'selected': uid === selectedVueUID }","on_click":"selectVue(uid)"}},".child-chain":{"ide.component.title#2":{"v-for":"uid in childChainUIDs",":item":"$root.vm.vues[uid]",":class":"{ 'selected': uid === selectedVueUID }","on_click":"selectVue(uid)"}}}}}}},"props":null,"data":{"hoveredElement":null,"hoveredVueUID":null,"selectedVueUID":null,"parentChainUIDs":null,"childChainUIDs":null,"showPicker":false},"methods":{"selectVue":"function(uid) {\n  if (uid == this.selectedVueUID) uid = null;\n  this.selectedVueUID = uid;\n}\n","onCtrlKey":"function(ctrl) {\n  this.showPicker = ctrl;\n}\n","getTitle":"function(vue) {\n  return this.$root.vm.getVue(vue)?.$options._componentTag;\n}\n","onHoveredElement":"function(el) {\n  if (this.$refs.context1.isPinned) return;\n  this.hoveredElement = el;\n}\n","getParentChainUIDs":"function(vue) {\n  const maxChainLength = 4;\n  let chain = [];\n  let parent = vue;\n  while (parent && (chain.length < maxChainLength)) {\n    chain.push(parent._uid);\n    parent = this.getParentVue(parent);\n  }\n  chain = chain.reverse();\n  return chain;\n}\n","getChildChainUIDs":"function(vue) {\n  return vue?.$children?.map(c => c._uid);\n}\n","getParentVue":"function(vue) {\n  return this.getVueFromVnode(vue.$parent);\n}\n","getVueFromElement":"function(el) {\n  return this.getVueFromVnode(this.getVnodeFromElement(el));\n}\n","getVnodeFromElement":"function(el) {\n  if (!el) return null;\n  if (el.__vue__) return el.__vue__;\n  return this.getVnodeFromElement(el.parentElement);\n}\n","getVueFromVnode":"// Skip vnodes like <keep-alive>, <transition>, etc.\nfunction(vnode) {\n  if (!vnode) return null;\n  if (this.vNodeIsVue(vnode)) return vnode;\n  return this.getVueFromVnode(vnode.$parent);\n}\n","vNodeIsVue":"function(vnode) {\n  if ([`transition`, `transition-group`, `keep-alive`].includes(vnode.$options._componentTag)) return false;\n  return true;\n}\n","updateChains":"function(vue) {\n  this.parentChainUIDs = this.getParentChainUIDs(vue);\n  this.childChainUIDs = this.getChildChainUIDs(vue);\n}\n"},"computed":null,"watch":{"hoveredElement":"function(newEl, oldEl) {\n  const vue = this.getVueFromElement(newEl);\n  this.hoveredVueUID = vue?._uid;\n  this.updateChains(vue);\n}\n","hoveredVueUID":{"handler":"function(newVueUID, oldVueUID) {\n  if (oldVueUID) this.$root.vm.getVue(oldVueUID)?.$el.classList.remove(`highlighted2`);\n  if (newVueUID) this.$root.vm.getVue(newVueUID)?.$el.classList.add(`highlighted2`);\n}\n","immediate":true},"selectedVueUID":{"handler":"function(newVueUID, oldVueUID) {\n  const vue = this.$root.vm.getVue(newVueUID);\n  this.updateChains(vue);\n}\n","immediate":true}},"style":{"div":{"font-family":"monospace"},".parent-chain":{"margin-top":"2em"},".parent-chain > :nth-child(1)":{"margin-left":"0.5em"},".parent-chain > :nth-child(2)":{"margin-left":"1em"},".parent-chain > :nth-child(3)":{"margin-left":"1.5em"},".parent-chain > :nth-child(4)":{"margin-left":"2em"},".parent-chain > :nth-child(5)":{"margin-left":"2.5em"},".child-chain":{"margin-left":"4em"}},"name":"ide-component-picker","template":"<div class=\"comp-ide-component-picker\" path=\"-646340253.\"><ui-keyboard on_ctrl=\"onCtrlKey\" path=\"-646340253.0\"></ui-keyboard><ui-mouse on_hovered-element=\"onHoveredElement\" :global=\"true\" path=\"-646340253.1\"></ui-mouse><ui-context-window ref=\"context1\" :global=\"true\" :visible=\"showPicker\" icon=\"📦\" :title=\"getTitle(hoveredVueUID)\" path=\"-646340253.2\"><template v-slot:content path=\"-646340253.2.0\"><div class=\"flex flex-column gap-1\" path=\"-646340253.2.0.0\"><ide-component-editor :vue-uid=\"selectedVueUID||hoveredVueUID\" path=\"-646340253.2.0.0.0\"></ide-component-editor><div class=\"parent-chain\" path=\"-646340253.2.0.0.1\"><ide-component-title v-for=\"uid in parentChainUIDs\" :item=\"$root.vm.vues[uid]\" :class=\"{ 'selected': uid === selectedVueUID }\" on_click=\"selectVue(uid)\" path=\"-646340253.2.0.0.1.0\"></ide-component-title></div><div class=\"child-chain\" path=\"-646340253.2.0.0.2\"><ide-component-title v-for=\"uid in childChainUIDs\" :item=\"$root.vm.vues[uid]\" :class=\"{ 'selected': uid === selectedVueUID }\" on_click=\"selectVue(uid)\" path=\"-646340253.2.0.0.2.0\"></ide-component-title></div></div></template></ui-context-window></div>"}},{"name":"ide.component.state.watches","path":"\\ide\\component\\state\\watches.ws.yaml","source":{"dom":{"div#1":{"h3":{"v-text":"'State Watches'"},"div#2":{"v-text":"stateItems"},"div#3":{"div#4":{"v-if":"previewedStateItem","ide.title#1":{":item":"previewedStateItem"},"ui.value.any#1":{":value":"previewedStateItem.newValue"}}},"div#5":{"div#6":{"v-for":"stateItem in stateItems","ide.title#2":{":item":"stateItem"},"ui.value.any#2":{":value":"stateItem.newValue"}}}}},"data":{"previewedStateItem":null,"stateItems":[]},"mounted":"function() {\n  this.$root.$on(\"preview-state-item\", (stateItem) => {\n    this.previewedStateItem = stateItem;\n  });\n  this.$root.$on(\"watch-state-item\", (stateItem) => {\n    this.stateItems.push(stateItem);\n    console.log(stateItem);\n  });\n}\n","name":"ide-component-state-watches","template":"<div class=\"comp-ide-component-state-watches\" path=\"1039616747.\"><h3 v-text=\"'State Watches'\" path=\"1039616747.0\"></h3><div v-text=\"stateItems\" path=\"1039616747.1\"></div><div path=\"1039616747.2\"><div v-if=\"previewedStateItem\" path=\"1039616747.2.0\"><ide-title :item=\"previewedStateItem\" path=\"1039616747.2.0.0\"></ide-title><ui-value-any :value=\"previewedStateItem.newValue\" path=\"1039616747.2.0.1\"></ui-value-any></div></div><div path=\"1039616747.3\"><div v-for=\"stateItem in stateItems\" path=\"1039616747.3.0\"><ide-title :item=\"stateItem\" path=\"1039616747.3.0.0\"></ide-title><ui-value-any :value=\"stateItem.newValue\" path=\"1039616747.3.0.1\"></ui-value-any></div></div></div>"}},{"name":"ide.component.style","path":"\\ide\\component\\style.ws.yaml","source":{"dom":{"style":{":class":"component.name","v-html":"css"}},"props":{"component":null},"data":{"css":null},"methods":{"getCss":"function(component) {\n  if (!component?.source?.style) return null;\n  const template = this.$root.templates.style;\n  let css = Handlebars.compile(template)(component);\n  css = this.htmlDecode(css);\n  return css;\n}\n","htmlDecode":"function(input) {\n  var doc = new DOMParser().parseFromString(input, \"text/html\");\n  return doc.documentElement.textContent;\n}\n"},"watch":{"component":{"handler":"function(component) {\n  this.css = this.getCss(component);\n}\n","immediate":true}},"name":"ide-component-style","template":"<style class=\"comp-ide-component-style\" :class=\"component.name\" v-html=\"css\" path=\"259364412.\"></style>"}},{"name":"ide.component.title","path":"\\ide\\component\\title.ws.yaml","source":{"dom":{"div#1":{"on_click":"$emit('click')","v-if":"vue","ui.highlighter":{":get-elements":"() => vue.$el","div#2":{"on_click":"onClick","ui.title":{"icon":"📦",":value":"vue.$options._componentTag"}}}}},"props":{"item":null},"methods":{"onClick":"function() {\n  console.log(this.vue);\n}\n"},"computed":{"vue":"function() {\n  if (!this.item) return null;\n  return this.item();\n}\n"},"name":"ide-component-title","template":"<div class=\"comp-ide-component-title\" on_click=\"$emit('click')\" v-if=\"vue\" path=\"259955427.\"><ui-highlighter :get-elements=\"() =&gt; vue.$el\" path=\"259955427.0\"><div on_click=\"onClick\" path=\"259955427.0.0\"><ui-title icon=\"📦\" :value=\"vue.$options._componentTag\" path=\"259955427.0.0.0\"></ui-title></div></ui-highlighter></div>"}},{"name":"ide.component.view.attribute","path":"\\ide\\component\\view\\attribute.ws.yaml","source":{"dom":{".grid":{".opacity-50":{"v-text":"item[0]"},"div":{"ui.value.any":{":value":"item[1]"}}}},"props":{"item":null},"style":{".grid":{"grid-template":"1fr / 6em 1fr"},"textarea":{"width":"15em"}},"name":"ide-component-view-attribute","template":"<div class=\"comp-ide-component-view-attribute grid\" path=\"-2070617496.\"><div class=\"opacity-50\" v-text=\"item[0]\" path=\"-2070617496.0\"></div><div path=\"-2070617496.1\"><ui-value-any :value=\"item[1]\" path=\"-2070617496.1.0\"></ui-value-any></div></div>"}},{"name":"ide.component.view.editor","path":"\\ide\\component\\view\\editor.ws.yaml","source":{"dom":{"div":{"v-if":"component","ui.tree":{":root":"[null, dom]",":initial-expanded":true,"item-type":"ide.component.view.node",":get-item":"(node) => node",":get-children":"(node) => $root.getViewChildNodes(node)"}}},"props":{"component":null},"data":{"dom":null},"watch":{"component":{"handler":"function(component) {\n  this.dom = this.$root.addPaths(component.name, component.source.dom);\n}\n","immediate":true}},"methods":null,"style":null,"name":"ide-component-view-editor","template":"<div class=\"comp-ide-component-view-editor\" v-if=\"component\" path=\"-1512907487.\"><ui-tree :root=\"[null, dom]\" :initial-expanded=\"true\" item-type=\"ide.component.view.node\" :get-item=\"(node) =&gt; node\" :get-children=\"(node) =&gt; $root.getViewChildNodes(node)\" path=\"-1512907487.0\"></ui-tree></div>"}},{"name":"ide.component.view.node","path":"\\ide\\component\\view\\node.ws.yaml","source":{"dom":{"div":{"v-if":"item","ui.highlighter":{":get-elements":"() => $root.getElementsFromViewNode(item)","ui.title":{":icon":"icon",":text":"item[0]"}},"ui.context.window":{":icon":"icon",":title":"item[0]","template":{"v-slot":"content","ide.component.view.attribute":{"v-for":"attr in getAttributes(item)",":item":"attr"}}}}},"props":{"item":null},"data":{"icon":null},"methods":{"getAttributes":"function(item) {\n  return Object.entries(item[1])\n    .filter(e => (e[0] != \"path\"))\n    .filter(e => (typeof e[1] != 'object'));\n}\n","getIcon":"function(item) {\n  if (this.$root.isComponentName(item[0])) return '📦';\n  return '📁';\n}\n"},"watch":{"item":{"handler":"function(item) {\n  this.icon = this.getIcon(item);\n}\n","immediate":true}},"name":"ide-component-view-node","template":"<div class=\"comp-ide-component-view-node\" v-if=\"item\" path=\"-971127114.\"><ui-highlighter :get-elements=\"() =&gt; $root.getElementsFromViewNode(item)\" path=\"-971127114.0\"><ui-title :icon=\"icon\" :text=\"item[0]\" path=\"-971127114.0.0\"></ui-title></ui-highlighter><ui-context-window :icon=\"icon\" :title=\"item[0]\" path=\"-971127114.1\"><template v-slot:content path=\"-971127114.1.0\"><ide-component-view-attribute v-for=\"attr in getAttributes(item)\" :item=\"attr\" path=\"-971127114.1.0.0\"></ide-component-view-attribute></template></ui-context-window></div>"}},{"name":"ide.component","path":"\\ide\\component.ws.yaml","source":{"dom":{"div":{"ui.title":{"icon":"📦",":value":"name"}}},"props":{"name":null,"source":null},"name":"ide-component","template":"<div class=\"comp-ide-component\" path=\"622738105.\"><ui-title icon=\"📦\" :value=\"name\" path=\"622738105.0\"></ui-title></div>"}},{"name":"ide.debug","path":"\\ide\\debug.ws.yaml","source":{"dom":{"div#1":{"ui.tabs":{":options":"contextMenuOptions","direction":"vertical","div#2":{"v-for":"(cm, index) in contextMenus","template":{"v-slot":"'tab'+index","ui.value.any":{":value":"{d: cm().$data, p:cm().$props}"}}}}}},"props":null,"data":{"contextMenus":[]},"mounted":"function() {\n  this.$root.$on(\"context-menu-mounted\", (contextMenu) => {\n  });\n  this.$root.$on(\"context-menu-unmounted\", () => {\n  });\n}\n","computed":{"contextMenuOptions":"function() {\n}\n"},"name":"ide-debug","template":"<div class=\"comp-ide-debug\" path=\"-1760824817.\"><ui-tabs :options=\"contextMenuOptions\" direction=\"vertical\" path=\"-1760824817.0\"><div v-for=\"(cm, index) in contextMenus\" path=\"-1760824817.0.0\"><template v-slot:'tab'+index path=\"-1760824817.0.0.0\"><ui-value-any :value=\"{d: cm().$data, p:cm().$props}\" path=\"-1760824817.0.0.0.0\"></ui-value-any></template></div></ui-tabs></div>"}},{"name":"ide.state.tracker.item","path":"\\ide\\state\\tracker\\item.ws.yaml","source":{"dom":{"div#1":{"ui.context.window#1":{"v-if":"(item.type == 'm')",":icon":"getIcon(item.type)",":title":"item.key","template":{"v-slot":"content","pre":{"code":{"v-html":"getMethodBodyColored(item.compName, item.key)"}},"ui.textarea":{":value":"getMethodBody(item.compName, item.key)"}}},"ui.context.window#2":{"v-if":"showFieldContext(item)",":visible":"isHoveringOverValue",":icon":"$root.getIcon(item)",":title":"item.key","item-type":"ui-value-any",":bind-props":"{ value: item.newValue }",":key":"uid+'-'+item.key"},".grid":{":class":"item.type","on_click":"onItemClick(item)","div#2":{"v-text":"$root.getIcon(item)"},"div#3":{"v-text":"item.key"},".newValue":{"ui.value.preview":{":value":"item.newValue"},"on_mouseenter":"onHoverValue","on_mouseleave":"onUnhoverValue"}}}},"props":{"uid":null,"item":null},"data":{"isHoveringOverValue":false},"mounted":"function() {\n  this.$root.$on(\"state-changed\", this.onStateChanged.bind(this));\n}\n","methods":{"onHoverValue":"function() {\n  this.isHoveringOverValue = true;\n  this.$root.$emit(\"preview-state-item\", this.item);\n}\n","onUnhoverValue":"function() {\n  this.isHoveringOverValue = false;\n  this.$root.$emit(\"preview-state-item\", null);\n}\n","onItemClick":"function(item) {\n  this.$root.$emit(\"watch-state-item\", { uid: this.uid, key: item.key });\n  console.log(item);\n}\n","showFieldContext":"function(item) {\n  if (item.type == \"m\") return false;\n  if (typeof(item.newValue) == \"boolean\") return false;\n  if ([undefined, null].includes(item.newValue)) return false;\n  return true;\n}\n","getMethodBodyColored":"function(compName, methodName) {\n  let methodBody = this.getMethodBody(compName, methodName);\n  methodBody = Prism.highlight(methodBody, Prism.languages.javascript, 'javascript');\n  return methodBody;\n}\n","getMethodBody":"function(compName, methodName) {\n  const comp = this.$root.getComponent(compName);\n  if (!comp) return null;\n  const methodBody = comp.source.methods[methodName] || comp.source[methodName];\n  if (!methodBody) return null;\n  return methodBody;\n}\n","onStateChanged":"function(item) {\n  //if (item.key == this.item.key) this.refresh();\n}\n"},"watch":null,"style":{".grid":{"grid-template":"1fr / 1.2em 5em 5em","gap":"1em","width":"min-content","text-wrap":"nowrap","overflow":"hidden"},".grid > *":{"overflow":"hidden"},".comp-name":{"opacity":0.5},".newValue":{"color":"cyan"},".oldValue":{"opacity":0.5},".comp-ui-textarea":{"width":"40em","height":"20em","font-size":"110%"}},"name":"ide-state-tracker-item","template":"<div class=\"comp-ide-state-tracker-item\" path=\"841306122.\"><ui-context-window v-if=\"(item.type == 'm')\" :icon=\"getIcon(item.type)\" :title=\"item.key\" path=\"841306122.0\"><template v-slot:content path=\"841306122.0.0\"><pre path=\"841306122.0.0.0\"><code v-html=\"getMethodBodyColored(item.compName, item.key)\" path=\"841306122.0.0.0.0\"></code></pre><ui-textarea :value=\"getMethodBody(item.compName, item.key)\" path=\"841306122.0.0.1\"></ui-textarea></template></ui-context-window><ui-context-window v-if=\"showFieldContext(item)\" :visible=\"isHoveringOverValue\" :icon=\"$root.getIcon(item)\" :title=\"item.key\" item-type=\"ui-value-any\" :bind-props=\"{ value: item.newValue }\" :key=\"uid+'-'+item.key\" path=\"841306122.1\"></ui-context-window><div class=\"grid\" :class=\"item.type\" on_click=\"onItemClick(item)\" path=\"841306122.2\"><div v-text=\"$root.getIcon(item)\" path=\"841306122.2.0\"></div><div v-text=\"item.key\" path=\"841306122.2.1\"></div><div class=\"newValue\" on_mouseenter=\"onHoverValue\" on_mouseleave=\"onUnhoverValue\" path=\"841306122.2.2\"><ui-value-preview :value=\"item.newValue\" path=\"841306122.2.2.0\"></ui-value-preview></div></div></div>"}},{"name":"ide.state.tracker","path":"\\ide\\state\\tracker.ws.yaml","source":{"dom":{"div#1":{".flex.items-baseline":{"div#2":{"h3#1":{"ui.title#1":{"text":"Changes"}},"ul#1":{"class":"changes",":key":"key1","li#1":{"v-for":"change in $root.state.getRefChanges(uid).take(20)","class":"hoverable",":key":"change.id","on_mouseenter":"() => onMouseEnter(change)","on_mouseleave":"() => onMouseLeave(change)","ide.state.tracker.item#1":{":uid":"uid",":item":"change",":key":"change.id"}}}},"div#3":{"h3#2":{"ui.title#2":{"text":"State"}},"ul#2":{"li#2":{"v-for":"field in $root.vm.getFields(uid)","ide.state.tracker.item#2":{":uid":"uid",":item":"field",":key":"uid+'.'+field.key"}}}},"div#4":null}}},"props":{"uid":null},"data":{"key1":1},"mounted":"async function() {\n  this.$root.$on(\"state-changed\", this.onStateChanged.bind(this));\n}\n","methods":{"onStateChanged":"function(stateChange) {\n  if (this.uid == stateChange.uid) {\n    this.refresh();\n  }\n}\n","onMouseEnter":"function(item) {\n  this.$root.state.apply(this.uid, item);\n}\n","onMouseLeave":"function(item) {\n}\n","refresh":"function() {\n  this.key1++;\n}\n"},"style":{".comp-ui-title":{"border-radius":0,"border-bottom":"1px solid #000"},".flex":{"gap":"1em"},"ul":{"display":"flex","flex-direction":"column-reverse"},"ul:not(.changes) .grid":{"opacity":0.5},"li:hover":{"background":"#ffffff30","transition":"0s"}},"name":"ide-state-tracker","template":"<div class=\"comp-ide-state-tracker\" path=\"-483235177.\"><div class=\"flex items-baseline\" path=\"-483235177.0\"><div path=\"-483235177.0.0\"><h3 path=\"-483235177.0.0.0\"><ui-title text=\"Changes\" path=\"-483235177.0.0.0.0\"></ui-title></h3><ul class=\"changes\" :key=\"key1\" path=\"-483235177.0.0.1\"><li class=\"hoverable\" v-for=\"change in $root.state.getRefChanges(uid).take(20)\" :key=\"change.id\" on_mouseenter=\"() =&gt; onMouseEnter(change)\" on_mouseleave=\"() =&gt; onMouseLeave(change)\" path=\"-483235177.0.0.1.0\"><ide-state-tracker-item :uid=\"uid\" :item=\"change\" :key=\"change.id\" path=\"-483235177.0.0.1.0.0\"></ide-state-tracker-item></li></ul></div><div path=\"-483235177.0.1\"><h3 path=\"-483235177.0.1.0\"><ui-title text=\"State\" path=\"-483235177.0.1.0.0\"></ui-title></h3><ul path=\"-483235177.0.1.1\"><li v-for=\"field in $root.vm.getFields(uid)\" path=\"-483235177.0.1.1.0\"><ide-state-tracker-item :uid=\"uid\" :item=\"field\" :key=\"uid+'.'+field.key\" path=\"-483235177.0.1.1.0.0\"></ide-state-tracker-item></li></ul></div><div></div></div></div>"}},{"name":"ide.title","path":"\\ide\\title.ws.yaml","source":{"dom":{"h3":{"v-if":"item","ui.title":{":icon":"$root.getIcon(item)",":text":"item.key"}}},"props":{"item":null},"name":"ide-title","template":"<h3 class=\"comp-ide-title\" v-if=\"item\" path=\"-1745912300.\"><ui-title :icon=\"$root.getIcon(item)\" :text=\"item.key\" path=\"-1745912300.0\"></ui-title></h3>"}},{"name":"ide.vue.node","path":"\\ide\\vue.node.ws.yaml","source":{"dom":{"div":{"ui.title":{"icon":"📦",":text":"getText()",":number":"item?.$children.length"}}},"props":{"value":null},"methods":{"getText":"\nfunction() {\n  return (this.item?.$options?._componentTag || this.item?._vnode.tag);\n}\n"},"computed":{"item":"\nfunction() {\n  return (!this.value) ? null : this.value();\n}\n"},"name":"ide-vue-node","template":"<div class=\"comp-ide-vue-node\" path=\"345070638.\"><ui-title icon=\"📦\" :text=\"getText()\" :number=\"item?.$children.length\" path=\"345070638.0\"></ui-title></div>"}},{"name":"ide.workspace","path":"\\ide\\workspace.ws.yaml","source":{"dom":{"div#1":{"div#2":{"v-if":"showWorkspace","class":"workspace","h3":{"ui.title":{"icon":"🎄",":value":"$root.vm.vuesCount?.toLocaleString()"},"div#3":{"ui.button":{"icon":"♻","text":"refresh","on_click":"$root.reloadComponentsFromServer"}}},"ide.debug":null,"ide.component.picker":null},"div#4":{"ide.component.style":{"v-for":"comp in comps",":component":"comp"}}}},"props":{"comps":null},"data":{"showWorkspace":false},"mounted":"function() {\n  this.showWorkspace = (window.location.hostname == \"localhost\");\n}\n","methods":null,"computed":null,"name":"ide-workspace","style":{".comp-ide-workspace":{"position":"fixed","top":"1rem","right":"1rem","display":"flex","flex-direction":"column","gap":"3em","background":"#303030","padding":"1rem","box-shadow":"inset -5px 5px 5px #000","border":"1px solid gray","max-width":"20rem","overflow":"hidden","z-index":1000000,"transition":"1s"},".comp-ide-workspace:hover":null},"template":"<div class=\"comp-ide-workspace\" path=\"-1163457967.\"><div class=\"workspace\" v-if=\"showWorkspace\" path=\"-1163457967.0\"><h3 path=\"-1163457967.0.0\"><ui-title icon=\"🎄\" :value=\"$root.vm.vuesCount?.toLocaleString()\" path=\"-1163457967.0.0.0\"></ui-title><div path=\"-1163457967.0.0.1\"><ui-button icon=\"♻\" text=\"refresh\" on_click=\"$root.reloadComponentsFromServer\" path=\"-1163457967.0.0.1.0\"></ui-button></div></h3><ide-debug></ide-debug><ide-component-picker></ide-component-picker></div><div path=\"-1163457967.1\"><ide-component-style v-for=\"comp in comps\" :component=\"comp\" path=\"-1163457967.1.0\"></ide-component-style></div></div>"}},{"name":"page.admin.index","path":"\\page\\admin\\index.ws.yaml","source":{"dom":{"site":{":columns":2,"page-name":"admin","template#1":{"v-slot":"left"},"template#2":{"v-slot":"article",".app":{".column#1":{"ui.select#1":{":options":"Object.keys(options)","v-model":"catValue","input-type":"value"}},".column#2":{"ui.select#2":{":options":"options[catValue]","v-model":"eventValue","input-type":"value"}},".column#3":{"ui.select#3":{":options":"lastOptions","v-model":"lastValue","input-type":"value"}},"div":{".bars":{".bar":{"ui.chart2":{":app":"'MG'",":category":"catValue",":event":"eventValue",":last":"lastValue",":every":"every"}}}}}}}},"data":{"options":{"network":["requests","response.time"],"site":["active.time"]},"catValue":"network","eventValue":"requests","lastOptions":["1 month","1 week","1 day","1 hour"],"lastValue":"1 hour","barsValue":100},"methods":{"getCatOptions":"function() {\n}\n"},"computed":{"chartData":"function() {\n  return Array.from({ length: 10 }, (v, i) => i + 1);\n}\n","every":"function() {\n  if (!this.lastValue || !this.barsValue) return null;\n  if (this.lastValue.endsWith(\"hour\")) return (1).minutes().unitifyTime().withoutColors();\n  return (this.lastValue.deunitify() / this.barsValue).unitifyTime().withoutColors();\n}\n"},"style":{".app":{"display":"flex","gap":"1em","padding":"1em"},".app > div:not(.column)":{"flex-grow":1},".column":{"width":"fit-content"},".bars":{"display":"flex","flex-direction":"column","gap":"1rem"},".bar":{"width":"100%","display":"flex","margin":"auto","gap":"1rem"}},"name":"page-admin-index","template":"<site class=\"comp-page-admin-index\" :columns=\"2\" page-name=\"admin\" path=\"-1156850540.\"><template v-slot:left path=\"-1156850540.0\"></template><template v-slot:article path=\"-1156850540.1\"><div class=\"app\" path=\"-1156850540.1.0\"><div class=\"column\" path=\"-1156850540.1.0.0\"><ui-select :options=\"Object.keys(options)\" v-model=\"catValue\" input-type=\"value\" path=\"-1156850540.1.0.0.0\"></ui-select></div><div class=\"column\" path=\"-1156850540.1.0.1\"><ui-select :options=\"options[catValue]\" v-model=\"eventValue\" input-type=\"value\" path=\"-1156850540.1.0.1.0\"></ui-select></div><div class=\"column\" path=\"-1156850540.1.0.2\"><ui-select :options=\"lastOptions\" v-model=\"lastValue\" input-type=\"value\" path=\"-1156850540.1.0.2.0\"></ui-select></div><div path=\"-1156850540.1.0.3\"><div class=\"bars\" path=\"-1156850540.1.0.3.0\"><div class=\"bar\" path=\"-1156850540.1.0.3.0.0\"><ui-chart2 :app=\"'MG'\" :category=\"catValue\" :event=\"eventValue\" :last=\"lastValue\" :every=\"every\" path=\"-1156850540.1.0.3.0.0.0\"></ui-chart2></div></div></div></div></template></site>"}},{"name":"page.builder","path":"\\page\\builder.ws.yaml","source":{"dom":{"site":{"page-name":"builder",":columns":2,"template":{"v-slot":"article","transition":{"name":"slide-large","keep.alive":{"e.builder":{":builder":"builder","on_cancel":"onCancel"}}}}}},"props":null,"data":{"builder":null,"urlName":null},"mounted":"async function() {\n  this.$watch(() => this.$root.params.urlName, {\n    handler: async () => {\n      await this.init(this.$root.params.page, this.$root.params.urlName);\n    },\n    immediate: true\n  });\n}\n","methods":{"init":"async function (page, urlName) {\n  if (page != \"builder\") return;\n  if (urlName == this.urlName) return;\n  this.clear();\n  if (!urlName) return;\n  this.urlName = urlName;\n  this.builder = await this.$root.dbp.builders.select.one(urlName);\n}\n","clear":"function () {\n  this.builder = null;\n  this.urlName = null;\n}\n","onCancel":"function () {\n  this.$root.navigateTo('/');\n}\n"},"computed":null,"watch":null,"name":"page-builder","template":"<site class=\"comp-page-builder\" page-name=\"builder\" :columns=\"2\" path=\"1227252540.\"><template v-slot:article path=\"1227252540.0\"><transition name=\"slide-large\" path=\"1227252540.0.0\"><keep-alive path=\"1227252540.0.0.0\"><e-builder :builder=\"builder\" on_cancel=\"onCancel\" path=\"1227252540.0.0.0.0\"></e-builder></keep-alive></transition></template></site>"}},{"name":"page.category","path":"\\page\\category.ws.yaml","source":{"dom":{"site":{"page-name":"category","template":{"v-slot":"article",".grid-3":{"e.teaser#1":{"imageID":679668918,"title":"Barbie"},"e.teaser#2":{"imageID":680118397,"title":"Indiana Jones 5"},"e.teaser#3":{"imageID":680118400,"title":"Oppenheimer"},"e.teaser#4":{"imageID":680118403,"title":"Nepoleon"}},"h1":{"v-text":"'Movies'"}}}},"props":null,"name":"page-category","template":"<site class=\"comp-page-category\" page-name=\"category\" path=\"871284093.\"><template v-slot:article path=\"871284093.0\"><div class=\"grid-3\" path=\"871284093.0.0\"><e-teaser imageID=\"679668918\" title=\"Barbie\" path=\"871284093.0.0.0\"></e-teaser><e-teaser imageID=\"680118397\" title=\"Indiana Jones 5\" path=\"871284093.0.0.1\"></e-teaser><e-teaser imageID=\"680118400\" title=\"Oppenheimer\" path=\"871284093.0.0.2\"></e-teaser><e-teaser imageID=\"680118403\" title=\"Nepoleon\" path=\"871284093.0.0.3\"></e-teaser></div><h1 v-text=\"'Movies'\" path=\"871284093.0.1\"></h1></template></site>"}},{"name":"page.generator","path":"\\page\\generator.ws.yaml","source":{"dom":{"site":{"page-name":"generator",":columns":2,":title-image-id":"generator?.imageID",":title-text":"generator?.displayName",":title-url":"$root.url.generator(generator)",":title-key":"generator?.generatorID","template#1":{"v-slot":"article","ui.image":{"class":"hidden mb-l2","imageID":680118409,":aspect-ratio":"3/1"},"transition":{"name":"slide",":key":"generator?._id","div#1":{"v-if":"generator","div#2":{"class":"float-left mr-l1",":style":"{ width: '30%' }","e.instance":{":item":"instance",":show-footer":"false"}},"h1":{"v-text":"generator?.displayName"},".poem":{":style":"{ marginLeft: '32%', width: '68%' }","content.poem.stanza":{":item":"randomStanza"}},".description":{"v-if":"generator?.desc?.article","v-html":"$root.textToHtml(generator.desc.article.replace('Title: ', ''))"},"div#3":{"class":"float-clear"}}}},"template#2":{"v-slot":"middle","content.stream":{"ref":"contentStream1","item-type":"e.instance",":get-more-items":"getMoreInstances","grid-class":"grid-3"}},"template#3":{"v-slot":"left","e.instance.create":{"v-if":"showCreateInstance",":generator":"generator","on_instance-created":"onInstanceCreated"},"h3":{"v-text":"'See also'"},"e.generator.list":{":generators":"recommendationItems"}},"template#4":{"v-slot":"right"}}},"data":{"urlName":null,"generator":null,"instance":null,"poem":null,"randomStanza":null,"recommendationItems":[],"showCreateInstance":false},"mounted":"async function() {\n  this.$watch(() => this.$root.params.urlName, {\n    handler: async () => {\n      await this.init(this.$root.params.page, this.$root.params.urlName);\n    },\n    immediate: true\n  });\n}\n","methods":{"init":"async function(page, urlName) {\n  const dbp = this.$root.dbp;\n  if (page != \"generator\") return;\n  if (urlName == this.urlName) return;\n  this.clear();\n  if (!urlName) return;\n  this.urlName = urlName;\n  try\n  {\n    this.$root.isLoading++;\n    this.generator = !this.urlName ? null : await dbp.generators.select.one(null, this.urlName);\n    this.recommendationItems.replace(async() => await dbp.generators.select.related(this.urlName), 300, gen => gen.generatorID);\n    this.$refs.contentStream1?.reset();\n    setTimeout(() => {\n      this.poem = this.generator?.desc?.poem;\n    }, 500);\n    if (this.$root.params.page == \"generator\") {\n      this.$root.setDocumentTitle(this.generator?.displayName);\n    }\n  }\n  finally\n  {\n    this.$root.isLoading--;\n  }\n}\n","clear":"function() {\n  this.urlName = null;\n  this.generator = null;\n  this.poem = null;\n  this.recommendationItems = [];\n  this.$refs.contentStream1?.reset();\n}\n","getMoreInstances":"async function(pageIndex) {\n  await this.init();\n  if (!this.urlName) return [];\n  const items = await this.$root.dbp.instances.select.popular(\"en\", pageIndex, this.urlName)\n  return items;\n}\n","getRandomStanzas":"function(poem) {\n  if (!poem) return [];\n  // Return random stanzas\n  const stanzas = [...poem];\n  const result = [];\n  for (let i = 0; i < 1; i++) {\n    const index = Math.floor(Math.random() * stanzas.length);\n    result.push(stanzas[index]);\n    stanzas.splice(index, 1);\n  }\n  return result;\n}\n","onInstanceCreated":"function(instance) {\n  this.$refs.contentStream1?.add(instance);\n}\n"},"watch":{"generator":"async function(generator) {\n  if (!generator)\n  {\n    this.instance = null;\n    this.randomStanza = null;\n    this.showCreateInstance = false;\n    return;\n  }\n  this.instance = (await this.$root.dbp.instances.select.popular(\"en\", 0, generator.urlName)).shuffle()[0];\n  this.instance.text0 = null;\n  this.instance.text1 = null;\n  this.randomStanza = this.getRandomStanzas(generator.desc?.poem)[0];\n  setTimeout(() => {\n    this.showCreateInstance = true;\n  }, 200);\n}\n"},"style":{".comp-e-instance .footer":{"display":"none"},".comp-e-teaser":{"filter":"grayscale(1)"},".comp-e-teaser:hover":{"filter":"grayscale(0)"},".description":{"max-height":"15em","overflow":"auto","margin":"2em 0"},".description h3":{"font-size":"2rem","display":"inline-block"},".poem":null,".poem .comp-content-poem-stanza":{"margin":"1rem auto"},".poem .line:nth-child(1)":{"font-size":"160%"},".float-clear":{"clear":"both"}},"name":"page-generator","template":"<site class=\"comp-page-generator\" page-name=\"generator\" :columns=\"2\" :title-image-id=\"generator?.imageID\" :title-text=\"generator?.displayName\" :title-url=\"$root.url.generator(generator)\" :title-key=\"generator?.generatorID\" path=\"-38884812.\"><template v-slot:article path=\"-38884812.0\"><ui-image class=\"hidden mb-l2\" imageID=\"680118409\" :aspect-ratio=\"3/1\" path=\"-38884812.0.0\"></ui-image><transition name=\"slide\" :key=\"generator?._id\" path=\"-38884812.0.1\"><div v-if=\"generator\" path=\"-38884812.0.1.0\"><div class=\"float-left mr-l1\" :style=\"{ width: '30%' }\" path=\"-38884812.0.1.0.0\"><e-instance :item=\"instance\" :show-footer=\"false\" path=\"-38884812.0.1.0.0.0\"></e-instance></div><h1 v-text=\"generator?.displayName\" path=\"-38884812.0.1.0.1\"></h1><div class=\"poem\" :style=\"{ marginLeft: '32%', width: '68%' }\" path=\"-38884812.0.1.0.2\"><content-poem-stanza :item=\"randomStanza\" path=\"-38884812.0.1.0.2.0\"></content-poem-stanza></div><div class=\"description\" v-if=\"generator?.desc?.article\" v-html=\"$root.textToHtml(generator.desc.article.replace('Title: ', ''))\" path=\"-38884812.0.1.0.3\"></div><div class=\"float-clear\" path=\"-38884812.0.1.0.4\"></div></div></transition></template><template v-slot:middle path=\"-38884812.1\"><content-stream ref=\"contentStream1\" item-type=\"e.instance\" :get-more-items=\"getMoreInstances\" grid-class=\"grid-3\" path=\"-38884812.1.0\"></content-stream></template><template v-slot:left path=\"-38884812.2\"><e-instance-create v-if=\"showCreateInstance\" :generator=\"generator\" on_instance-created=\"onInstanceCreated\" path=\"-38884812.2.0\"></e-instance-create><h3 v-text=\"'See also'\" path=\"-38884812.2.1\"></h3><e-generator-list :generators=\"recommendationItems\" path=\"-38884812.2.2\"></e-generator-list></template><template v-slot:right path=\"-38884812.3\"></template></site>"}},{"name":"page.home","path":"\\page\\home.ws.yaml","source":{"dom":{"site":{":columns":2,"page-name":"home","template#1":{"v-slot":"article",".grid-3":{"class":"hidden","e.teaser#1":{"imageID":32,"title":"Advice Animals","url":"/c/advice-animals"},"e.teaser#2":{"imageID":679668918,"title":"Movies","url":"/c/movies"},"e.teaser#3":{"imageID":679668921,"title":"Anonymous Times"},"e.teaser#4":{"imageID":679668909,"title":"YouTube"}}},"template#2":{"v-slot":"left","e.generator.search":null,"e.thread.list":null},"template#3":{"v-slot":"middle","content.meet.the.meme":{"class":"mb-l2"},"content.stream":{"ref":"stream1","item-type":"e.instance",":get-more-items":"getMoreInstances","grid-class":"grid-3"}},"template#4":{"v-slot":"right"}}},"data":{"generators":[],"uniqueID":1},"mounted":"async function() {\n  this.threads = await this.$root.dbp.threads.select.all();\n  \n  this.$watch(() => this.$root.params.page, {\n    handler: async () => {\n      await this.init();\n    },\n    immediate: true\n  });\n}\n","methods":{"init":"async function() {\n  if (this.$root.params.page == \"home\")\n  {\n    this.$root.setDocumentTitle(null);\n    this.$refs.stream1?.reset();\n  }\n}\n","getMoreInstances":"async function(pageIndex) {\n  const items = await this.$root.dbp.instances.sample.popular(null, 15);\n  return items;\n}\n"},"style":{".comp-e-thread":{"margin-top":"6rem"},".comp-e-generator-wide img":{"aspect-ratio":"2 / 1"}},"name":"page-home","template":"<site class=\"comp-page-home\" :columns=\"2\" page-name=\"home\" path=\"838274270.\"><template v-slot:article path=\"838274270.0\"><div class=\"hidden grid-3\" path=\"838274270.0.0\"><e-teaser imageID=\"32\" title=\"Advice Animals\" url=\"/c/advice-animals\" path=\"838274270.0.0.0\"></e-teaser><e-teaser imageID=\"679668918\" title=\"Movies\" url=\"/c/movies\" path=\"838274270.0.0.1\"></e-teaser><e-teaser imageID=\"679668921\" title=\"Anonymous Times\" path=\"838274270.0.0.2\"></e-teaser><e-teaser imageID=\"679668909\" title=\"YouTube\" path=\"838274270.0.0.3\"></e-teaser></div></template><template v-slot:left path=\"838274270.1\"><e-generator-search></e-generator-search><e-thread-list></e-thread-list></template><template v-slot:middle path=\"838274270.2\"><content-meet-the-meme class=\"mb-l2\" path=\"838274270.2.0\"></content-meet-the-meme><content-stream ref=\"stream1\" item-type=\"e.instance\" :get-more-items=\"getMoreInstances\" grid-class=\"grid-3\" path=\"838274270.2.1\"></content-stream></template><template v-slot:right path=\"838274270.3\"></template></site>"}},{"name":"page.instance","path":"\\page\\instance.ws.yaml","source":{"dom":{"site":{"ref":"site1","page-name":"instance",":content-not-found":"contentNotFound",":recommendation-items":"recommendationItems","template#1":{"v-slot":"left","e.generator.search":null},"template#2":{"v-slot":"middle","e.instance":{"class":"mb-l6",":item":"instance",":show-full-footer":true},"content.stream":{"ref":"stream1","item-type":"e.instance",":item-props":"{ showFullFooter: true }",":get-more-items":"getMoreInstances","grid-class":"grid-1"}}}},"data":{"instance":null,"generator":null,"recommendationItems":[],"contentNotFound":false},"mounted":"async function() {\n  this.$watch(() => this.$root.params.page, {\n    handler: async () => {\n      await this.init(this.$root.params.page, this.$root.params.instanceID);\n    },\n    immediate: true\n  });\n  this.$watch(() => this.$root.params.instanceID, {\n    handler: async () => {\n      await this.init(this.$root.params.page, this.$root.params.instanceID);\n    },\n    immediate: true\n  });\n}\n","methods":{"init":"async function(page, instanceID) {\n  this.clear();\n  if (page != \"instance\") return;\n  if (!instanceID) return;\n  if (instanceID == this.instance?._id) return;\n  try\n  {\n    this.$root.isLoading++;\n    const dbp = this.$root.dbp;\n    this.instance = await dbp.instances.select.one(instanceID);\n    if (!this.instance) {\n      this.contentNotFound = true;\n      return;\n    }\n    this.generator = await dbp.generators.select.one(this.instance.generatorID);\n    this.recommendationItems = await dbp.generators.select.related(this.generator.urlName);\n    this.$refs.stream1?.reset();\n    if (page == \"instance\") {\n      this.$root.setDocumentTitle(this.$root.getInstanceText(this.instance));\n    }\n  }\n  finally\n  {\n    this.$root.isLoading--;\n  }\n}\n","getMoreInstances":"async function(pageIndex) {\n  // Wait until instance is loaded\n  await this.$root.wait(() => this.instance);\n  let instances = await this.$root.dbp.instances.select.popular(\"en\", pageIndex, this.instance?.urlName);\n  instances = instances.filter(inst => inst._id != this.instance?._id);\n  return instances;\n}\n","clear":"function() {\n  this.$refs.stream1.clear();\n  this.instance = null;\n  this.generator = null;\n  this.recommendationItems = [];\n  this.contentNotFound = false;\n}\n"},"style":null,"name":"page-instance","template":"<site class=\"comp-page-instance\" ref=\"site1\" page-name=\"instance\" :content-not-found=\"contentNotFound\" :recommendation-items=\"recommendationItems\" path=\"1375900948.\"><template v-slot:left path=\"1375900948.0\"><e-generator-search></e-generator-search></template><template v-slot:middle path=\"1375900948.1\"><e-instance class=\"mb-l6\" :item=\"instance\" :show-full-footer=\"true\" path=\"1375900948.1.0\"></e-instance><content-stream ref=\"stream1\" item-type=\"e.instance\" :item-props=\"{ showFullFooter: true }\" :get-more-items=\"getMoreInstances\" grid-class=\"grid-1\" path=\"1375900948.1.1\"></content-stream></template></site>"}},{"name":"page.media","path":"\\page\\media.ws.yaml","source":{"dom":{"site":{"page-name":"media",":content-not-found":"contentNotFound",":columns":2,"template#1":{"v-slot":"article"},"template#2":{"v-slot":"left","div":{":style":"{ marginTop: '4em' }","v-if":"builder",".text-center":{"h2":{"v-text":"builder.name"},".mt-l1":{"ui.link":{":text":"'✏️ Create new'",":url":"'/b/'+builder?.urlName"}}}}},"template#3":{"v-slot":"middle","transition":{"name":"slide-large","e.media":{"v-if":"media",":key":"media._id",":item":"media"}},".mt-l4":{"content.stream":{"ref":"contentStream1","item-type":"e.media",":get-more-items":"getMoreMedias","grid-class":"grid-1"}}}}},"data":{"media":null,"temp":null,"builder":null,"contentNotFound":false},"mounted":"async function() {\n  this.$watch(() => this.$root.params.mediaID, {\n    handler: async () => {\n      await this.init(this.$root.params.mediaID);\n    },\n    immediate: true\n  });\n}\n","methods":{"init":"async function() {\n  const dbp = this.$root.dbp;\n  this.clear();\n  if (!this.$root.params.mediaID) return;\n  try\n  {\n    this.$root.isLoading++;\n    this.media = await dbp.medias.select.one(this.$root.params.mediaID);\n    if (!this.media) this.contentNotFound = true;\n    if (this.$root.params.page == \"media\") {\n      this.$root.setDocumentTitle(this.$root.getMediaText(this.media));\n    }\n  }\n  finally\n  {\n    this.$root.isLoading--;\n  }\n}\n","clear":"function() {\n  this.media = null;\n  this.contentNotFound = false;\n  this.$refs.contentStream1?.clear();\n}\n","getMoreMedias":"async function(pageIndex, fromMediaID) {\n  if (!this.media?.builderID) return [];\n  if (!fromMediaID) fromMediaID = this.media?._id;\n  return await this.$root.dbp.medias.select.new(this.media?.builderID, fromMediaID);\n}\n"},"watch":{"media":{"handler":"async function(media) {\n  this.builder = !media ? null : await this.$root.getBuilder(media.builderID);\n}\n"}},"style":null,"name":"page-media","template":"<site class=\"comp-page-media\" page-name=\"media\" :content-not-found=\"contentNotFound\" :columns=\"2\" path=\"221009861.\"><template v-slot:article path=\"221009861.0\"></template><template v-slot:left path=\"221009861.1\"><div :style=\"{ marginTop: '4em' }\" v-if=\"builder\" path=\"221009861.1.0\"><div class=\"text-center\" path=\"221009861.1.0.0\"><h2 v-text=\"builder.name\" path=\"221009861.1.0.0.0\"></h2><div class=\"mt-l1\" path=\"221009861.1.0.0.1\"><ui-link :text=\"'✏️ Create new'\" :url=\"'/b/'+builder?.urlName\" path=\"221009861.1.0.0.1.0\"></ui-link></div></div></div></template><template v-slot:middle path=\"221009861.2\"><transition name=\"slide-large\" path=\"221009861.2.0\"><e-media v-if=\"media\" :key=\"media._id\" :item=\"media\" path=\"221009861.2.0.0\"></e-media></transition><div class=\"mt-l4\" path=\"221009861.2.1\"><content-stream ref=\"contentStream1\" item-type=\"e.media\" :get-more-items=\"getMoreMedias\" grid-class=\"grid-1\" path=\"221009861.2.1.0\"></content-stream></div></template></site>"}},{"name":"page.test","path":"\\page\\test.ws.yaml","source":{"dom":{"site":{"page-name":"test",":columns":2,"template":{"v-slot":"article","ui.select":{":options":"builders","input-type":"value","direction":"horizontal",":get-item-key":"(item) => item._id",":get-item-text":"(item) => item.name","v-model":"selectedBuilder"},"transition":{"name":"slide-large","keep.alive":{"e.builder":{":builder":"selectedBuilder"}}}}}},"props":null,"data":{"builders":[],"selectedBuilder":null},"mounted":"async function() {\n  this.builders = await this.$root.dbp.builders.select.all();\n}\n","computed":null,"watch":null,"name":"page-test","template":"<site class=\"comp-page-test\" page-name=\"test\" :columns=\"2\" path=\"838622353.\"><template v-slot:article path=\"838622353.0\"><ui-select :options=\"builders\" input-type=\"value\" direction=\"horizontal\" :get-item-key=\"(item) =&gt; item._id\" :get-item-text=\"(item) =&gt; item.name\" v-model=\"selectedBuilder\" path=\"838622353.0.0\"></ui-select><transition name=\"slide-large\" path=\"838622353.0.1\"><keep-alive path=\"838622353.0.1.0\"><e-builder :builder=\"selectedBuilder\" path=\"838622353.0.1.0.0\"></e-builder></keep-alive></transition></template></site>"}},{"name":"page.thread","path":"\\page\\thread.ws.yaml","source":{"dom":{"site":{"page-name":"thread","template#1":{"v-slot":"left","e.thread.list":null},"template#2":{"v-slot":"middle","e.thread":{"v-model":"thread"},"e.post.create":{"v-if":"threadNotFound"}}}},"data":{"thread":null,"threadNotFound":false},"computed":{"threadID":"function() {\n  return this.$root.params.threadID;\n}\n"},"mounted":"async function() {\n}\n","watch":{"threadID":{"handler":"async function() {\n  if (this.$root.params.page != \"thread\") return;\n  try\n  {\n    this.$root.isLoading++;\n    this.threadNotFound = false;\n    this.thread = (!this.threadID) ? null : (await this.$root.dbp.threads.select.one(this.threadID));\n    this.threadNotFound = (this.threadID && !this.thread);\n  }\n  finally\n  {\n    this.$root.isLoading--;\n  }\n}\n","immediate":true},"threadNotFound":{"handler":"function(newTNF) {\n  this.$root.error = (!newTNF ? null : \"Thread not found\");\n}\n","immediate":true}},"methods":null,"name":"page-thread","style":null,"template":"<site class=\"comp-page-thread\" page-name=\"thread\" path=\"-1535040951.\"><template v-slot:left path=\"-1535040951.0\"><e-thread-list></e-thread-list></template><template v-slot:middle path=\"-1535040951.1\"><e-thread v-model=\"thread\" path=\"-1535040951.1.0\"></e-thread><e-post-create v-if=\"threadNotFound\" path=\"-1535040951.1.1\"></e-post-create></template></site>"}},{"name":"site.banner","path":"\\site\\banner.ws.yaml","source":{"dom":{"div#1":{"div#2":{"class":"image"}}},"style":{".image":{"width":"calc(100% - 4em)","height":"calc(100% - 1em)","min-width":"20em","min-height":"4em","margin":"0.3em 0 0 3em","filter":"grayscale(1)","border-radius":"0.5em","background-size":"cover!important","background-position":"50% 30%!important"}},"name":"site-banner","template":"<div class=\"comp-site-banner\" path=\"1842927539.\"><div class=\"image\" path=\"1842927539.0\"></div></div>"}},{"name":"site.header","path":"\\site\\header.ws.yaml","source":{"dom":{".header":{".div1":{":style":"getStyle()","site.logo":null},".h-menu":{"ui.link":{"v-for":"builder in $root.builders",":text":"builder.name",":url":"$root.url.builder(builder)"}}}},"name":"site-header","mounted":"function() {\n  this.init();\n}\n","methods":{"init":"function() {\n  return;\n  const header = document.querySelector('.header');\n  const initialHeight = header.clientHeight / window.innerHeight * 100;\n  const scrollRate = 0.1;\n  // Slowly scroll the header to be smaller as the user scrolls\n  window.addEventListener('scroll', function() {\n    const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;\n    // Calculate the new height of the header based on scroll position\n    const newHeight = Math.max(initialHeight - scrollPosition * scrollRate, 15);\n    // Apply the new height to the header\n    const heightVh = `${newHeight}vh`;\n    header.style.height = heightVh;\n  });\n}\n","getStyle":"function() {\n  // get a random number between 0 and 20 inclusive\n  const index = Math.floor(Math.random() * 21);\n  const style = {};\n  //style.backgroundImage = `url('/img/banners/(${index}).jpg')`;\n  return style;\n}\n"},"style":{".comp-ui-large-title":{"position":"absolute;","bottom":"2rem"},".header":{"background-color":"black","border-radius":0},".div1":{"width":"100%","display":"flex","filter":"grayscale(1) brightness(0.8)"},".h-menu":{"display":"flex","justify-content":"space-around","font-size":"160%"}},"template":"<div class=\"comp-site-header header\" path=\"2017999636.\"><div class=\"div1\" :style=\"getStyle()\" path=\"2017999636.0\"><site-logo></site-logo></div><div class=\"h-menu\" path=\"2017999636.1\"><ui-link v-for=\"builder in $root.builders\" :text=\"builder.name\" :url=\"$root.url.builder(builder)\" path=\"2017999636.1.0\"></ui-link></div></div>"}},{"name":"site.logo","path":"\\site\\logo.ws.yaml","source":{"dom":{"ui.link":{"url":"/","div":{".meme":{"v-text":"'meme'"},".generator":{"v-text":"'generator'"}}}},"style":{".comp-site-logo":{"background":"black;","padding":"1em;","position":"relative;"},".meme":{"font-size":"6vh"},".generator":{"font-size":"3vh"},"div":{"font-family":"impact","text-transform":"uppercase","line-height":"1em","text-align":"center","top":"-0.1rem","text-shadow":"-6px 6px 3px #000","opacity":1}},"name":"site-logo","template":"<ui-link class=\"comp-site-logo\" url=\"/\" path=\"-578776078.\"><div path=\"-578776078.0\"><div class=\"meme\" v-text=\"'meme'\" path=\"-578776078.0.0\"></div><div class=\"generator\" v-text=\"'generator'\" path=\"-578776078.0.1\"></div></div></ui-link>"}},{"name":"site.main","path":"\\site\\main.ws.yaml","source":{"dom":{"div#1":{"transition":{"name":"fade","content.title":{"class":"hidden","v-if":"titleText",":imageID":"titleImageId",":title":"titleText",":url":"titleUrl",":key":"titleKey"}},".article":{"slot#1":{"name":"article"}},"div#2":{":class":"'columns columns-' + columns",".left":{"ui.sticky#1":{":top":"leftStickyTop","slot#2":{"name":"left"}}},".middle":{"ui.error":{":error":"$root.error"},"h3#1":{"v-if":"contentNotFound","class":"error","v-text":"'Content not found'"},"slot#3":{"name":"middle"}},".right":{"ui.sticky#2":{"top":"140px","div#3":{"slot#4":{"name":"right"},"h3#2":{"v-if":"recommendationItems?.length","v-text":"'See also'"},"content.recommendations":{":items":"recommendationItems"}}}}}}},"props":{"titleImageId":null,"titleText":null,"titleUrl":null,"titleKey":null,"recommendationItems":null,"contentNotFound":false,"columns":3},"computed":{"leftStickyTop":"function() {\n  return \"120px\";\n}\n"},"style":{".article":{"margin-top":"3rem"},".comp-site-main":null,".error":{"margin-bottom":"3rem"}},"name":"site-main","template":"<div class=\"comp-site-main\" path=\"-578759680.\"><transition name=\"fade\" path=\"-578759680.0\"><content-title class=\"hidden\" v-if=\"titleText\" :imageID=\"titleImageId\" :title=\"titleText\" :url=\"titleUrl\" :key=\"titleKey\" path=\"-578759680.0.0\"></content-title></transition><div class=\"article\" path=\"-578759680.1\"><slot name=\"article\" path=\"-578759680.1.0\"></slot></div><div :class=\"'columns columns-' + columns\" path=\"-578759680.2\"><div class=\"left\" path=\"-578759680.2.0\"><ui-sticky :top=\"leftStickyTop\" path=\"-578759680.2.0.0\"><slot name=\"left\" path=\"-578759680.2.0.0.0\"></slot></ui-sticky></div><div class=\"middle\" path=\"-578759680.2.1\"><ui-error :error=\"$root.error\" path=\"-578759680.2.1.0\"></ui-error><h3 class=\"error\" v-if=\"contentNotFound\" v-text=\"'Content not found'\" path=\"-578759680.2.1.1\"></h3><slot name=\"middle\" path=\"-578759680.2.1.2\"></slot></div><div class=\"right\" path=\"-578759680.2.2\"><ui-sticky top=\"140px\" path=\"-578759680.2.2.0\"><div path=\"-578759680.2.2.0.0\"><slot name=\"right\" path=\"-578759680.2.2.0.0.0\"></slot><h3 v-if=\"recommendationItems?.length\" v-text=\"'See also'\" path=\"-578759680.2.2.0.0.1\"></h3><content-recommendations :items=\"recommendationItems\" path=\"-578759680.2.2.0.0.2\"></content-recommendations></div></ui-sticky></div></div></div>"}},{"name":"site.sidebar","path":"\\site\\sidebar.ws.yaml","source":{"dom":{"div":{"ui.list":{"item-type":"generator.small"}}},"name":"site-sidebar","style":null,"template":"<div class=\"comp-site-sidebar\" path=\"-576601163.\"><ui-list item-type=\"generator.small\" path=\"-576601163.0\"></ui-list></div>"}},{"name":"site","path":"\\site.ws.yaml","source":{"dom":{"div#1":{"transition":{"name":"fade","div#2":{":class":"getCssClass()","v-show":"(this.pageName == $root.params.page)","div#3":{"site.sidebar":null,"site.main":{":columns":"columns",":title-image-id":"titleImageId",":title-text":"titleText",":title-url":"titleUrl",":title-key":"titleKey",":recommendation-items":"recommendationItems",":content-not-found":"contentNotFound","template#1":{"v-slot":"article","slot#1":{"name":"article"}},"template#2":{"v-slot":"left","slot#2":{"name":"left"}},"template#3":{"v-slot":"middle","slot#3":{"name":"middle"}},"template#4":{"v-slot":"right","slot#4":{"name":"right"}}}}}}}},"name":"site","props":{"titleImageId":null,"titleText":null,"titleUrl":null,"titleKey":null,"getMoreItems":null,"recommendationItems":null,"pageName":null,"columns":3,"contentNotFound":false},"methods":{"getCssClass":"function() {\n  const cls = {};\n  cls['site-width'] = true;\n  return cls;\n}\n"},"style":{".comp-site":{"position":"relative","margin":"auto","padding":0}},"template":"<div class=\"comp-site\" path=\"3530567.\"><transition name=\"fade\" path=\"3530567.0\"><div :class=\"getCssClass()\" v-show=\"(this.pageName == $root.params.page)\" path=\"3530567.0.0\"><div path=\"3530567.0.0.0\"><site-sidebar></site-sidebar><site-main :columns=\"columns\" :title-image-id=\"titleImageId\" :title-text=\"titleText\" :title-url=\"titleUrl\" :title-key=\"titleKey\" :recommendation-items=\"recommendationItems\" :content-not-found=\"contentNotFound\" path=\"3530567.0.0.0.1\"><template v-slot:article path=\"3530567.0.0.0.1.0\"><slot name=\"article\" path=\"3530567.0.0.0.1.0.0\"></slot></template><template v-slot:left path=\"3530567.0.0.0.1.1\"><slot name=\"left\" path=\"3530567.0.0.0.1.1.0\"></slot></template><template v-slot:middle path=\"3530567.0.0.0.1.2\"><slot name=\"middle\" path=\"3530567.0.0.0.1.2.0\"></slot></template><template v-slot:right path=\"3530567.0.0.0.1.3\"><slot name=\"right\" path=\"3530567.0.0.0.1.3.0\"></slot></template></site-main></div></div></transition></div>"}},{"name":"ui.button","path":"\\ui\\button.ws.yaml","source":{"dom":{"div":{"button":{"v-if":"!isLoading","v-text":"text","on_click":"onClick"},"ui.loading":{"v-if":"isLoading"}}},"props":{"text":null,"click":null,"showLoading":true},"data":{"isLoading":0},"methods":{"onClick":"async function() {\n  this.$emit('click');\n  if (this.click)\n  {\n    if (this.showLoading) this.isLoading++;\n    try\n    {\n      await this.click();\n    }\n    finally\n    {\n      if (this.showLoading) this.isLoading--;\n    }\n  }\n}\n"},"style":{"button":{"margin":"0 0.5em","user-select":"none"}},"name":"ui-button","template":"<div class=\"comp-ui-button\" path=\"-1914507316.\"><button v-if=\"!isLoading\" v-text=\"text\" on_click=\"onClick\" path=\"-1914507316.0\"></button><ui-loading v-if=\"isLoading\" path=\"-1914507316.1\"></ui-loading></div>"}},{"name":"ui.card1","path":"\\ui\\card1.ws.yaml","source":{"dom":{".card":{"on_mouseenter":"onMouseEnter","on_mouseleave":"onMouseLeave","on_mousemove":"onMouseMove","ref":"card","slot":null,"div":{"class":"glow"}}},"data":{"bounds":null},"mounted":"function() {\n}\n","methods":{"onMouseEnter":"\nfunction(e) {\n  this.bounds = this.$refs.card.getBoundingClientRect();\n}\n","onMouseLeave":"\nfunction(e) {\n  this.$refs.card.style.transform = '';\n  this.$refs.card.style.background = '';\n}\n","onMouseMove":"\nfunction(e) {\n  const $card = this.$refs.card;\n\n  const mouseX = e.clientX;\n  const mouseY = e.clientY;\n  const leftX = mouseX - this.bounds.x;\n  const topY = mouseY - this.bounds.y;\n  const center = {\n    x: leftX - this.bounds.width / 2,\n    y: topY - this.bounds.height / 2\n  }\n  const distance = Math.sqrt(center.x**2 + center.y**2);\n  \n  $card.style.transform = `\n    scale3d(1.07, 1.07, 1.07)\n    rotate3d(\n      ${center.y / 100},\n      ${-center.x / 100},\n      0,\n      ${Math.log(distance)* 2}deg\n    )\n  `;\n  \n  $card.querySelector('.glow').style.backgroundImage = `\n    radial-gradient(\n      circle at\n      ${center.x * 2 + this.bounds.width/2}px\n      ${center.y * 2 + this.bounds.height/2}px,\n      #ffffff55,\n      #0000000f\n    )\n  `;\n}\n"},"style":{".card":{"font-weight":"bold","box-shadow":"0 1px 5px #00000099","border-radius":"0.5rem","background-size":"cover","position":"relative","overflow":"hidden","transition-duration":"300ms","transition-property":"transform, box-shadow","transition-timing-function":"ease-out","transform":"rotate3d(0)"},".card:hover":{"transition-duration":"150ms","box-shadow":"0 5px 20px 5px #00000044"},".card .glow":{"position":"absolute","width":"100%","height":"100%","left":0,"top":0,"background-image":"radial-gradient(circle at 50% -20%, #ffffff22, #0000000f)","pointer-events":"none"}},"name":"ui-card1","template":"<div class=\"comp-ui-card1 card\" on_mouseenter=\"onMouseEnter\" on_mouseleave=\"onMouseLeave\" on_mousemove=\"onMouseMove\" ref=\"card\" path=\"-2139643065.\"><slot></slot><div class=\"glow\" path=\"-2139643065.1\"></div></div>"}},{"name":"ui.chart","path":"\\ui\\chart.ws.yaml","source":{"dom":{".card":{":class":"getCssClass()","h2":{"class":"header","v-if":"header","v-text":"header"},".chart.flex":{".column1":{"ui.num#1":{"class":"opacity-50",":value":"scaled(minValue)"},"ui.num#2":{":value":"scaled(middleValue)"},"ui.num#3":{"class":"opacity-50",":value":"scaled(maxValue)"}},"div":{"canvas":{"ref":"canvas1","class":"ml-l1",":width":"canvasWidth",":height":"(canvasWidth / 2)","on_mousemove":"onMouseMove","on_mouseout":"onMouseOut"}}},".flex.flex-column.justify-center.items-center":{".title":{".icon":{"v-text":"icon"},".text":{"v-text":"title"}},"ui.num":{":value":"scaled(hoveredData || total)"}}}},"props":{"icon":null,"header":null,"total":null,"title":null,"getValue":"x => x","data":[],"scale":1,"color":null},"data":{"canvasWidth":400,"hoveredIndex":null},"methods":{"getCssClass":"\nfunction() {\n  const cls = {};\n  if (!this.data?.length) cls.empty = true;\n  if (this.color) cls[`${this.color}`] = true;\n  return cls;\n}\n","drawChart":"\nfunction(data) {\n  if (!this.data?.length) return;\n\n  this.ctx.clearRect(0, 0, this.width, this.height);\n  this.ctx.beginPath();\n  this.ctx.moveTo(this.paddingX, this.paddingY + this.chartHeight);\n  for (let i = 0; i < this.data.length; i++) {\n    const x = this.paddingX + i * this.step;\n    const y = this.paddingY + this.chartHeight - (this.getValueFunc(this.data[i]) - this.min) * this.stepY;\n    this.drawBar(x, this.getValueFunc(this.data[i]), '#ffffff80');\n  }\n  this.ctx.lineTo(this.paddingX + this.chartWidth, this.paddingY + this.chartHeight);\n  this.ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';\n  this.ctx.fill();\n  this.ctx.strokeStyle = '#ffffff80';\n  this.ctx.stroke();\n}\n","drawBar":"\nfunction(x, value, color) {\n  const y = this.paddingY + this.chartHeight - (value - this.min) * this.stepY;\n  this.ctx.fillStyle = color;\n  this.ctx.fillRect(x, y, this.step, this.chartHeight - y + this.paddingY);\n}\n","onMouseMove":"\nfunction(e) {\n  const rect = this.canvas.getBoundingClientRect();\n  const scaleX = this.canvas.width / rect.width;\n  const x = e.offsetX;\n  const i = Math.floor((x - this.paddingX) / this.step * scaleX);\n  this.hoveredIndex = i;\n}\n","onMouseOut":"\nfunction(e) {\n  this.hoveredIndex = null;\n}\n","getValueFunc":"\nfunction(value) {\n  let func = this.getValue;\n  if (typeof func === 'string') func = eval(func);\n  return func(value);\n}\n","scaled":"\nfunction(value) {\n  return value;\n  return Math.round(value * this.scale);\n}\n"},"watch":{"data":{"handler":"\nasync function(data) {\n  await this.$nextTick();\n  this.drawChart(data);\n}\n","immediate":true,"deep":true},"hoveredIndex":{"handler":"\nasync function(newIndex, oldIndex) {\n  if (newIndex === oldIndex) return;\n  await this.$nextTick();\n  this.drawChart(this.data);\n  if (newIndex !== null) {\n    const value = this.getValueFunc(this.data[newIndex]);\n    this.drawBar(this.hoveredX, value, '#ffffff80');\n  }\n}\n","immediate":true,"deep":true}},"computed":{"canvas":"function() { return this.$refs.canvas1; }","ctx":"function() { return this.canvas.getContext('2d'); }","width":"function() { return this.canvas.width; }","height":"function() { return this.canvas.height; }","padding":"function() { return 0; }","paddingX":"function() { return this.width * this.padding; }","paddingY":"function() { return this.height * this.padding; }","chartWidth":"function() { return this.width - this.paddingX * 2; }","chartHeight":"function () { return this.height - this.paddingY * 2; }","step":"function() { return this.chartWidth / this.data.length; }","stepY":"function() { return this.chartHeight / this.range; }","min":"\nfunction() {\n  if (!this.data?.length) return 0;\n  return Math.round(Math.min(...this.data.map(x => this.getValueFunc(x))));\n}\n","max":"\nfunction() {\n  if (!this.data?.length) return 0;\n  return Math.round(Math.max(...this.data.map(x => this.getValueFunc(x))) * 1.1);\n}\n","minValue":"\nfunction() {\n  return (this.data||[]).filter(v => v).min();\n}\n","averageValue":"\nfunction() {\n  return (this.data||[]).filter(v => v).average();\n}\n","middleValue":"\nfunction() {\n  return (this.minValue + this.maxValue) / 2;\n}\n","maxValue":"\nfunction() {\n  return (this.data||[]).filter(v => v).max();\n}\n","range":"\nfunction() {\n  return this.max - this.min;\n}\n","hoveredData":"\nfunction() {\n  if (this.hoveredIndex === null) return null;\n  const value = this.data[this.hoveredIndex];\n  return value;\n}\n","hoveredX":"\nfunction() {\n  if (this.hoveredIndex === null) return null;\n  return this.paddingX + this.hoveredIndex * this.step;\n}\n"},"name":"ui-chart","style":{"column1":{"width":"10%"},".chart > div":{"flex-grow":1},"canvas":{"width":"100%"},".card":{"padding":"0.5rem 1rem","background-color":"#ffffff30","border":"1px solid #e5e5e5","border-radius":"0.5em"},".green":{"background":"#00ff0040"},".red":{"background":"#ff000040"},".blue":{"background":"#00a0ff40"},".comp-ui-num, .title":{"font-size":"140%"},".column1 .comp-ui-num:nth-child(2)":{"position":"absolute","top":"50%","transform":"translateY(-50%)"},".column1 .comp-ui-num:nth-child(1)":{"position":"absolute","bottom":0}},"template":"<div class=\"comp-ui-chart card\" :class=\"getCssClass()\" path=\"-2139450364.\"><h2 class=\"header\" v-if=\"header\" v-text=\"header\" path=\"-2139450364.0\"></h2><div class=\"chart flex\" path=\"-2139450364.1\"><div class=\"column1\" path=\"-2139450364.1.0\"><ui-num class=\"opacity-50\" :value=\"scaled(minValue)\" path=\"-2139450364.1.0.0\"></ui-num><ui-num :value=\"scaled(middleValue)\" path=\"-2139450364.1.0.1\"></ui-num><ui-num class=\"opacity-50\" :value=\"scaled(maxValue)\" path=\"-2139450364.1.0.2\"></ui-num></div><div path=\"-2139450364.1.1\"><canvas class=\"ml-l1\" ref=\"canvas1\" :width=\"canvasWidth\" :height=\"(canvasWidth / 2)\" on_mousemove=\"onMouseMove\" on_mouseout=\"onMouseOut\" path=\"-2139450364.1.1.0\"></canvas></div></div><div class=\"flex flex-column justify-center items-center\" path=\"-2139450364.2\"><div class=\"title\" path=\"-2139450364.2.0\"><div class=\"icon\" v-text=\"icon\" path=\"-2139450364.2.0.0\"></div><div class=\"text\" v-text=\"title\" path=\"-2139450364.2.0.1\"></div></div><ui-num :value=\"scaled(hoveredData || total)\" path=\"-2139450364.2.1\"></ui-num></div></div>"}},{"name":"ui.chart2","path":"\\ui\\chart2.ws.yaml","source":{"dom":{".w-100pc":{"v-if":"every","ui.chart":{":class":"cssClass",":header":"getHeader()",":title":null,":data":"values",":color":"color",":scale":"scale"},"a":{"v-text":"url",":href":"url","target":"_blank"}}},"props":{"app":null,"category":null,"event":null,"last":null,"every":null,"scale":null},"data":{"values":[],"isBusy":0},"mounted":"function() {\n  this.fetchData();\n}\n","methods":{"fetchData":"\nasync function() {\n  this.isBusy++;\n  this.values.clear();\n  try\n  {\n    this.values = await (await fetch(this.url)).json();\n  }\n  finally\n  {\n    this.isBusy--;\n  }\n}\n","getHeader":"\nfunction() {\n  return `${this.event} every ${this.every} in the last ${this.last}`;\n}\n"},"computed":{"url":"\nfunction() {\n  try\n  {\n    let { app, category, event, last, every } = this;\n    last = last.deunitify().unitifyTime();\n    every = every.deunitify().unitifyTime();\n    let url = `https://db.memegenerator.net/analytics/${app}/${category}/${event}/last/${last}/every/${every}`;\n    url = url.withoutColors();\n    return url;\n  }\n  catch (ex)\n  {\n    return null;\n  }\n}\n","color":"\nfunction() {\n  return {\n    \"requests\": \"green\",\n    \"response.time\": \"blue\",\n  }[this.event] || \"\";\n}\n","cssClass":"\nfunction() {\n  const cls = {};\n  return cls;\n  if (this.isBusy) cls[\"opacity-40\"] = true;\n  return cls;\n}\n"},"watch":{"url":{"handler":"\nasync function() {\n  await this.fetchData();\n}\n","immediate":true}},"name":"ui-chart2","template":"<div class=\"comp-ui-chart2 w-100pc\" v-if=\"every\" path=\"-1898451794.\"><ui-chart :class=\"cssClass\" :header=\"getHeader()\" :data=\"values\" :color=\"color\" :scale=\"scale\" path=\"-1898451794.0\"></ui-chart><a v-text=\"url\" :href=\"url\" target=\"_blank\" path=\"-1898451794.1\"></a></div>"}},{"name":"ui.checkbox","path":"\\ui\\checkbox.ws.yaml","source":{"dom":{".flex":{":class":"getCssClass()","input":{"type":"checkbox",":checked":"checkedValue","on_change":"onInput(!checkedValue)"},"span":{"class":"clickable","v-text":"text","on_click":"onInput(!checkedValue)"}}},"props":{"value":null,"valueArray":null,"valueKey":null,"text":null,"size":"large"},"methods":{"getCssClass":"function() {\n  return `hoverable ${this.size}`;\n}\n","onInput":"function(value) {\n  if (this.valueArray && this.valueKey) {\n    this.toggleArrayValue(this.valueArray, this.valueKey);\n  } else {\n    this.$emit(\"input\", value);\n  }\n}\n","toggleArrayValue":"function(array, value) {\n  if (array.includes(value)) {\n    array.splice(array.indexOf(value), 1);\n  } else {\n    array.push(value);\n  }\n}\n"},"watch":null,"computed":{"checkedValue":"function() {\n  if (this.valueArray && this.valueKey)\n    return this.valueArray.includes(this.valueKey);\n  return this.value;\n}\n"},"style":{".normal input[type=checkbox]":{"width":"1em","height":"1em"},"span":{"flex-grow":1,"font-size":"120%"}},"name":"ui-checkbox","template":"<div class=\"comp-ui-checkbox flex\" :class=\"getCssClass()\" path=\"1049372125.\"><input type=\"checkbox\" :checked=\"checkedValue\" on_change=\"onInput(!checkedValue)\" path=\"1049372125.0\"/><span class=\"clickable\" v-text=\"text\" on_click=\"onInput(!checkedValue)\" path=\"1049372125.1\"></span></div>"}},{"name":"ui.color","path":"\\ui\\color.ws.yaml","source":{"dom":{"input":{"type":"color",":value":"value","on_input":"$emit('input', $event.target.value)"}},"props":{"value":null},"name":"ui-color","template":"<input class=\"comp-ui-color\" type=\"color\" :value=\"value\" on_input=\"$emit('input', $event.target.value)\" path=\"-2139231351.\"/>"}},{"name":"ui.context.window","path":"\\ui\\context\\window.ws.yaml","source":{"dom":{"div#1":{"ui.mouse#1":{":global":true,"on_move":"onMouseMove","on_right-click":"e => onRightClick(e, true)"},".context-menu":{"v-if":"isVisible","ref":"menu1",":class":"{ pinned: isPinned, inited: isInited, visible: isVisible }",":style":"style","h2":{"ui.mouse#2":{"on_drag":"onDrag","on_right-click":"onRightClick"},"slot#1":{"h3":{"ui.title":{":icon":"icon",":text":"title"}}}},"div#2":{"slot#2":{"name":"content"},"component":{"v-if":"itemType",":is":"itemType","v-bind":"bindProps"}}}}},"props":{"global":false,"visible":null,"icon":null,"title":null,"itemType":null,"bindProps":null},"data":{"lastUpdate":0,"space":20,"mousePos":{"x":0,"y":0},"globalPos":{"x":0,"y":0},"isInited":false,"isPinned":false,"isInsideContextElement":false},"mounted":"function() {\n  const element = (this.global ? window : this.$el.parentElement);\n  element.addEventListener(\"mouseenter\", this.onMouseEnterContext);\n  element.addEventListener(\"mouseleave\", this.onMouseLeaveContext);\n  this.$root.$emit(\"context-menu-mounted\", this);\n}\n","unmounted":"function() {\n  const element = (this.global ? window : this.$el.parentElement);\n  element.removeEventListener(\"mouseenter\", this.onMouseEnterContext);\n  element.removeEventListener(\"mouseleave\", this.onMouseLeaveContext);\n  this.$root.$emit(\"context-menu-unmounted\", this);\n}\n","methods":{"onDrag":"function(dpos) {\n  this.globalPos.x += dpos.dx;\n  this.globalPos.y += dpos.dy;\n  // Since child context menus are positioned relative to the parent\n  // we need to update their position in the other direction when dragging the parent\n  const childContexts = this.$root.getDescendants(this, this.$data._.comp.name);\n  for (const child of childContexts) {\n    // I have no idea what's going on here\n    child.globalPos.x -= 0.0001;\n    child.globalPos.y -= 0.0001;\n  }\n}\n","onMouseMove":"function(pos) {\n  if (!this.isVisible) return;\n  if (this.isPinned) return;\n  this.mousePos = pos;\n}\n","onMouseEnterContext":"function(e) {\n  this.isInsideContextElement = true;\n}\n","onMouseLeaveContext":"function() {\n  this.isInsideContextElement = false;\n}\n","onRightClick":"function(e, global) {\n  if (!e.ctrlKey) return;\n  if (!this.isVisible) return;\n  // We unpin it by right clicking the title\n  // Global right click is ignored if the menu is pinned\n  if (global && this.isPinned) return;\n  e.preventDefault();\n  e.stopPropagation();\n  this.isPinned = !this.isPinned;\n}\n"},"computed":{"isVisible":"function() {\n  if (this.isPinned) return true;\n  // .visible prop allows controlling the visibility from outside\n  if (this.visible != null) return this.visible;\n  if (this.global) return true;\n  if (this.isInsideContextElement) return true;\n  return false;\n}\n","localPos":"function() {\n  const pos = { ...this.globalPos };\n  if (this.global) return pos;\n  if (!this.$el) return pos;\n  const rect = this.$el.parentElement.getBoundingClientRect();\n  pos.x -= rect.left;\n  pos.y -= rect.top;\n  return pos;\n}\n","style":"function()\n{\n  const style = {};\n  style.position = (this.global ? \"fixed\" : \"absolute\");\n  const pos = (this.global ? this.globalPos : this.localPos);\n  style.left = ((pos.x + this.space) + \"px\");\n  style.top = ((pos.y + this.space) + \"px\");\n  return style;\n}\n"},"watch":{"mousePos":{"handler":"function() {\n  // When the mouse moves, update the position of the context menu\n  if (this.isPinned) return;\n  this.globalPos = this.mousePos;\n}\n","deep":true}},"style":{".context-menu.visible":{"display":"block"},".context-menu":{"display":"none","min-width":"20rem","padding":"1rem","background":"linear-gradient(to right, #303030, #101010)","opacity":0.7,"transition":"0s !important","cursor":"move","pointer-events":"none","z-index":1000},".context-menu.pinned":{"opacity":1,"border":"1px solid #ffffff60","box-shadow":"-12px 12px 6px #000000","transform":"translateY(-5em)","transition":"transform 0.3s !important","pointer-events":"all"},"h2":{"border-radius":0,"border-bottom":"1px solid #000","margin-bottom":"0.5em","user-select":"none"}},"name":"ui-context-window","template":"<div class=\"comp-ui-context-window\" path=\"1458497449.\"><ui-mouse :global=\"true\" on_move=\"onMouseMove\" on_right-click=\"e =&gt; onRightClick(e, true)\" path=\"1458497449.0\"></ui-mouse><div class=\"context-menu\" v-if=\"isVisible\" ref=\"menu1\" :class=\"{ pinned: isPinned, inited: isInited, visible: isVisible }\" :style=\"style\" path=\"1458497449.1\"><h2 path=\"1458497449.1.0\"><ui-mouse on_drag=\"onDrag\" on_right-click=\"onRightClick\" path=\"1458497449.1.0.0\"></ui-mouse><slot path=\"1458497449.1.0.1\"><h3 path=\"1458497449.1.0.1.0\"><ui-title :icon=\"icon\" :text=\"title\" path=\"1458497449.1.0.1.0.0\"></ui-title></h3></slot></h2><div path=\"1458497449.1.1\"><slot name=\"content\" path=\"1458497449.1.1.0\"></slot><component v-if=\"itemType\" :is=\"itemType\" v-bind=\"bindProps\" path=\"1458497449.1.1.1\"></component></div></div></div>"}},{"name":"ui.error","path":"\\ui\\error.ws.yaml","source":{"dom":{"transition":{"name":"slide",".error":{"v-if":"errorText","v-text":"errorText",":key":"errorText"}}},"props":{"error":null},"computed":{"errorText":"\nfunction() {\n  return this.error?.message || this.error;\n}\n"},"name":"ui-error","template":"<transition class=\"comp-ui-error\" name=\"slide\" path=\"-2137289170.\"><div class=\"error\" v-if=\"errorText\" v-text=\"errorText\" :key=\"errorText\" path=\"-2137289170.0\"></div></transition>"}},{"name":"ui.expand","path":"\\ui\\expand.ws.yaml","source":{"dom":{".flex":{"class":"hoverable","on_click":"$emit('input', !value)",".icon":{"v-text":"icon"},"label":{"v-text":"text"}}},"props":{"value":null,"text":null},"watch":null,"computed":{"icon":"function() {\n  return !this.value ? '➕' : '➖';\n}\n"},"style":{".comp-ui-expand":{"width":"1.3em","height":"1.5em"},".flex":{"background-color":"#ffffff30"},".flex:hover":{"background-color":"#ffffff40"},".flex > *":{"font-size":"120%","cursor":"pointer"},".icon":{"margin-right":"0.3rem","border":"1px solid gray"},"label":{"flex-grow":1}},"name":"ui-expand","template":"<div class=\"comp-ui-expand hoverable flex\" on_click=\"$emit('input', !value)\" path=\"-1825986764.\"><div class=\"icon\" v-text=\"icon\" path=\"-1825986764.0\"></div><label v-text=\"text\" path=\"-1825986764.1\"></label></div>"}},{"name":"ui.file.dropzone","path":"\\ui\\file\\dropzone.ws.yaml","source":{"dom":{".file-dropzone":{"ref":"dropArea1",".upload-button":{"v-if":"enabled","v-text":"'📤'","title":"📤 upload","on_click":"onClickUpload"},"input":{"class":"hidden","type":"file","ref":"fileInput","on_change":"onChangeFileInput"},"slot":null}},"props":{"enabled":true},"mounted":"function() {\n  const dropArea = this.$refs.dropArea1;\n  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\n    dropArea.addEventListener(eventName, this.onlyIfFiles(this.preventDefaults), false);\n  });\n  ['dragenter', 'dragover'].forEach(eventName => {\n    dropArea.addEventListener(eventName, this.onlyIfFiles(this.highlight.bind(this)), false);\n  });\n  ['dragleave', 'drop'].forEach(eventName => {\n    dropArea.addEventListener(eventName, this.onlyIfFiles(this.unhighlight.bind(this)), false);\n  });\n  dropArea.addEventListener('drop', this.onlyIfFiles(this.handleDrop.bind(this)), false);\n}\n","methods":{"onClickUpload":"function (e) {\n  this.$refs.fileInput.click();\n}\n","onChangeFileInput":"function (e) {\n  let files = e.target.files;\n  this.$emit('file-drop', files);\n}\n","handleDrop":"function (e) {\n  if (!this.enabled) return;\n  let dt = e.dataTransfer;\n  let files = dt.files;\n  this.$emit('file-drop', files);\n}\n","highlight":"function (e) {\n  if (!this.enabled) return;\n  this.$refs.dropArea1.classList.add('drop-possible');\n}\n","unhighlight":"function (e) {\n  if (!this.enabled) return;\n  this.$refs.dropArea1.classList.remove('drop-possible');\n  // Remove tooltip attribute\n  this.$refs.dropArea1.removeAttribute('tooltip');\n}\n","preventDefaults":"function (e) {\n  e.preventDefault()\n  e.stopPropagation()\n}\n","onlyIfFiles":"function (handler) {\n  return function (e) {\n    if (!e.dataTransfer.types.includes('Files')) return;\n    handler(e);\n  }\n}\n"},"style":{".file-dropzone":{"width":"100%","height":"100%"},".upload-button":{"position":"absolute","height":"fit-content !important","bottom":"0%","left":"50%","cursor":"pointer","z-index":10,"font-size":"1.5rem","filter":"grayscale(1)","transform":"translate(-50%, 0%)","opacity":0.6},".upload-button:hover":{"opacity":1},".file-dropzone:hover .upload-button":{"display":"block"},".drop-possible":{"border":"2px dashed #ccc","padding":"0.5rem","box-shadow":"inset -1em 1em 2em #000","transition":"0.3s"},".drop-possible::before":{"position":"absolute","top":"50%","left":"50%","transform":"translate(-50%, -50%)","font-size":"120%","text-transform":"uppercase","text-align":"center","text-shadow":"-2px 2px 1px #000","color":"#a0a0a0"}},"name":"ui-file-dropzone","template":"<div class=\"comp-ui-file-dropzone file-dropzone\" ref=\"dropArea1\" path=\"1956569459.\"><div class=\"upload-button\" v-if=\"enabled\" v-text=\"'📤'\" title=\"📤 upload\" on_click=\"onClickUpload\" path=\"1956569459.0\"></div><input class=\"hidden\" type=\"file\" ref=\"fileInput\" on_change=\"onChangeFileInput\" path=\"1956569459.1\"/><slot></slot></div>"}},{"name":"ui.highlighter","path":"\\ui\\highlighter.ws.yaml","source":{"dom":{"div":{"class":"hoverable","on_mouseenter":"onMouseEnter","on_mouseleave":"onMouseLeave","slot":null}},"props":{"getElements":null},"methods":{"getElementsArray":"function() {\n  const elements = this.getElements();\n  if (Array.isArray(elements)) return elements;\n  if (typeof elements[Symbol.iterator] === 'function') return [...elements];\n  return [elements];\n}\n","onMouseEnter":"function() {\n  this.getElementsArray().forEach(el => el.classList.add(\"highlighted\"));\n}\n","onMouseLeave":"function() {\n  this.getElementsArray().forEach(el => el.classList.remove(\"highlighted\"));\n}\n"},"name":"ui-highlighter","template":"<div class=\"comp-ui-highlighter hoverable\" on_mouseenter=\"onMouseEnter\" on_mouseleave=\"onMouseLeave\" path=\"71025671.\"><slot></slot></div>"}},{"name":"ui.image.options","path":"\\ui\\image\\options.ws.yaml","source":{"dom":{".options":{":class":"filter+'-options'",":tooltip":"filter","div#1":{"class":"option","v-for":"i in 10",":class":"getClass(i)","on_click":"onClick(i)","ui.image":{"v-if":"imageID",":img-style":"getStyle(i)",":imageID":"imageID",":square":true},"div#2":{"v-if":"!imageID","class":"box",":style":"getStyle(i)"}}}},"props":{"imageID":null,"filter":null,"reverse":false,"value":null},"methods":{"onClick":"function(i) {\n  if (i/10 == this.value) i = null;\n  this.$emit('input', i/10);\n}\n","getClass":"function(i) {\n  const cls = {};\n  cls['selected'] = (i/10 == this.value);\n  return cls;\n}\n","getStyle":"function(i) {\n  const valueFunc = (this.reverse) ? (i) => 10-i : (i) => i;\n  i = valueFunc(i);\n  return `filter: ${this.filter}(${(this.getValue(i))})`;\n}\n","getValue":"function(i) {\n  const ratio = (this.imageID ? 3 : 1);\n  const value = (this.filter == 'blur') ? `${i/ratio}px` : (i/10).toFixed(2);\n  return value;\n}\n"},"style":{".box":{"aspect-ratio":"1/1","background":"#ffff0080"},".options":{"display":"grid","grid-template":"1fr / repeat(10, 1fr)"},".options:not(.grayscale-options)":{"filter":"grayscale(1)"},".option":{"cursor":"pointer","border":"2px solid transparent","overflow":"hidden","transition":"0s"},".option:hover":{"border":"2px solid #ffffff40"},".selected":{"background":"none","border":"2px solid"}},"name":"ui-image-options","template":"<div class=\"comp-ui-image-options options\" :class=\"filter+'-options'\" :tooltip=\"filter\" path=\"907340593.\"><div class=\"option\" v-for=\"i in 10\" :class=\"getClass(i)\" on_click=\"onClick(i)\" path=\"907340593.0\"><ui-image v-if=\"imageID\" :img-style=\"getStyle(i)\" :imageID=\"imageID\" :square=\"true\" path=\"907340593.0.0\"></ui-image><div class=\"box\" v-if=\"!imageID\" :style=\"getStyle(i)\" path=\"907340593.0.1\"></div></div></div>"}},{"name":"ui.image.select","path":"\\ui\\image\\select.ws.yaml","source":{"dom":{".flex#1":{"ui.image":{":imageID":"value",":square":true},"ui.file.dropzone":{"on_file-drop":"onFileDrop",".dropzone":{".flex#2":{"class":"justify-center","div#1":{"v-text":"dropAreaText"},"div#2":{"ui.loading":null,"v-if":"isUploading"}}}}}},"props":{"value":null},"data":{"imageID":null,"noBgImageID":null,"isUploading":false},"methods":{"onFileDrop":"function (files) {\n  if (files.length != 1) return alertify.error(\"One file at a time, please.\");\n  this.uploadFile(files[0]);\n}\n","uploadFile":"async function(file) {\n  const image = await this.$root.uploadFile(file);\n  this.$emit('input', image._id);\n}\n"},"computed":{"dropAreaText":"function () {\n  if (this.isUploading) return \"uploading…\";\n  return \"drop image here\";\n}\n"},"watch":{"isUploading":"function (isUploading) {\n  this.$emit('uploading', isUploading);\n}\n"},"style":{".flex":{"gap":"0.5rem"},".comp-ui-image":{"width":"15% !important"},".comp-ui-file-dropzone":{"width":"85% !important","font-size":"160%","text-align":"center","font-family":"monospace"},".dropzone":{"border":"6px dashed white","opacity":0.3}},"name":"ui-image-select","template":"<div class=\"comp-ui-image-select flex\" path=\"-1667730935.\"><ui-image :imageID=\"value\" :square=\"true\" path=\"-1667730935.0\"></ui-image><ui-file-dropzone on_file-drop=\"onFileDrop\" path=\"-1667730935.1\"><div class=\"dropzone\" path=\"-1667730935.1.0\"><div class=\"justify-center flex\" path=\"-1667730935.1.0.0\"><div v-text=\"dropAreaText\" path=\"-1667730935.1.0.0.0\"></div><div v-if=\"isUploading\" path=\"-1667730935.1.0.0.1\"><ui-loading></ui-loading></div></div></div></ui-file-dropzone></div>"}},{"name":"ui.image","path":"\\ui\\image.ws.yaml","source":{"dom":{"div":{"component":{":is":"getCompType()","class":"image",":url":"url","img":{"ref":"image1",":class":"cssClass",":style":"imgStyle",":src":"src1","on_load":"onLoad"},"on_click":"$emit('click')"}}},"props":{"imageID":null,"url":null,"src":null,"square":null,"removeBackground":false,"aspectRatio":null,"objectPosition":null},"data":{"width":null,"height":null},"mounted":"async function () {\n  window.addEventListener(`resize`, this.recalc.bind(this));\n  // Detect if the image element changes its size\n  let resizeObserver = new ResizeObserver(this.recalc.bind(this));\n  resizeObserver.observe(this.$refs.image1);\n}\n","methods":{"onLoad":"function () {\n  this.$emit(\"load\", this.$refs.image1.src);\n  this.recalc();\n  [1,2,3].forEach(i => setTimeout(this.recalc.bind(this), i * 100))\n}\n","recalc":"function () {\n  if (!this.$refs.image1) return;\n  let rect = this.$refs.image1.getBoundingClientRect();\n  this.width = Math.round(rect.width);\n  this.height = Math.round(rect.height);\n  this.$emit(\"change\");\n}\n","getCssClass":"function () {\n  return { empty: !this.src, square: this.square };\n}\n","getCompType":"function () {\n  if (!this.url) return `div`;\n  return `ui-link`;\n}\n"},"computed":{"diagonal":"function () {\n  return Math.sqrt(this.width * this.width + this.height * this.height);\n}\n","src1":"function () {\n  if (this.imageID) return this.$root.url.image(this.imageID, true, this.removeBackground);\n  if (this.src) return this.src;\n  return this.emptySrc;\n}\n","emptySrc":"function () {\n  return '/img/empty.png';\n}\n","imgStyle":"function () {\n  const style = {};\n  style.aspectRatio = this.aspectRatio;\n  style.objectPosition = this.objectPosition;\n  return style;\n}\n","cssClass":"function () {\n  return this.getCssClass();\n}\n"},"style":{".comp-ui-image":{"overflow":"hidden","transition":"0s"},".image, img":{"width":"100%","object-fit":"cover"},".square":{"aspect-ratio":1}},"name":"ui-image","template":"<div class=\"comp-ui-image\" path=\"-2133760639.\"><component class=\"image\" :is=\"getCompType()\" :url=\"url\" on_click=\"$emit('click')\" path=\"-2133760639.0\"><img ref=\"image1\" :class=\"cssClass\" :style=\"imgStyle\" :src=\"src1\" on_load=\"onLoad\" path=\"-2133760639.0.0\"/></component></div>"}},{"name":"ui.infinite.scroll","path":"\\ui\\infinite.scroll.ws.yaml","source":{"dom":{"div":{"slot":null}},"data":{"lastEmit":null},"mounted":"function() {\n  window.addEventListener('scroll', () => this.onScroll());\n}\n","methods":{"onScroll":"\nfunction(force) {\n  if ((!force) && (this.lastEmit) && ((Date.now() - this.lastEmit) < 400)) return;\n  const distanceToBottom = document.documentElement.scrollHeight - (window.scrollY + window.innerHeight);\n  if (distanceToBottom < window.innerHeight) {\n    this.lastEmit = Date.now();\n    this.$emit('scroll');\n  }\n}\n"},"name":"ui-infinite-scroll","style":null,"template":"<div class=\"comp-ui-infinite-scroll\" path=\"795650189.\"><slot></slot></div>"}},{"name":"ui.json.editor","path":"\\ui\\json\\editor.ws.yaml","source":{"dom":{"div":{"ui.textarea":{"v-model":"yaml","on_focus":"isFocused = true","on_blur":"isFocused = false"},".error":{"v-if":"error","v-text":"error"}}},"props":{"value":null},"data":{"yaml":"","isFocused":false,"error":null},"methods":{"updateYamlFromObject":"\nfunction() {\n  let yaml = jsyaml.dump(this.value);\n  yaml = yaml.replace(/ null/g, \"\");\n  this.yaml = yaml;\n}\n"},"watch":{"value":"\n{\n  handler: function() {\n    if (this.isFocused) return;\n    this.updateYamlFromObject();\n  },\n  immediate: true\n}\n","yaml":"\n{\n  handler() {\n    try\n    {\n      this.error = null;\n      let jso = jsyaml.load(this.yaml);\n      this.$emit('input', jso);\n    }\n    catch (ex)\n    {\n      this.error = ex.message;\n    }\n  }\n}\n","isFocused":"\n{\n  handler(newValue) {\n    if (newValue) return;\n    // While editing, we're not updating the YAML from the object\n    // because that would cause the cursor to jump around\n    // When we lose focus, we update the YAML from the object\n    this.updateYamlFromObject();\n  }\n}\n"},"name":"ui-json-editor","template":"<div class=\"comp-ui-json-editor\" path=\"-208761639.\"><ui-textarea v-model=\"yaml\" on_focus=\"isFocused = true\" on_blur=\"isFocused = false\" path=\"-208761639.0\"></ui-textarea><div class=\"error\" v-if=\"error\" v-text=\"error\" path=\"-208761639.1\"></div></div>"}},{"name":"ui.keyboard","path":"\\ui\\keyboard.ws.yaml","source":{"dom":{"div":null},"data":{"ctrl":false},"mounted":"function() {\n  // Capture all keyboard events\n  window.addEventListener(\"keydown\", this.onKeyDownOrUp);\n  window.addEventListener(\"keyup\", this.onKeyDownOrUp);\n}\n","methods":{"onKeyDownOrUp":"function(e) {\n  this.ctrl = e.ctrlKey;\n}\n"},"watch":{"ctrl":"function(ctrl) {\n  this.$emit('ctrl', ctrl);\n}\n"},"name":"ui-keyboard","template":"<div class=\"comp-ui-keyboard\"></div>"}},{"name":"ui.large.title","path":"\\ui\\large\\title.ws.yaml","source":{"dom":{".title":{"v-text":"text"}},"props":{"text":null},"style":{".title":{"width":"auto","min-height":"1em","font-size":"8vh","font-family":"Times","line-height":0.8,"padding":"0 0 0.2em","-webkit-mask-image":"-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0.4)))","white-space":"normal","text-shadow":"-3px 3px 3px black","z-index":30,"transition":"1s"}},"name":"ui-large-title","template":"<div class=\"comp-ui-large-title title\" v-text=\"text\" path=\"-699352693.\"></div>"}},{"name":"ui.link","path":"\\ui\\link.ws.yaml","source":{"dom":{"a":{"class":"clickable2",":href":"url","on_click":"onClick","div":{"v-if":"text","v-text":"text"},"slot":null}},"props":{"text":null,"url":null},"methods":{"onClick":"function(e) {\n  if (!this.url) return;\n  e.preventDefault();\n  e.stopPropagation();\n  this.$root.navigateTo(this.url);\n}\n"},"style":null,"name":"ui-link","template":"<a class=\"comp-ui-link clickable2\" :href=\"url\" on_click=\"onClick\" path=\"-484387052.\"><div v-if=\"text\" v-text=\"text\" path=\"-484387052.0\"></div><slot></slot></a>"}},{"name":"ui.list","path":"\\ui\\list.ws.yaml","source":{"dom":{"transition.group":{"tag":"ul","name":"list",":class":"getMainCssClass()","li":{"v-for":"(item, index) in items",":key":"_getItemKey(item)",":class":"getCssClass(index)","slot":{":index":"index",":item":"item"},"on_click":"() => onItemClick({ item, index })"}}},"props":{"items":null,"selectedIndex":null,"direction":"vertical","getItemKey":null},"methods":{"_getItemKey":"function(item) {\n  if (this.getItemKey) return this.getItemKey(item);\n  return this.$root.getKey(item);\n}\n","getMainCssClass":"function() {\n  const cls = {\n    menu3: true,\n  };\n  cls[this.direction] = true;\n  return cls;\n}\n","onItemClick":"function(e) {\n  const newIndex = (e.index == this.selectedIndex) ? null : e.index;\n  this.$emit('input', newIndex);\n}\n","getCssClass":"function(index) {\n  return {\n    selected: (index == this.selectedIndex),\n  };\n}\n"},"name":"ui-list","style":{".horizontal":{"display":"flex","flex-direction":"row"},".horizontal > *":{"flex-grow":1,"text-align":"center"}},"template":"<transition-group class=\"comp-ui-list\" tag=\"ul\" name=\"list\" :class=\"getMainCssClass()\" path=\"-484386888.\"><li v-for=\"(item, index) in items\" :key=\"_getItemKey(item)\" :class=\"getCssClass(index)\" on_click=\"() =&gt; onItemClick({ item, index })\" path=\"-484386888.0\"><slot :index=\"index\" :item=\"item\" path=\"-484386888.0.0\"></slot></li></transition-group>"}},{"name":"ui.loading","path":"\\ui\\loading.ws.yaml","source":{"dom":{".center":{"img":{"class":"loading",":src":"$root.loadingImageUrl"}}},"style":{".center":{"display":"flex","justify-content":"center"},".loading":{"max-width":"min-content"}},"name":"ui-loading","template":"<div class=\"comp-ui-loading center\" path=\"875113442.\"><img class=\"loading\" :src=\"$root.loadingImageUrl\" path=\"875113442.0\"/></div>"}},{"name":"ui.mouse","path":"\\ui\\mouse.ws.yaml","source":{"dom":{"div":{"slot":null}},"props":{"global":false},"data":{"pos":{},"hoveredElement":null,"posQueue":[],"updateInterval":50,"isMounted":false,"dragStart":null},"mounted":"function() {\n  this.isMounted = true;\n  const element = this.global ? window : this.$el.parentElement;\n  element.addEventListener(\"mousedown\", this.onMouseDown);\n  element.addEventListener(\"mouseup\", this.onMouseUp);\n  window.addEventListener(\"mousemove\", this.onMouseMove);\n  element.addEventListener(\"contextmenu\", this.onContextMenu);\n  this.update();\n}\n","unmounted":"function() {\n  this.isMounted = false;\n  alertify.message(\"unmounted\");\n}\n","methods":{"onMouseDown":"function(e) {\n  if (e.button != 0) return;\n  if (this.dragStart) return;\n  this.dragStart = { x: e.clientX, y: e.clientY };\n}\n","onMouseUp":"function(e) {\n  if (e.button != 0) return;\n  this.dragStart = null;\n}\n","onMouseMove":"function(e) {     \n  const pos = { x: e.clientX, y: e.clientY };\n  this.posQueue.push(pos);\n}\n","onContextMenu":"function(e) {\n  if (!e.ctrlKey) return;\n  e.preventDefault();\n  e.stopPropagation();\n  this.$emit(\"right-click\", e);\n}\n","updateHoveredElement":"function(pos) {\n  var el = document.elementFromPoint(pos.x, pos.y);\n  this.hoveredElement = el;\n}\n","update":"async function() {\n  if (!this.isMounted) return;\n  const pos = this.posQueue.pop();\n  if (pos) this.pos = pos;\n  this.posQueue = [];\n  setTimeout(this.update.bind(this), this.updateInterval);\n}\n","cancelEvent":"function(e) {\n  e.preventDefault();\n  e.stopPropagation();\n}\n"},"watch":{"pos":{"handler":"function(pos) {\n  this.$emit(\"move\", pos);\n  if (this.dragStart) {\n    const delta = { dx: pos.x - this.dragStart.x, dy: pos.y - this.dragStart.y };\n    this.dragStart = pos;\n    this.$emit(\"drag\", delta);\n  }\n  this.updateHoveredElement(pos);\n}\n","deep":true},"hoveredElement":"function(newHoveredElement) {\n  this.$emit(\"hovered-element\", newHoveredElement);\n}\n"},"name":"ui-mouse","template":"<div class=\"comp-ui-mouse\" path=\"-2129987381.\"><slot></slot></div>"}},{"name":"ui.movable","path":"\\ui\\movable.ws.yaml","source":{"dom":{".movable":{":class":"{ enabled: enabled }","on_mousedown":"onMouseDown","on_mousemove":"onMouseMove","on_mouseup":"onMouseUp","on_mouseout":"onMouseUp","slot":null}},"props":{"value":null,"enabled":true},"data":{"isDragging":false,"dragStart":null,"dragStartPos":null},"mounted":"function() {\n}\n","methods":{"onMouseDown":"function(e) {\n  if (!this.enabled) return;\n  if (e.button !== 0) return;\n\n  e.preventDefault();\n  e.stopPropagation();\n\n  this.isDragging = true;\n  this.dragStart = { x: e.clientX, y: e.clientY };\n}\n","onMouseMove":"function(e) {\n  if (!this.enabled) return;\n  if (!this.isDragging) return;\n\n  e.preventDefault();\n  e.stopPropagation();\n\n  const dx = e.clientX - this.dragStart.x;\n  const dy = e.clientY - this.dragStart.y;\n\n  const normalizedDrag = {\n    dx: dx / this.$el.parentElement.offsetWidth,\n    dy: dy / this.$el.parentElement.offsetHeight\n  };\n  \n  const normalizedScale = -(dy / this.$el.parentElement.offsetHeight) * 2;\n\n  if (this.value)\n  {\n    const trans = JSON.parse(JSON.stringify(this.value));\n    if (e.ctrlKey)\n    {\n      trans.scale += normalizedScale;\n    }\n    else\n    {\n      const pos = trans.pos;\n      pos.x += normalizedDrag.dx;\n      pos.y += normalizedDrag.dy;\n    }\n    this.$emit('input', trans);\n  }\n\n  if (e.ctrlKey)\n  {\n    this.$emit(\"scale-by\", normalizedScale);\n  }\n  else\n  {\n    this.$emit(\"drag-by\", normalizedDrag);\n  }\n\n  this.dragStart = { x: e.clientX, y: e.clientY };\n}\n","onMouseUp":"function(e) {\n  if (!this.enabled) return;\n  e.preventDefault();\n  e.stopPropagation();\n\n  this.isDragging = false;\n}\n"},"style":{".movable.enabled":{"cursor":"move"},".movable":{"user-select":"none"}},"name":"ui-movable","template":"<div class=\"comp-ui-movable movable\" :class=\"{ enabled: enabled }\" on_mousedown=\"onMouseDown\" on_mousemove=\"onMouseMove\" on_mouseup=\"onMouseUp\" on_mouseout=\"onMouseUp\" path=\"1781914900.\"><slot></slot></div>"}},{"name":"ui.num","path":"\\ui\\num.ws.yaml","source":{"dom":{".flex":{"div":{"v-text":"number"},".letter":{"v-text":"unit"}}},"props":{"value":null},"data":null,"computed":{"humanized":"function() {\n  return this.value?.humanize();\n}\n","number":"function() {\n  // Get everything except the unit\n  return this.humanized?.match(/[^a-zA-Z]+/)?.first();\n}\n","unit":"function() {\n  return this.humanized?.match(/[a-zA-Z]+/)?.first();\n}\n"},"methods":null,"style":{".flex":{"align-items":"baseline;"},".letter":{"font-size":"70%;","opacity":"0.4;"}},"name":"ui-num","template":"<div class=\"comp-ui-num flex\" path=\"-846907092.\"><div v-text=\"number\" path=\"-846907092.0\"></div><div class=\"letter\" v-text=\"unit\" path=\"-846907092.1\"></div></div>"}},{"name":"ui.number","path":"\\ui\\number.ws.yaml","source":{"dom":{"div.card":{"div.top":{"div.icon":{"v-text":"icon"},"div.number":{"v-text":"formatNumber(value)"},"div.unit":{"v-text":"unit"}},"div.text":{"v-text":"text"}}},"props":{"value":null,"icon":null,"text":null,"unit":null},"methods":{"formatNumber":"\nfunction(number) {\n  if (number == null) return null;\n  if (typeof number === 'string') number = parseFloat(number);\n  return number.toLocaleString();\n}\n"},"style":{".card":{"line-height":1},".card > div":{"text-align":"center"},".top":{"display":"flex","align-items":"baseline","margin":"auto","width":"min-content","white-space":"nowrap"},".number":{"font-size":"500%"},".unit":{"font-size":"400%","opacity":0.4},".icon":{"font-size":"200%","margin":"auto"},".text":{"font-size":"120%","opacity":0.6,"line-height":"1.2em"}},"name":"ui-number","template":"<div-card class=\"comp-ui-number\" path=\"-1571183645.\"><div-top path=\"-1571183645.0\"><div-icon v-text=\"icon\" path=\"-1571183645.0.0\"></div-icon><div-number v-text=\"formatNumber(value)\" path=\"-1571183645.0.1\"></div-number><div-unit v-text=\"unit\" path=\"-1571183645.0.2\"></div-unit></div-top><div-text v-text=\"text\" path=\"-1571183645.1\"></div-text></div-card>"}},{"name":"ui.range","path":"\\ui\\range.ws.yaml","source":{"dom":{"div":{":tooltip":"text","input":{"type":"range",":value":"value",":min":"min",":max":"max",":step":"step","on_input":"$emit('input', parseFloat($event.target.value))"}}},"props":{"text":null,"value":null,"min":null,"max":null,"step":null},"style":null,"name":"ui-range","template":"<div class=\"comp-ui-range\" :tooltip=\"text\" path=\"-2125793949.\"><input type=\"range\" :value=\"value\" :min=\"min\" :max=\"max\" :step=\"step\" on_input=\"$emit('input', parseFloat($event.target.value))\" path=\"-2125793949.0\"/></div>"}},{"name":"ui.section","path":"\\ui\\section.ws.yaml","source":{"dom":{"div#1":{"ui.expand":{":text":"title",":value":"(opposite ^ value)","on_input":"$emit('input', (opposite ^ $event))"},"transition":{"name":"slide2","div#2":{"v-show":"(opposite ^ value)","slot":null}}}},"props":{"title":null,"value":null,"opposite":false},"name":"ui-section","template":"<div class=\"comp-ui-section\" path=\"-1786263157.\"><ui-expand :text=\"title\" :value=\"(opposite ^ value)\" on_input=\"$emit('input', (opposite ^ $event))\" path=\"-1786263157.0\"></ui-expand><transition name=\"slide2\" path=\"-1786263157.1\"><div v-show=\"(opposite ^ value)\" path=\"-1786263157.1.0\"><slot></slot></div></transition></div>"}},{"name":"ui.select","path":"\\ui\\select.ws.yaml","source":{"dom":{"div#1":{"select":{"v-if":"(type=='dropdown')","option":{"v-for":"(item, index) in options",":value":"index","v-text":"item"},":value":"valueIndex","on_input":"onInput($event.target.value)"},"ui.list":{"v-if":"(type=='list')","v-slot":"slotProps",":items":"options",":selected-index":"valueIndex",":direction":"direction",":get-item-key":"getItemKey","template":{"slot":{":item":"slotProps.item"},"div#2":{"v-if":"showText","v-text":"_getItemText(slotProps.item)"}},"on_input":"onInput($event)"}}},"props":{"options":null,"value":null,"inputType":"index","direction":"vertical","showText":true,"type":"list","getItemText":null,"getItemKey":null},"methods":{"onInput":"function(index) {\n  const value = this.inputType === \"index\" ? index : this.options[index];\n  this.$emit(\"input\", value);\n}\n","_getItemText":"function(item) {\n  if (this.getItemText) return this.getItemText(item);\n  \n  const text = item;\n  const icons = {\n    network: \"🌐\",\n    site: \"💻\",\n    requests: \"📡\",\n    \"response.time\": \"⏱️\",\n    \"1 month\": \"📅\",\n    \"1 week\": \"📅\",\n    \"1 day\": \"📅\",\n    \"1 hour\": \"📅\",\n  };\n  const icon = icons[text] || \"\";\n  return [icon, text].filter(a => a).join(\" \");\n}\n"},"computed":{"valueIndex":"function() {\n  if (this.inputType === \"index\") return this.value;\n  return this.options.indexOf(this.value);\n}\n"},"name":"ui-select","style":{"li":{"padding":"0.2em 0.5em"},"li div":{"white-space":"nowrap"}},"template":"<div class=\"comp-ui-select\" path=\"-1442841194.\"><select v-if=\"(type=='dropdown')\" :value=\"valueIndex\" on_input=\"onInput($event.target.value)\" path=\"-1442841194.0\"><option v-for=\"(item, index) in options\" :value=\"index\" v-text=\"item\" path=\"-1442841194.0.0\"></option></select><ui-list v-if=\"(type=='list')\" v-slot=\"slotProps\" :items=\"options\" :selected-index=\"valueIndex\" :direction=\"direction\" :get-item-key=\"getItemKey\" on_input=\"onInput($event)\" path=\"-1442841194.1\"><template path=\"-1442841194.1.0\"><slot :item=\"slotProps.item\" path=\"-1442841194.1.0.0\"></slot><div v-if=\"showText\" v-text=\"_getItemText(slotProps.item)\" path=\"-1442841194.1.0.1\"></div></template></ui-list></div>"}},{"name":"ui.share","path":"\\ui\\share.ws.yaml","source":{"dom":{".a2a_kit.a2a_kit_size_32.a2a_default_style":{":data-a2a-url":"url",":data-a2a-title":"imageUrl","a#1":{"class":"a2a_dd","href":"https://www.addtoany.com/share"},"a#2":{"class":"a2a_button_facebook"},"a#3":{"class":"a2a_button_twitter"},"a#4":{"class":"a2a_button_email"}}},"props":{"item":null},"mounted":"function() {\n  this.$nextTick(() => {\n    a2a.init('page');\n  });\n  setTimeout(() => {\n    a2a.init('page');\n  }, 1000);\n}\n","computed":{"url":"function() {\n  return this.$root.url.item(this.item, true);\n}\n","imageUrl":"function() {\n  return this.$root.url.itemImage(this.item);\n}\n"},"name":"ui-share","template":"<div class=\"comp-ui-share a2a_kit a2a_kit_size_32 a2a_default_style\" :data-a2a-url=\"url\" :data-a2a-title=\"imageUrl\" path=\"-2124674043.\"><a class=\"a2a_dd\" href=\"https://www.addtoany.com/share\" path=\"-2124674043.0\"></a><a class=\"a2a_button_facebook\" path=\"-2124674043.1\"></a><a class=\"a2a_button_twitter\" path=\"-2124674043.2\"></a><a class=\"a2a_button_email\" path=\"-2124674043.3\"></a></div>"}},{"name":"ui.sticky","path":"\\ui\\sticky.ws.yaml","source":{"dom":{"div":{":style":"getStyle()","slot":null}},"data":null,"mounted":"function() {\n}\n","methods":{"getStyle":"\nfunction() {\n  return {\n    top: this.top\n  };\n}\n"},"props":{"top":null},"computed":null,"style":{".comp-ui-sticky":{"position":"sticky","z-index":10}},"name":"ui-sticky","template":"<div class=\"comp-ui-sticky\" :style=\"getStyle()\" path=\"-1429079421.\"><slot></slot></div>"}},{"name":"ui.table","path":"\\ui\\table.ws.yaml","source":{"dom":{".card":{"table":{"thead":{"th":{"v-for":"key in Object.keys(tableData[0])","v-text":"key"}},"tbody":{"tr":{"v-for":"item in tableData","on_click":"itemClick(item)","td":{"v-for":"key in Object.keys(item)",".content":{"v-text":"item[key]"}}}}}}},"props":{"icon":null,"title":null,"data":{"default":[]}},"methods":{"itemClick":"\nfunction(item) {\n  this.$emit('item-click', item);\n}\n"},"computed":{"tableData":"\nfunction() {\n  if (!this.data?.length) return [];\n  if (this.data.map(v => typeof v).find(t => t === 'number')) {\n    return this.data.map(value => ({ value }));\n  }\n  return this.data;\n}\n"},"style":{".content":{"height":"1.5em","overflow":"hidden"},"tr:hover":{"background-color":null},"td":{"padding-right":"1em"}},"name":"ui-table","template":"<div class=\"comp-ui-table card\" path=\"-2123958284.\"><table path=\"-2123958284.0\"><thead path=\"-2123958284.0.0\"><th v-for=\"key in Object.keys(tableData[0])\" v-text=\"key\" path=\"-2123958284.0.0.0\"></th></thead><tbody path=\"-2123958284.0.1\"><tr v-for=\"item in tableData\" on_click=\"itemClick(item)\" path=\"-2123958284.0.1.0\"><td v-for=\"key in Object.keys(item)\" path=\"-2123958284.0.1.0.0\"><div class=\"content\" v-text=\"item[key]\" path=\"-2123958284.0.1.0.0.0\"></div></td></tr></tbody></table></div>"}},{"name":"ui.tabs","path":"\\ui\\tabs.ws.yaml","source":{"dom":{"div#1":{"ui.select":{":options":"(options||[]).map(option => getOptionText(option))",":getUrl":"getUrl",":direction":"direction","v-model":"selectedTabIndex"},"div#2":{"div#3":{"v-for":"(option, index) in options","transition":{"name":"slide2","div#4":{"v-show":"(index == selectedTabIndex)","slot":{":name":"'tab' + index"}}}}}}},"props":{"options":null,"getText":null,"getUrl":null,"direction":"vertical"},"data":{"selectedTabIndex":0},"watch":{"selectedTabIndex":"{\n  handler: function(newIndex) {\n    if (!this.options) return;\n    this.$emit('input', this.options[newIndex]);\n  },\n  immediate: true\n}\n"},"methods":{"getOptionText":"function(option) {\n  if (this.getText) return this.getText(option);\n  return option;\n}\n"},"style":{".comp-ui-select":{"border-bottom":"1px solid #000000","margin-bottom":"1em"}},"name":"ui-tabs","template":"<div class=\"comp-ui-tabs\" path=\"-484156776.\"><ui-select :options=\"(options||[]).map(option =&gt; getOptionText(option))\" :getUrl=\"getUrl\" :direction=\"direction\" v-model=\"selectedTabIndex\" path=\"-484156776.0\"></ui-select><div path=\"-484156776.1\"><div v-for=\"(option, index) in options\" path=\"-484156776.1.0\"><transition name=\"slide2\" path=\"-484156776.1.0.0\"><div v-show=\"(index == selectedTabIndex)\" path=\"-484156776.1.0.0.0\"><slot :name=\"'tab' + index\" path=\"-484156776.1.0.0.0.0\"></slot></div></transition></div></div></div>"}},{"name":"ui.text.box","path":"\\ui\\text.box.ws.yaml","source":{"dom":{"div":{".icon":{"v-if":"icon","v-text":"icon"},"input":{":class":"{ hasIcon: icon }",":type":"type",":placeholder":"hint",":value":"value","on_input":"onInput"}}},"props":{"type":"text","value":null,"hint":null,"icon":null},"methods":{"onInput":"function(e) {\n  this.$emit('input', e.target.value);\n}\n"},"name":"ui-text-box","style":{"input.hasIcon":{"padding-left":"2em !important"},".icon":{"position":"absolute","margin":"0.7em"}},"template":"<div class=\"comp-ui-text-box\" path=\"-1492297820.\"><div class=\"icon\" v-if=\"icon\" v-text=\"icon\" path=\"-1492297820.0\"></div><input :class=\"{ hasIcon: icon }\" :type=\"type\" :placeholder=\"hint\" :value=\"value\" on_input=\"onInput\" path=\"-1492297820.1\"/></div>"}},{"name":"ui.text","path":"\\ui\\text.ws.yaml","source":{"dom":null,"name":"ui-text","template":""}},{"name":"ui.textarea","path":"\\ui\\textarea.ws.yaml","source":{"dom":{"textarea":{":value":"value",":placeholder":"hint","on_input":"onInput","on_focus":"$emit('focus')","on_blur":"$emit('blur')","on_keydown":"onKeyDown"}},"props":{"value":null,"hint":null},"methods":{"onInput":"function(e) {\n  const heightLimit = 200;\n  const textarea = e.target;\n  this.$emit('input', textarea.value);\n  textarea.style.height = \"\";\n  textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + \"px\";\n}\n","onKeyDown":"function(e) {\n  if (e.key == 'Tab') {\n    e.preventDefault();\n    let start = e.target.selectionStart;\n    let end = e.target.selectionEnd;\n    let value = e.target.value;\n    e.target.value = value.substring(0, start) + \"  \" + value.substring(end);\n    e.target.selectionStart = e.target.selectionEnd = start + 2;\n  }\n  return false;\n}\n"},"name":"ui-textarea","style":null,"template":"<textarea class=\"comp-ui-textarea\" :value=\"value\" :placeholder=\"hint\" on_input=\"onInput\" on_focus=\"$emit('focus')\" on_blur=\"$emit('blur')\" on_keydown=\"onKeyDown\" path=\"-1490763436.\"></textarea>"}},{"name":"ui.time","path":"\\ui\\time.ws.yaml","source":{"dom":{".opacity-20":{"v-text":"timeAgo(value)"}},"props":{"value":null},"style":{".comp-ui-time":{"text-shadow":"-2px 2px 1px #000000"}},"methods":{"timeAgo":"\nfunction (dt) {\n  dt = new Date(dt);\n  const now = new Date();\n  const seconds = Math.round(Math.abs((now - dt) / 1000));\n  const minutes = Math.round(Math.abs(seconds / 60));\n  const hours = Math.round(Math.abs(minutes / 60));\n  const days = Math.round(Math.abs(hours / 24));\n  if (Number.isNaN(seconds)) {\n    return '';\n  }\n  if (seconds <= 45) {\n    return 'a few seconds ago';\n  }\n  if (seconds <= 90) {\n    return 'a minute ago';\n  }\n  if (minutes < 60) {\n    return minutes + \" minutes ago\";\n  }\n  if (hours < 24) {\n    return hours + \" hours ago\";\n  }\n  return '';\n  if (days < 7) {\n    return days + \" days ago\";\n  }\n  if (days < 30) {\n    return Math.round(days / 7) + \" weeks ago\";\n  }\n  if (days < 365) {\n    return Math.round(days / 30) + \" months ago\";\n  }\n  return Math.round(days / 365) + \" years ago\";\n}\n"},"name":"ui-time","template":"<div class=\"comp-ui-time opacity-20\" v-text=\"timeAgo(value)\" path=\"-484148761.\"></div>"}},{"name":"ui.title","path":"\\ui\\title.ws.yaml","source":{"dom":{"div#1":{"class":"flex",".icon":{":class":"getIconClass()","v-if":"icon","v-text":"icon"},"div#2":{"v-text":"getText()"},".ml-1.opacity-50":{"v-if":"number","v-text":"getNumberText()"}}},"props":{"icon":null,"text":null,"value":null,"number":null},"methods":{"getText":"function() {\n  return [this.text, this.value].filter(s => s).join(' ');\n}\n","getNumberText":"function() {\n  return !this.number ? '' : `(${this.number})`;\n}\n","getIconClass":"function() {\n  if (this.icon == \"📁\") return \"opacity-50\";\n  return null;\n}\n"},"style":{".flex":{"gap":"0.5em"},"div":{"white-space":"nowrap","text-wrap":"nowrap"}},"name":"ui-title","template":"<div class=\"comp-ui-title flex\" path=\"-2123702658.\"><div class=\"icon\" :class=\"getIconClass()\" v-if=\"icon\" v-text=\"icon\" path=\"-2123702658.0\"></div><div v-text=\"getText()\" path=\"-2123702658.1\"></div><div class=\"ml-1 opacity-50\" v-if=\"number\" v-text=\"getNumberText()\" path=\"-2123702658.2\"></div></div>"}},{"name":"ui.track.size","path":"\\ui\\track\\size.ws.yaml","source":{"dom":{"div":{"ref":"div1","slot":null}},"data":{"size":null},"mounted":"function () {\n  window.addEventListener(`resize`, this.recalc.bind(this));\n  // Detect if the image element changes its size\n  let resizeObserver = new ResizeObserver(this.recalc.bind(this));\n  resizeObserver.observe(this.$refs.div1);\n}\n","methods":{"recalc":"function () {\n  if (!this.$refs.div1) return;\n  let rect = this.$refs.div1.getBoundingClientRect();\n  const width = this.width = Math.round(rect.width);\n  const height = this.height = Math.round(rect.height);\n  const diagonal = Math.round(Math.sqrt(width * width + height * height));\n  const size = this.size = { width, height, diagonal };\n  this.$emit(\"input\", size);\n}\n"},"name":"ui-track-size","template":"<div class=\"comp-ui-track-size\" ref=\"div1\" path=\"759638622.\"><slot></slot></div>"}},{"name":"ui.tree.node","path":"\\ui\\tree.node.ws.yaml","source":{"dom":{"div":{".tree-node":{":class":"getCssClass()","ui.expand":{"v-if":"showUiExpand","v-model":"isExpanded"},"component":{"v-if":"itemType",":is":"getItemType()",":item":"getItem(node)"},"on_click":"onNodeClick","on_mouseenter":"onMouseEnter","on_mouseleave":"onMouseLeave","slot":null},"transition.group":{"name":"list","tag":"ul","class":"ml-3","li":{"v-for":"child in getChildItems(node)",":key":"child.id","ui.tree.node":{":node":"child",":initial-expanded":"initialExpanded",":expandable":"expandable",":item-type":"getItemType()",":get-item":"getItem",":get-children":"getChildren",":selected-node":"selectedNode","on_node-click":"onChildClick","on_node-hover":"onChildHover","on_node-unhover":"onChildUnhover"}}}}},"props":{"node":null,"initialExpanded":false,"expandable":true,"itemType":null,"getItem":null,"getChildren":null,"selectedNode":null},"data":{"isInited":false,"isExpanded":null},"methods":{"getCssClass":"function() {\n  return {\n    hoverable: true,\n    selected: this.isSelected,\n    expandable: this.expandable,\n  };\n}\n","onNodeClick":"function() {\n  if (this.isSelected)\n  {\n      this.isExpanded = false;\n      this.children = null;\n  }\n  else\n  {\n    this.isExpanded = true;        \n    this.children = this.getChildren(this.node);\n  }\n  this.$emit('node-click', this.node);\n}\n","onMouseEnter":"function() {\n  this.$emit('node-hover', this.node);\n}\n","onMouseLeave":"function() {\n  this.$emit('node-unhover', this.node);\n}\n","onChildClick":"function(child) {\n  this.$emit('node-click', child);\n}\n","onChildHover":"function (child) {\n  this.$emit('node-hover', child);\n}\n","onChildUnhover":"function (child) {\n  this.$emit('node-unhover', child);\n}\n","getItemType":"function() {\n  return this.itemType?.replace(/\\./g, '-');\n}\n","getChildItems":"function(node) {\n  if (!this.isExpanded) return [];\n  return this.getChildren(node);\n}\n"},"computed":{"isSelected":"function() {\n  return (this.node == this.selectedNode);\n}\n","showUiExpand":"function() {\n  if (!this.node) return false;\n  if (!this.getChildren(this.node)?.length) return false;\n  return this.expandable;\n}\n","depth":"function() {\n  return ('depth' in this.$parent) ? this.$parent.depth : this.$parent.$parent.depth + 1;\n}\n"},"watch":{"initialExpanded":{"handler":"function(newVal, oldVal) {\n  if (this.isInited) return;\n  this.isInited = true;\n  this.isExpanded = (typeof newVal == 'boolean') ? newVal : (this.depth <= newVal);\n}\n","immediate":true}},"style":{".tree-node":{"display":"flex"},".tree.node.expandable":{"display":"grid","grid-template":"1fr / 1.5em 1fr"},".comp-ui-expand":{"margin-right":"0.3em"},".comp-ui-expand .icon":{"font-size":"100% !important","border":"none !important"},"li":{"transition":"0.3s !important"}},"name":"ui-tree-node","template":"<div class=\"comp-ui-tree-node\" path=\"2053324664.\"><div class=\"tree-node\" :class=\"getCssClass()\" on_click=\"onNodeClick\" on_mouseenter=\"onMouseEnter\" on_mouseleave=\"onMouseLeave\" path=\"2053324664.0\"><ui-expand v-if=\"showUiExpand\" v-model=\"isExpanded\" path=\"2053324664.0.0\"></ui-expand><component v-if=\"itemType\" :is=\"getItemType()\" :item=\"getItem(node)\" path=\"2053324664.0.1\"></component><slot></slot></div><transition-group class=\"ml-3\" name=\"list\" tag=\"ul\" path=\"2053324664.1\"><li v-for=\"child in getChildItems(node)\" :key=\"child.id\" path=\"2053324664.1.0\"><ui-tree-node :node=\"child\" :initial-expanded=\"initialExpanded\" :expandable=\"expandable\" :item-type=\"getItemType()\" :get-item=\"getItem\" :get-children=\"getChildren\" :selected-node=\"selectedNode\" on_node-click=\"onChildClick\" on_node-hover=\"onChildHover\" on_node-unhover=\"onChildUnhover\" path=\"2053324664.1.0.0\"></ui-tree-node></li></transition-group></div>"}},{"name":"ui.tree","path":"\\ui\\tree.ws.yaml","source":{"dom":{"ul":{"li":{"ui.tree.node":{":node":"root",":initial-expanded":"initialExpanded",":expandable":"initialExpandable",":item-type":"itemType",":get-item":"getItem || ((node) => node.item)",":get-children":"getChildren || ((node) => node.children||[])",":selected-node":"selectedNode","on_node-click":"onChildClick","on_node-hover":"onChildHover","on_node-unhover":"onChildUnhover"}}}},"props":{"root":null,"initialExpanded":false,"expandable":true,"itemType":null,"getItem":null,"getChildren":null},"data":{"selectedNode":null},"methods":{"onChildClick":"function(child) {\n  this.$emit('node-click', child);\n  this.selectedNode = (child == this.selectedNode) ? null : child;\n}\n","onChildHover":"function (child) {\n  this.$emit('node-hover', child);\n}\n","onChildUnhover":"function (child) {\n  this.$emit('node-unhover', child);\n}\n"},"computed":{"initialExpandable":"function() {\n  if (typeof this.initialExpanded == 'boolean') return !this.initialExpanded;\n  return this.expandable;\n}\n","depth":"function() {\n  return 0;\n}\n"},"watch":{"selectedNode":"function(newVal, oldVal) {\n  this.$emit('node-select', newVal);\n}\n"},"name":"ui-tree","template":"<ul class=\"comp-ui-tree\" path=\"-484140360.\"><li path=\"-484140360.0\"><ui-tree-node :node=\"root\" :initial-expanded=\"initialExpanded\" :expandable=\"initialExpandable\" :item-type=\"itemType\" :get-item=\"getItem || ((node) =&gt; node.item)\" :get-children=\"getChildren || ((node) =&gt; node.children||[])\" :selected-node=\"selectedNode\" on_node-click=\"onChildClick\" on_node-hover=\"onChildHover\" on_node-unhover=\"onChildUnhover\" path=\"-484140360.0.0\"></ui-tree-node></li></ul>"}},{"name":"ui.value.any","path":"\\ui\\value\\any.ws.yaml","source":{"dom":{"component":{":is":"getComponentType(value)",":value":"value"}},"props":{"value":null},"methods":{"getComponentType":"function(value) {\n  const getType = (value) => {\n    let typeofValue = typeof value;\n    if (typeofValue == \"string\") typeofValue = \"object\";\n    if ([\"object\", \"boolean\"].find(v => v == typeofValue)) return typeofValue;\n    return \"preview\";\n  };\n  return `ui.value.${getType(value)}`.replace(/\\./g, \"-\");\n}\n"},"name":"ui-value-any","template":"<component class=\"comp-ui-value-any\" :is=\"getComponentType(value)\" :value=\"value\" path=\"1299909909.\"></component>"}},{"name":"ui.value.boolean","path":"\\ui\\value\\boolean.ws.yaml","source":{"dom":{"ui.title":{":icon":"getIcon(value)",":text":"(value)"}},"props":{"value":null},"methods":{"getIcon":"function(value) {\n  return value ? \"✔️\" : \"❌\";\n}\n"},"name":"ui-value-boolean","template":"<ui-title class=\"comp-ui-value-boolean\" :icon=\"getIcon(value)\" :text=\"(value)\" path=\"110445265.\"></ui-title>"}},{"name":"ui.value.object","path":"\\ui\\value\\object.ws.yaml","source":{"dom":{"pre":{"v-html":"yaml"}},"props":{"value":null},"computed":{"yaml":"function() {\n  return this.$root.visualizedYaml(this.value);\n}\n"},"style":{"pre":{"font-size":"100%","max-height":"60vh","overflow":"auto"}},"name":"ui-value-object","template":"<pre class=\"comp-ui-value-object\" v-html=\"yaml\" path=\"-1714629770.\"></pre>"}},{"name":"ui.value.preview","path":"\\ui\\value\\preview.ws.yaml","source":{"dom":{"div":{":class":"getCssClass(value)","v-text":"valueToString(value)"}},"props":{"value":null},"methods":{"getCssClass":"function(value) {\n  if ([undefined, null].includes(value)) return \"opacity-30\";\n  return null;\n}\n","valueToString":"function(value) {\n  if (value == undefined) return \"undefined\";\n  if (value == null) return \"null\";\n  if (typeof value == \"string\") return `\"${value.shorten(20)}\"`;\n  if (typeof value == \"number\") return value.toString();\n  if (typeof value == \"boolean\") return value ? \"✔️\" : \"✖\";\n  if (typeof value == \"function\") return value.toString();\n  if (typeof value == \"object\") return JSON.stringify(value).shorten(20);\n  return value.toString();\n}\n"},"name":"ui-value-preview","template":"<div class=\"comp-ui-value-preview\" :class=\"getCssClass(value)\" v-text=\"valueToString(value)\" path=\"-272450959.\"></div>"}},{"name":"ui.video","path":"\\ui\\video.ws.yaml","source":{"dom":{"video":{"ref":"video1","autoplay":true,"muted":true,"loop":true,":src":"src"}},"props":{"src":null},"mounted":"function() {\n  this.ensureVideoIsPlaying();\n}\n","methods":{"ensureVideoIsPlaying":"function() {\n  if (this.$refs.video1?.paused) this.$refs.video1.play();\n  setTimeout(this.ensureVideoIsPlaying.bind(this), 400);\n}\n"},"name":"ui-video","template":"<video class=\"comp-ui-video\" ref=\"video1\" autoplay=\"true\" muted=\"true\" loop=\"true\" :src=\"src\" path=\"-2121871199.\"></video>"}}];</script>
<script>window.templates = {"vue":"{\r\n  props: {\r\n    {{#each props}}\r\n    {{@key}}: {\r\n      default: {{{or this null}}}\r\n    },\r\n    {{/each}}\r\n  },\r\n  data: function () {\r\n    return {\r\n        {{#each data}}\r\n        {{@key}}: {{{or this null}}},\r\n        {{/each}}\r\n        _: {\r\n          comp: {\r\n            name: `{{unkebabize name}}`,\r\n          },\r\n        }\r\n    }\r\n  },\r\n  mounted: {{{addCode mounted \"this.$root.vm.onVueMounted(this); this._log_method('mounted', arguments); this.$emit = this._getNewEmit(this.$emit);\"}}},\r\n  unmounted: {{{addCode unmounted \"this.$root.vm.onVueUnmounted(this); this._log_method('unmounted', arguments);\"}}},\r\n  methods: {\r\n    {{#each methods}}\r\n    {{@key}}: {{{addMethodCode @key this}}},\r\n    {{/each}}\r\n    _getNewEmit: function (emit) {\r\n      return function (event, ...args) {\r\n        this._log_emit(event, args);\r\n        emit.call(this, event, ...args);\r\n      }\r\n    },\r\n\r\n    _log_emit: function(event, args) {\r\n      this.$root.state?.track(this, 'e', event, args);\r\n    },\r\n\r\n    _log_method: function (methodName, args) {\r\n      return;\r\n\r\n      if ([`processQueue`, `recalc`, `getFontSize`,\r\n        `onMouseMove`, `onMouseUp`,\r\n        `preventDefaults`,\r\n        `highlight`, `unhighlight`,\r\n        `getCssClass`, `getTabClass`, `getLayerClass`, `getLayerType`\r\n        ].includes(methodName)) return;\r\n      if ([`draw`].some(s => methodName.includes(s))) return;\r\n\r\n      this.$root.state?.track(this, 'm', methodName);\r\n\r\n      return;\r\n\r\n      console.log(\r\n        `🧊 %c{{name}} %c${methodName} %o`,\r\n        'color: green;',\r\n        'color: yellow;',\r\n        args);\r\n    },\r\n    _log_state: function (type, key, newValue, oldValue) {\r\n      if ([`queue`, `width`, `height`, `generators`, `items`].includes(key)) return;\r\n      if (!newValue && !oldValue) return;\r\n      this.$root.state?.track(this, type, key, newValue, oldValue);\r\n      if (!oldValue)\r\n      {\r\n        if (false)\r\n        {\r\n          console.log(\r\n            `🧊 %c${this._.comp.name} %c${key} %o`,\r\n            'color: green;',\r\n            'color: cyan;',\r\n            newValue);\r\n        }\r\n      }\r\n    },\r\n  },\r\n  computed: {\r\n    {{#each computed}}\r\n    {{#if get}}\r\n    {{@key}}: {\r\n      get: {{{get}}},\r\n    },\r\n    {{else}}\r\n    {{@key}}: {{{this}}},\r\n    {{/if}}\r\n    {{/each}}\r\n  },\r\n  watch: {\r\n    {{#each data}}\r\n    {{@key}}: {\r\n      handler: function (newValue, oldValue) {\r\n        this._log_state('d', `{{@key}}`, newValue, oldValue);\r\n      },\r\n      immediate: true,\r\n      deep: true,\r\n    },\r\n    {{/each}}\r\n    \r\n    {{#each props}}\r\n    {{@key}}: {\r\n      handler: function (newValue, oldValue) {\r\n        this._log_state('p', `{{@key}}`, newValue, oldValue);\r\n      },\r\n      immediate: true,\r\n      deep: true,\r\n    },\r\n    {{/each}}\r\n\r\n    {{#each watch}}\r\n    {{#if handler}}\r\n    {{@key}}: {\r\n      handler: {{{handler}}},\r\n      immediate: {{{or immediate false}}},\r\n      deep: {{{or deep false}}},\r\n    },\r\n    {{else}}\r\n    {{@key}}: {{{this}}},\r\n    {{/if}}\r\n    {{/each}}\r\n  },\r\n  template: `{{{dom dom name}}}`\r\n}\r\n","style":"{{#each source.style}}\r\n{{prefixCssSelectors ../name @key}}\r\n{\r\n    {{#each this}}\r\n    {{#if @key}}\r\n    {{@key}}: {{{this}}};\r\n    {{/if}}\r\n    {{/each}}\r\n}\r\n{{/each}}\r\n"};</script>
<script>window.helpers = {"or":"(context: any, a: any, b: any) => {\n  if (a != undefined) return JSON.stringify(a);\n  return JSON.stringify(b);\n};\n","dom":"(context: any, dom: any, compName: string) => {\n  return context.toTemplate(context, dom, 0, compName).join(\"\\n\");\n};\n","addCode":"(context: any, methodBody: string, code: string) => {\n  if (!methodBody) methodBody = \"function() {}\";\n  methodBody = methodBody.replace(/\\{/, `{\\n${code}\\n`);\n  return methodBody;\n};\n","addMethodCode":"(context: any, methodName: string, methodBody: string) => {\n  if (!methodBody) methodBody = \"function() {}\";\n  methodBody = methodBody.replace(/\\{/, `{\\n this._log_method(\"${methodName}\", [...arguments]); \\n if (this.$root.state?.methods.pause.${methodName}) debugger; \\n`);\n  return methodBody;\n};\n","prefixCssSelectors":"(context: any, compName: string, selectors: string) => {\n  const s = [];\n  const scopeClass = `comp-${compName.replace(/\\./g, \"-\")}`;\n  const classSelectors = selectors.split(',').map(s => s.trim()).filter(s => s.startsWith(\".\"));\n  const otherSelectors = selectors.split(',').map(s => s.trim()).filter(s => !s.startsWith(\".\"));\n  s.push(...classSelectors.map(s => `.${scopeClass}${s}`));\n  s.push(...classSelectors.map(s => `.${scopeClass} ${s}`));\n  s.push(...otherSelectors.map(s => `.${scopeClass} ${s}`));\n  return s.join(\", \");\n};\n","unkebabize":"(context: any, str: string) => {\n  return str?.replace(/-/g, \".\");\n};\n"};</script>
<script>window.config = {"params":{"params":{"page":{"get":"function(url) {\n  if (url == \"/\") return \"home\";\n  if (url == \"/test\") return \"test\";\n  if (url == \"/admin\") return \"admin\";\n  if (url.startsWith(\"/b/\")) return \"builder\";\n  if (url.startsWith(\"/m/\")) return \"media\";\n  if (url.startsWith(\"/instance/\")) return \"instance\";\n  if (url.startsWith(\"/c/\")) return \"category\";\n  if (url.startsWith(\"/t/\")) return \"thread\";\n  return \"generator\";\n}\n"},"urlName":{"get":"function(url) {\n  if (url == \"/\") return null;\n  if (url == \"/admin\") return null;\n  if ([\"instance\", \"t\"].some(a => url.startsWith(`/${a}/`))) return null;\n  if ([\"c\", \"b\"].some(a => url.startsWith(`/${a}/`))) return url.split(\"/\")[2];\n  return url.split(\"/\")[1];\n}\n"},"mediaID":{"get":"function(url) {\n  if (!url.startsWith(\"/m/\")) return null;\n  return parseInt(url.split(\"/\")[2]);\n}\n"},"instanceID":{"get":"function(url) {\n  if (!url.startsWith(\"/instance/\")) return null;\n  return parseInt(url.split(\"/\")[2]);\n}\n"},"threadID":{"get":"function(url) {\n  if (!url.startsWith(\"/t/\")) return null;\n  return parseInt(url.split(\"/\")[2]);\n}\n"},"url":{"get":"function() {\n  return window.location.pathname;\n}\n"}}}};</script>
<script src="/script/startup.js?_uid=-343229406"></script></head>
<body>
<div>
<div id="app">
<app ref="app" :key="key1"></app>
<ide-workspace :comps="comps" :style="getWorkspaceStyle()"></ide-workspace></div></div></body></html>