gardenjs 1.6.9 → 1.7.0

package/src/client/components/stage/panel/controls/SelectControl.svelte

@@ -1,10 +1,10 @@
 <script>
-  let { value, onChange, options = [], variant = 'dropdown' } = $props()
+  let { value, onChange, options = [], control = 'dropdown' } = $props()
 
   let isUnset = $derived(!value || value === undefined || value === null)
 </script>
 
-{#if variant === 'radio'}
+{#if control === 'radio'}
   <div class="radio-group">
     {#each options as option, index (option.value ?? option ?? index)}
       {@const optionValue = option.value ?? option}
@@ -21,30 +21,32 @@
       </label>
     {/each}
   </div>
-  {#if isUnset}
-    <div class="unset-info radio-unset">is not set</div>
-  {:else}
-    <button
-      class="btn_unset radio-btn-unset"
-      onclick={() => onChange(undefined)}
-    >
-      <svg
-        class="close"
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+  <div class="unset-area">
+    {#if isUnset}
+      <div class="unset-info radio-unset">is not set</div>
+    {:else}
+      <button
+        class="btn_unset radio-btn-unset"
+        onclick={() => onChange(undefined)}
       >
-        <path d="M18 6L6 18M6 6l12 12" />
-      </svg>
-      unset
-    </button>
-  {/if}
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {/if}
+  </div>
 {:else}
   <div class="row">
     <div class="container">
@@ -77,27 +79,29 @@
         <path d="M6 9l6 6 6-6" />
       </svg>
     </div>
-    {#if isUnset}
-      <span class="unset-info">is not set</span>
-    {:else}
-      <button class="btn_unset" onclick={() => onChange(undefined)}>
-        <svg
-          class="close"
-          xmlns="http://www.w3.org/2000/svg"
-          width="12"
-          height="12"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M18 6L6 18M6 6l12 12" />
-        </svg>
-        unset
-      </button>
-    {/if}
+    <div class="unset-area">
+      {#if isUnset}
+        <span class="unset-info">is not set</span>
+      {:else}
+        <button class="btn_unset" onclick={() => onChange(undefined)}>
+          <svg
+            class="close"
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+          unset
+        </button>
+      {/if}
+    </div>
   </div>
 {/if}
 

package/src/client/components/stage/panel/controls/TextInputControl.svelte

@@ -2,38 +2,79 @@
   let {
     value,
     onChange,
-    variant = 'text',
-    rows = 4,
+    control = 'text',
+    numberOfRows = 4,
   }: {
     value: string
     onChange: (value: string) => void
-    variant?: 'text' | 'textarea'
-    rows?: number
+    control?: 'text' | 'textarea'
+    numberOfRows?: number
   } = $props()
+
+  let isUnset = $derived(!value || value === undefined || value === null)
 </script>
 
-{#if variant === 'textarea'}
-  <textarea
-    class="input textarea"
-    {rows}
-    value={String(value ?? '')}
-    oninput={(e) => {
-      onChange(String((e.currentTarget as HTMLTextAreaElement).value ?? ''))
-    }}
-  ></textarea>
-{:else}
-  <input
-    class="input"
-    type="text"
-    value={String(value ?? '')}
-    oninput={(e) => {
-      onChange(String((e.currentTarget as HTMLInputElement).value ?? ''))
-    }}
-  />
-{/if}
+<div class="row">
+  <div class="container">
+    {#if control === 'textarea'}
+      <textarea
+        class="input textarea"
+        rows={numberOfRows}
+        value={String(value ?? '')}
+        oninput={(e) => {
+          onChange(String((e.currentTarget as HTMLTextAreaElement).value ?? ''))
+        }}
+      ></textarea>
+    {:else}
+      <input
+        class="input"
+        type="text"
+        value={String(value ?? '')}
+        oninput={(e) => {
+          onChange(String((e.currentTarget as HTMLInputElement).value ?? ''))
+        }}
+      />
+    {/if}
+  </div>
+  <div class="unset-area">
+    {#if isUnset}
+      <span class="unset-info">is not set</span>
+    {:else}
+      <button class="btn_unset" onclick={() => onChange(undefined as any)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {/if}
+  </div>
+</div>
 
 <style lang="scss">
   @use './input.scss';
+  @use './button_unset.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .container {
+    flex: 1;
+    display: block;
+  }
 
   .textarea {
     resize: vertical;

package/src/client/components/stage/panel/controls/TimeControl.svelte

@@ -17,27 +17,29 @@
       onChange(newValue || (undefined as any))
     }}
   />
-  {#if isUnset}
-    <span class="unset-info">is not set</span>
-  {:else}
-    <button class="btn_unset" onclick={() => onChange(undefined as any)}>
-      <svg
-        class="close"
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M18 6L6 18M6 6l12 12" />
-      </svg>
-      unset
-    </button>
-  {/if}
+  <div class="unset-area">
+    {#if isUnset}
+      <span class="unset-info">is not set</span>
+    {:else}
+      <button class="btn_unset" onclick={() => onChange(undefined as any)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {/if}
+  </div>
 </div>
 
 <style lang="scss">

package/src/client/components/stage/panel/controls/button_unset.scss

@@ -1,14 +1,24 @@
+.unset-area {
+  display: flex;
+  justify-content: flex-end;
+  align-self: start;
+  margin: 0.25rem 0 0;
+}
 .unset-info {
   margin: 0 0 0 0.5rem;
-  color: var(--c-basic-800);
+  padding: 0.25rem 0 0;
+  width: 4.25rem;
   font-size: 0.75rem;
+  color: var(--c-basic-800);
+  text-align: right;
 }
 .btn_unset {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   margin: 0 0 0 0.5rem;
   padding: 0.25rem 0.5rem;
+  width: 4.25rem;
   height: 1.25rem;
   background-color: var(--c-basic-100);
   border-radius: 0.375rem;

package/src/client/logic/localStore.js

@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store'
+
+export function localStore(
+  name,
+  defaultValue,
+  parseString = (value) => value,
+  stringify = (value) => value
+) {
+  const store = writable(
+    parseString(localStorage.getItem(name)) ?? defaultValue
+  )
+  store.subscribe((value) => {
+    localStorage.setItem(name, stringify(value))
+  })
+  return store
+}
+
+export const textOrNumberParser = (value) => {
+  if (Number.isNaN(Number(value))) {
+    return value
+  }
+  return Number(value)
+}

package/src/client/logic/sidebar.svelte.js

@@ -0,0 +1,55 @@
+import { writable, get } from 'svelte/store'
+import { localStore, textOrNumberParser } from './localStore'
+import { innerWidth } from 'svelte/reactivity/window'
+
+export const sidebarWidth = localStore('sidebarWidth', 260, textOrNumberParser)
+export const sidebarMaxWidth = writable(260)
+export const sidebarExpanded = localStore('sidebarExpanded', false)
+
+let previousWidth = $state(260)
+let desktopExpanded = $state(true)
+let mobileExpanded = $state(false)
+let showMobileNav = $state(true)
+
+export const initSidebar = () => {
+  $effect(() => {
+    if (innerWidth.current < 840) {
+      mobileExpanded = false
+      showMobileNav = true
+    } else {
+      showMobileNav = false
+    }
+  })
+
+  $effect(() => {
+    sidebarExpanded.set(showMobileNav ? mobileExpanded : desktopExpanded)
+  })
+}
+
+export function toggleExpandSidebar() {
+  if (get(sidebarExpanded)) {
+    previousWidth = get(sidebarWidth)
+    sidebarWidth.set(0)
+  } else {
+    sidebarWidth.set(previousWidth ?? 260)
+  }
+  if (showMobileNav) {
+    mobileExpanded = !mobileExpanded
+  } else {
+    desktopExpanded = !desktopExpanded
+  }
+}
+
+export function collapseMobileNavIfVisible() {
+  if (showMobileNav) {
+    mobileExpanded = false
+  }
+}
+
+export function updateSidebarWidth(newWidth) {
+  sidebarWidth.set(newWidth)
+}
+
+export function updateSidebarMaxWidth(newMaxWidth) {
+  sidebarMaxWidth.set(newMaxWidth)
+}

package/src/client/logic/stage.js

@@ -1,26 +1,5 @@
-import { writable, get, derived, readable } from 'svelte/store'
-
-function localStore(
-  name,
-  defaultValue,
-  parseString = (value) => value,
-  stringify = (value) => value
-) {
-  const store = writable(
-    parseString(localStorage.getItem(name)) ?? defaultValue
-  )
-  store.subscribe((value) => {
-    localStorage.setItem(name, stringify(value))
-  })
-  return store
-}
-
-const textOrNumberParser = (value) => {
-  if (Number.isNaN(Number(value))) {
-    return value
-  }
-  return Number(value)
-}
+import { writable, get, derived } from 'svelte/store'
+import { localStore, textOrNumberParser } from './localStore'
 
 export const themes = writable([])
 export const stageSizes = writable({
@@ -77,9 +56,6 @@ export const appTheme = localStore('appTheme', 'default')
 
 export const activeTheme = localStore('frameTheme')
 
-export const desktopSidebarExpanded = writable(true)
-export const mobileSidebarExpanded = writable(false)
-
 export const showInspector = writable(false)
 export const showGrid = writable(false)
 
@@ -244,14 +220,6 @@ export function toggleExpandPanel() {
   panelExpanded.set(!get(panelExpanded))
 }
 
-export function toggleExpandSidebar() {
-  if (get(mobileNav)) {
-    mobileSidebarExpanded.set(!get(mobileSidebarExpanded))
-  } else {
-    desktopSidebarExpanded.set(!get(desktopSidebarExpanded))
-  }
-}
-
 export function toggleShowInspector() {
   showInspector.set(!get(showInspector))
 }
@@ -260,35 +228,6 @@ export function toggleShowGrid() {
   showGrid.set(!get(showGrid))
 }
 
-export const mobileNav = readable(window.innerWidth < 840, (set) => {
-  // Funktion zum Aktualisieren der Fensterbreite
-  const updateWidth = () => {
-    set(window.innerWidth < 840)
-    mobileSidebarExpanded.set(false)
-  }
-
-  // Event-Listener für das Resize-Event hinzufügen
-  window.addEventListener('resize', updateWidth)
-
-  // Cleanup-Funktion, um den Event-Listener zu entfernen, wenn der Store nicht mehr verwendet wird
-  return () => {
-    window.removeEventListener('resize', updateWidth)
-  }
-})
-
-export const sidebarExpanded = derived(
-  [desktopSidebarExpanded, mobileSidebarExpanded, mobileNav],
-  ([$desktopSidebarExpanded, $mobileSidebarExpanded, $mobileNav]) => {
-    return $mobileNav ? $mobileSidebarExpanded : $desktopSidebarExpanded
-  }
-)
-
-export function handleSelectionChanged() {
-  if (get(mobileNav)) {
-    mobileSidebarExpanded.set(false)
-  }
-}
-
 export function setStagesize(nStageSize) {
   stageSize.set(nStageSize)
   const oldStageSizes = get(stageSizes)

package/dist/assets/frame-HIvQhXZT.js

@@ -1,9 +0,0 @@
-import{p as ft,f as wt,o as pt,A as kt,B as U,G as q,y as k,z as gt,R as zt,Z as Bt,_ as Ht,k as N,l as y,m as b,H as Lt,r as A,v as Nt,S as Gt,Q as z,g as t,O as Ft,s as u,F as mt,j as Pt,q as j,w as Rt,x as Et,h as c,I as D,K as Ot,u as Dt,C as jt,D as qt}from"./props-C0iXbu7F.js";import{dasMap as Kt}from"../das_import_map.js";import{componentMap as Qt}from"../component_import_map.js";import Zt from"../../garden.config.js";import"../gardenframe/cssimport.js";function Ct(B,o){ft(o,!0);let n=wt(o,"afterRenderHook",3,()=>{});pt(async()=>{await n()()});var r=kt(),L=U(r);{var l=v=>{var i=kt(),s=U(i);zt(s,()=>o.component),k(v,i)};q(L,v=>{o.component&&v(l)})}k(B,r),gt()}async function Jt(B){try{let o=Bt(Ct,{target:document.getElementById("garden_app"),props:{afterRenderHook:B}});return{destroy:()=>Ht(o),updateComponent:n=>{Ht(o),o=Bt(Ct,{target:document.getElementById("garden_app"),props:{...n,afterRenderHook:B}})}}}catch(o){console.log("error",o)}}const _t={create:Jt};var Ut=Gt('<rect fill="black"></rect>'),Vt=Gt('<rect fill="hsla(210, 75%, 50%, 0.45)"></rect>'),Xt=N('<div class="mask svelte-11d34ym"><svg xmlns="http://www.w3.org/2000/svg" class="svelte-11d34ym"><defs><mask id="mask"><rect y="0" x="0" width="100%" height="100%" fill="white"></rect><!></mask></defs><rect y="0" x="0" width="100%" height="100%" fill="hsla(256, 55%, 45%, 0.45)" mask="url(#mask)"></rect><!></svg></div>');function Yt(B,o){var n=Xt();let r;var L=b(n),l=b(L),v=b(l),i=y(b(v));Lt(i,17,()=>o.childElements,Ft,(x,g)=>{var h=Ut();A(()=>{z(h,"x",`${t(g).x??""}px`),z(h,"y",`${t(g).y??""}px`),z(h,"width",`${t(g).width??""}px`),z(h,"height",`${t(g).height??""}px`)}),k(x,h)});var s=y(l,2);Lt(s,17,()=>o.childElements,Ft,(x,g)=>{var h=Vt();A(()=>{z(h,"x",`${t(g).x??""}px`),z(h,"y",`${t(g).y??""}px`),z(h,"width",`${t(g).width??""}px`),z(h,"height",`${t(g).height??""}px`)}),k(x,h)}),A(x=>r=Nt(n,"",r,x),[()=>({top:`${o.top??""}px`,left:`${o.left??""}px`,width:`${o.width??""}px`,height:`${o.height??""}px`})]),k(B,n)}var $t=N('<div class="contentBox svelte-1p90mmv"></div>'),te=N('<div class="info-item svelte-1p90mmv"><div class="attribute svelte-1p90mmv">Gap:</div> <div class="value"> </div></div>'),ee=N('<div class="value"> </div>'),oe=N('<div class="info-item svelte-1p90mmv"><div class="attribute svelte-1p90mmv">Width:</div> <div class="value"> </div></div> <div class="info-item svelte-1p90mmv"><div class="attribute svelte-1p90mmv">Height:</div> <div class="value"> </div></div> <!> <div class="info-item svelte-1p90mmv"><div class="attribute svelte-1p90mmv">Margin:</div> <div class="value"> </div></div> <div class="info-item svelte-1p90mmv"><div class="attribute svelte-1p90mmv">Padding:</div> <div class="value"> </div></div> <div class="info-item svelte-1p90mmv"><div class="attribute svelte-1p90mmv">Role:</div> <div class="value"> </div></div> <div class="info-item svelte-1p90mmv"><div class="attribute svelte-1p90mmv">Class Name:</div> <div class="info-classlist svelte-1p90mmv"></div></div>',1),ae=N('<div class="overlay svelte-1p90mmv"><div class="borderBox svelte-1p90mmv"></div> <div class="marginBox svelte-1p90mmv"></div> <div class="paddingBox svelte-1p90mmv"></div> <!></div> <div><!></div>',1);function ie(B,o){ft(o,!0);let n,r,L,l,v,i=u(void 0),s=u(void 0),x=u(void 0),g=u(void 0),h=u(!1),R=u(mt([])),S=u(void 0),G=u(void 0),K=u(void 0),Q=u(void 0),V=u(void 0),X=u(void 0),Z=u(void 0),I=u(void 0),P=u(void 0),T=u(void 0);function M(){if(!t(g)){r?.style&&(r.style.display="none"),n?.style&&(n.style.display="none"),c(i,null),c(s,null),c(x,null);return}n.style.display="block";const a=t(g).getBoundingClientRect(),m=getComputedStyle(t(g));c(P,document.body.scrollTop,!0),c(T,document.body.scrollLeft,!0),c(h,(m.display==="grid"||m.display==="flex")&&t(g).children.length>0,!0);const _=t(g).tagName,F=Array.from(t(g).classList);c(x,{tagName:_,classList:F,width:parseFloat(m.width),height:parseFloat(m.height),background:m.backgroundColor,gap:m.gap,rowGap:m.rowGap,columnGap:m.columnGap},!0),c(i,{top:parseFloat(m.marginTop),right:parseFloat(m.marginRight),bottom:parseFloat(m.marginBottom),left:parseFloat(m.marginLeft)},!0),c(s,{top:parseFloat(m.paddingTop),right:parseFloat(m.paddingRight),bottom:parseFloat(m.paddingBottom),left:parseFloat(m.paddingLeft)},!0),c(S,t(P)+a.top-t(i).top),c(K,a.height+t(i).top+t(i).bottom),c(Q,a.width+t(i).left+t(i).right);const C=t(S)+t(K);c(G,t(T)+a.left-t(i).left);const E=t(G)+t(Q);n.style.top=t(S)+"px",n.style.left=t(G)+"px",n.style.width=t(Q)+"px",n.style.height=t(K)+"px",L.style.borderWidth=`${t(i).top}px ${t(i).right}px ${t(i).bottom}px ${t(i).left}px`,l.style.top=t(i).top+"px",l.style.left=t(i).left+"px",l.style.width=a.width+"px",l.style.height=a.height+"px",l.style.borderWidth=`${t(s).top}px ${t(s).right}px ${t(s).bottom}px ${t(s).left}px`,c(V,t(i).top+t(s).top),c(X,t(i).left+t(s).left),c(Z,a.width-t(s).left-t(s).right),c(I,a.height-t(s).top-t(s).bottom),t(h)?Y(t(g),t(P),t(T)):v&&(v.style.top=t(V)+"px",v.style.left=t(X)+"px",v.style.width=t(Z)+"px",v.style.height=t(I)+"px"),O(t(S),C,t(P),t(G),t(T),E,t(i))}function Y(a,m,_){c(R,Array.from(a.children).map(F=>{const{marginTop:C,marginLeft:E,marginRight:e,marginBottom:d}=getComputedStyle(F),p=F.getBoundingClientRect();return{y:m+p.top-t(S)-t(i).top-t(s).top-parseFloat(C),x:_+p.left-t(G)-t(i).left-t(s).left-parseFloat(E),width:p.width+parseFloat(E)+parseFloat(e),height:p.height+parseFloat(C)+parseFloat(d)}}),!0)}function O(a,m,_,F,C,E,e){if(!r)return;const d=document.body.getBoundingClientRect(),p=130+(t(h)?20:0)+t(x).classList.length*20,w=225,f=d.height,W=d.width,xt=a-_-p>0,dt=m-_+p<f,yt=F-E+w<W;r.style.bottom="unset",dt?(r.style.top=m+e.top+e.bottom+8+"px",r.classList.add("infobox-bottom"),r.classList.remove("infobox-top")):xt?(r.style.top=a+5-p+"px",r.classList.add("infobox-top"),r.classList.remove("infobox-bottom")):(r.style.top="unset",r.style.bottom=-_+"px",r.classList.remove("infobox-top"),r.classList.remove("infobox-bottom")),yt?(r.style.left=F+"px",r.style.right="unset",r.classList.add("infobox-left"),r.classList.remove("infobox-right")):(r.style.left="unset",r.style.right=W-C+"px",r.classList.add("infobox-right"),r.classList.remove("infobox-left")),r.style.display="block"}const J=a=>{a.target&&a.target!==n&&!n?.contains(a.target)&&(c(g,a.target,!0),M())},it=a=>{n&&!n.contains(a.relatedTarget)&&(c(i,null),c(s,null),c(x,null),c(g,null),n.style.display="none",r.style.display="none")};pt(()=>{o.contentPane&&(o.contentPane.addEventListener("mousemove",J),o.contentPane.addEventListener("mouseout",it),document.body.addEventListener("scroll",M,{passive:!0}))}),Pt(()=>{o.contentPane.removeEventListener("mousemove",J),o.contentPane.removeEventListener("mouseout",it),document.body.removeEventListener("scroll",M)});var rt=ae(),$=U(rt),H=y(b($),2);j(H,a=>L=a,()=>L);var nt=y(H,2);j(nt,a=>l=a,()=>l);var lt=y(nt,2);{var ut=a=>{{let m=Rt(()=>t(i)?.top+t(s)?.top),_=Rt(()=>t(i)?.left+t(s)?.left);Yt(a,{get top(){return t(m)},get left(){return t(_)},get width(){return t(Z)},get height(){return t(I)},get childElements(){return t(R)}})}},tt=a=>{var m=$t();j(m,_=>v=_,()=>v),k(a,m)};q(lt,a=>{t(h)?a(ut):a(tt,!1)})}j($,a=>n=a,()=>n);var et=y($,2);let ot;var st=b(et);{var ht=a=>{var m=oe(),_=U(m),F=y(b(_),2),C=b(F),E=y(_,2),e=y(b(E),2),d=b(e),p=y(E,2);{var w=at=>{var ct=te(),vt=y(b(ct),2),bt=b(vt);A(()=>D(bt,`${t(x).gap??""}
-          ${t(x).columnGap??""}
-          ${t(x).rowGap??""}`)),k(at,ct)};q(p,at=>{t(h)&&at(w)})}var f=y(p,2),W=y(b(f),2),xt=b(W),dt=y(f,2),yt=y(b(dt),2),Tt=b(yt),St=y(dt,2),Mt=y(b(St),2),At=b(Mt),It=y(St,2),Wt=y(b(It),2);Lt(Wt,21,()=>t(x).classList,Ft,(at,ct)=>{var vt=ee(),bt=b(vt);A(()=>D(bt,t(ct))),k(at,vt)}),A(()=>{D(C,`${t(x).width??""}px`),D(d,`${t(x).height??""}px`),D(xt,`${t(i).top??""}${t(i).top!==0?"px":""}
-        ${t(i).right??""}${t(i).right!==0?"px":""}
-        ${t(i).bottom??""}${t(i).bottom!==0?"px":""}
-        ${t(i).left??""}${t(i).left!==0?"px":""}`),D(Tt,`${t(s).top??""}${t(s).top!==0?"px":""}
-        ${t(s).right??""}${t(s).right!==0?"px":""}
-        ${t(s).bottom??""}${t(s).bottom!==0?"px":""}
-        ${t(s).left??""}${t(s).left!==0?"px":""}`),D(At,t(x).tagName)}),k(a,m)};q(st,a=>{t(x)&&t(i)&&t(s)&&t(g)&&a(ht)})}j(et,a=>r=a,()=>r),A(a=>ot=Et(et,1,"infobox infobox-left infobox-right infobox-bottom infobox-top svelte-1p90mmv",null,ot,a),[()=>({dark:o.appTheme==="dark"})]),k(B,rt),gt()}var re=N("<div></div>");function ne(B,o){ft(o,!0);let n,r;function L(){const v=document.getElementById("garden_app").getBoundingClientRect(),i=document.body.getBoundingClientRect(),s=Math.max(v.height,i.height),x=Math.max(v.width,i.width);n.style.margin=o.appMargin;const g=o.gridSettings.size,h=o.gridSettings.color;n.style.backgroundSize=`${g}px ${g}px`;const R=getComputedStyle(n);n.style.width=`calc(${x}px - ${R.marginLeft} - ${R.marginRight})`,n.style.height=`calc(${s}px - ${R.marginTop} - ${R.marginBottom})`,o.gridSettings.style==="lined"&&(n.style.backgroundImage=`linear-gradient(to right, ${h} 1px, transparent 1px), linear-gradient(to bottom, ${h} 1px, transparent 1px)`),o.gridSettings.style==="dotted"&&(n.style.top=`-${g/2}px`,n.style.left=`-${g/2}px`,n.style.backgroundImage=`radial-gradient(circle, ${h} 1px, transparent 1px)`)}pt(()=>{o.contentPane&&(L(),r=new ResizeObserver(()=>{L()}),r.observe(o.contentPane),r.observe(document.body))}),Pt(()=>{r.disconnect()});var l=re();j(l,v=>n=v,()=>n),A(()=>Et(l,1,Ot({grid:!0,lined:o.gridSettings.style==="lined",dotted:o.gridSettings.style==="dotted"}),"svelte-17fzfog")),k(B,l),gt()}var le=N('<!> <!> <div id="garden_app"><!></div>',1);function se(B,o){ft(o,!0);let n=wt(o,"componentMap",19,()=>({})),r=wt(o,"dasMap",19,()=>({})),L=o.config.hookTimeout|5e3,l=u(mt({})),v=u(mt({})),i,s=u(!1),x=u(void 0),g,h,R,S=u(void 0),G={},K,Q,V=u(!1),X=u(!1),Z=u(mt({})),I=[],P=[],T=[],M=[],Y=[],O=u(void 0),J=u(!1);pt(()=>{c(J,!0)}),window.addEventListener("message",e=>{o.config.themeHandler&&o.config.themeHandler(e.data.theme),c(s,e.data.stageSize==="full"),c(V,e.data.showInspector===!0),c(X,e.data.showGrid===!0),c(Z,e.data.gridSettings,!0),c(l,r()[e.data.componentName],!0);const d=t(l)?.examples?.find(w=>w.title===e.data.selectedExample)??{},p=e.data?.args&&typeof e.data.args=="object"?e.data.args:{};if(c(v,{...d,input:{...d?.input??{},...p}},!0),K=R!==e.data.componentName,R=e.data.componentName||"Welcome",Q=i!==e.data.selectedExample,i=e.data.selectedExample,c(x,e.data.appTheme,!0),c(S,n()?.[R],!0),o.config.devmodus){G={};return}else rt(t(S),t(v),t(l))});async function it(e){if(!e)return _t;for(const d in o.config.renderer)if(new RegExp(d+"$").test(e))return o.config.renderer[d];return _t}async function rt(e,d,p){if(o.config.renderer){const w=await it(p?.file);w!==g&&await lt(w)}await nt();try{h?.updateComponent({component:e,selectedExample:d,das:p,decorators:p?.decorators,afterRenderHook:$})}catch(w){console.error(w)}}async function $(){await tt(Y)}let H=[];async function nt(){if(K){Y=[t(v)?.play],M=t(l)?.beforeAll?[t(l)?.beforeAll]:[];const e=t(l)?.hooks?H.filter(f=>!t(l)?.hooks.find(W=>W===f)):H,d=H.length>0?t(l)?.hooks.filter(f=>!H.find(W=>f===W)):t(l)?.hooks??[];H=t(l)?.hooks??[];const p=H.filter(f=>f.before).map(f=>f.before)??[];P=[...P,...e.filter(f=>f.afterAll).map(f=>f.afterAll)],M=[...d.filter(f=>f.beforeAll).map(f=>f.beforeAll),...M],T=[...p,t(l)?.before,t(v)?.before].filter(f=>!!f),await tt([...I,...P,...M,...T]);const w=H.filter(f=>f.after).map(f=>f.after)??[];P=t(l)?.afterAll?[t(l)?.afterAll]:[],I=[t(v)?.after,t(l)?.after,...w].filter(f=>!!f),M=[]}else Q&&(Y=[t(v)?.play],T=[t(l)?.before,t(v)?.before],await tt([...I,...T]),I=[t(v)?.after,t(l)?.after])}async function lt(e){try{await h?.destroy()}catch(d){console.error("Could not destroy current renderer",d)}h=await e.create()}Dt(()=>{o.config.devmodus||lt(_t)});function ut(e){t(l).out&&t(l).out.forEach(d=>{if(e.detail[d.name]&&(console.log(e.detail[d.name]),t(v).redirect&&t(v).redirect[d.name])){const p=t(v).redirect[d.name];G[p]=e.detail[d.name]}})}async function tt(e){for(const d of e)if(d)try{await Promise.race([et(L),d()])}catch(p){console.error(p)}}function et(e){return new Promise((d,p)=>{setTimeout(()=>p(new Error("Timeout on")),e)})}var ot=le(),st=U(ot);{var ht=e=>{ie(e,{get contentPane(){return t(O)},get appTheme(){return t(x)}})};q(st,e=>{t(J)&&t(V)&&t(O)&&e(ht)})}var a=y(st,2);{var m=e=>{{let d=Rt(()=>t(s)?"0.5rem 0.5rem 0":0);ne(e,{get gridSettings(){return t(Z)},get contentPane(){return t(O)},get appMargin(){return t(d)}})}};q(a,e=>{t(J)&&t(X)&&e(m)})}var _=y(a,2);let F;var C=b(_);{var E=e=>{var d=kt(),p=U(d);jt(p,()=>t(S),(w,f)=>{f(w,qt(()=>t(v)?.input,()=>G,{$$events:{out:ut}}))}),k(e,d)};q(C,e=>{o.config.devmodus&&t(S)&&(t(l)?.file??"").indexOf(".svelte")>0&&e(E)})}j(_,e=>c(O,e),()=>t(O)),A(e=>F=Et(_,1,"svelte-16w9tv2",null,F,e),[()=>({full:t(s)})]),k(B,ot),gt()}Bt(se,{target:document.body,props:{componentMap:Qt,dasMap:Kt,config:Zt}});