screens can now select a transition rather than only use fade

packages/client/src/components/Screen.svelte

@@ -18,9 +18,7 @@
 <!-- Ensure to fully remount when screen changes -->
 {#key screenDefinition?._id}
   <Provider key="url" data={params}>
-    <div in:fade>
       <Component definition={screenDefinition} />
-    </div>
   </Provider>
 {/key}
 

packages/standard-components/manifest.json

@@ -5,6 +5,7 @@
     "icon": "ri-layout-column-line",
     "hasChildren": true,
     "styleable": true,
+    "transitionable": true,
     "settings": [
       {
         "type": "select",
@@ -286,7 +287,6 @@
     "description": "A basic component for displaying images",
     "icon": "ri-image-line",
     "styleable": true,
-    "transitionable": true,
     "settings": [
       {
         "type": "text",

packages/standard-components/src/Container.svelte

@@ -1,62 +1,62 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, transition } = getContext("sdk")
   const component = getContext("component")
 
   export let type = "div"
 </script>
 
 {#if type === 'div'}
-  <div use:styleable={$component.styles}>
+  <div  in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </div>
 {:else if type === 'header'}
-  <header use:styleable={$component.styles}>
+  <header in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </header>
 {:else if type === 'main'}
-  <main use:styleable={$component.styles}>
+  <main in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </main>
 {:else if type === 'footer'}
-  <footer use:styleable={$component.styles}>
+  <footer in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </footer>
 {:else if type === 'aside'}
-  <aside use:styleable={$component.styles}>
+  <aside in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </aside>
 {:else if type === 'summary'}
-  <summary use:styleable={$component.styles}>
+  <summary in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </summary>
 {:else if type === 'details'}
-  <details use:styleable={$component.styles}>
+  <details in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </details>
 {:else if type === 'article'}
-  <article use:styleable={$component.styles}>
+  <article in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </article>
 {:else if type === 'nav'}
-  <nav use:styleable={$component.styles}>
+  <nav in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </nav>
 {:else if type === 'mark'}
-  <mark use:styleable={$component.styles}>
+  <mark in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </mark>
 {:else if type === 'figure'}
-  <figure use:styleable={$component.styles}>
+  <figure in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </figure>
 {:else if type === 'figcaption'}
-  <figcaption use:styleable={$component.styles}>
+  <figcaption in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </figcaption>
 {:else if type === 'paragraph'}
-  <p use:styleable={$component.styles}>
+  <p in:transition={{type: $component.transition}} use:styleable={$component.styles}>
     <slot />
   </p>
 {/if}

packages/standard-components/src/Image.svelte

@@ -17,5 +17,4 @@
   class={className}
   src={url}
   alt={description}
-  use:styleable={$component.styles}
-  in:transition={{type: $component.transition}} />
+  use:styleable={$component.styles} />