Merge pull request #1918 from Budibase/spectrum-apps

Spectrum themed apps

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -9,10 +9,10 @@
 
   export let value
   export let size = "M"
+  export let spectrumTheme
 
   let open = false
 
-  $: color = value || "transparent"
   $: customValue = getCustomValue(value)
   $: checkColor = getCheckColor(value)
 
@@ -21,7 +21,8 @@
     {
       label: "Grays",
       colors: [
-        "white",
+        "gray-50",
+        "gray-75",
         "gray-100",
         "gray-200",
         "gray-300",
@@ -31,7 +32,6 @@
         "gray-700",
         "gray-800",
         "gray-900",
-        "black",
       ],
     },
     {
@@ -86,7 +86,7 @@
       return value
     }
     let found = false
-    const comparisonValue = value.substring(35, value.length - 1)
+    const comparisonValue = value.substring(28, value.length - 1)
     for (let category of categories) {
       found = category.colors.includes(comparisonValue)
       if (found) {
@@ -102,17 +102,19 @@
 
   const getCheckColor = value => {
     return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
-      ? "black"
+      ? "var(--spectrum-global-color-gray-900)"
-      : "white"
+      : "var(--spectrum-global-color-gray-50)"
   }
 </script>
 
 <div class="container">
-  <div
+  <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
-    class="preview size--{size || 'M'}"
+    <div
-    style="background: {color};"
+      class="fill {spectrumTheme || ''}"
-    on:click={() => (open = true)}
+      style={value ? `background: ${value};` : ""}
-  />
+      class:placeholder={!value}
+    />
+  </div>
   {#if open}
     <div
       use:clickOutside={() => (open = false)}
@@ -126,15 +128,19 @@
             {#each category.colors as color}
               <div
                 on:click={() => {
-                  onChange(`var(--spectrum-global-color-static-${color})`)
+                  onChange(`var(--spectrum-global-color-${color})`)
                 }}
                 class="color"
-                style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
                 title={prettyPrint(color)}
               >
-                {#if value === `var(--spectrum-global-color-static-${color})`}
+                <div
-                  <Icon name="Checkmark" size="S" />
+                  class="fill {spectrumTheme || ''}"
-                {/if}
+                  style="background: var(--spectrum-global-color-{color}); color: {checkColor};"
+                >
+                  {#if value === `var(--spectrum-global-color-${color})`}
+                    <Icon name="Checkmark" size="S" />
+                  {/if}
+                </div>
               </div>
             {/each}
           </div>
@@ -170,12 +176,43 @@
     width: 32px;
     height: 32px;
     border-radius: 100%;
+    position: relative;
     transition: border-color 130ms ease-in-out;
-    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-400);
   }
   .preview:hover {
     cursor: pointer;
-    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
+    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-400);
+  }
+  .fill {
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: grid;
+    place-items: center;
+  }
+  .fill.placeholder {
+    background-position: 0 0, 10px 10px;
+    background-size: 20px 20px;
+    background-image: linear-gradient(
+        45deg,
+        #eee 25%,
+        transparent 25%,
+        transparent 75%,
+        #eee 75%,
+        #eee 100%
+      ),
+      linear-gradient(
+        45deg,
+        #eee 25%,
+        white 25%,
+        white 75%,
+        #eee 75%,
+        #eee 100%
+      );
   }
   .size--S {
     width: 20px;
@@ -219,8 +256,7 @@
     width: 16px;
     border-radius: 100%;
     box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
-    display: grid;
+    position: relative;
-    place-items: center;
   }
   .color:hover {
     cursor: pointer;
@@ -236,4 +272,8 @@
   .category--custom .heading {
     margin-bottom: var(--spacing-xs);
   }
+
+  .spectrum-wrapper {
+    background-color: transparent;
+  }
 </style>

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -145,4 +145,7 @@
     height: 100vh;
     z-index: 999;
   }
+  :global(.flatpickr-calendar) {
+    font-family: "Source Sans Pro", sans-serif;
+  }
 </style>

packages/builder/assets/error.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 48 48" height="48px" viewBox="0 0 48 48" width="48px" xml:space="preserve">
+  <g>
+    <g>
+      <path d="M9,42H3c-0.552,0-1-0.449-1-1v-3.5C2,37.224,2.224,37,2.5,37S3,37.224,3,37.5V41h6    c0.276,0,0.5,0.224,0.5,0.5S9.276,42,9,42z"/>
+        <path d="M45,42h-6c-0.276,0-0.5-0.224-0.5-0.5S38.724,41,39,41h6V13H3v27c0,0.276-0.224,0.5-0.5,0.5S2,40.276,2,40    V12h44v29C46,41.551,45.552,42,45,42z"/>
+        <g>
+        <path d="M45.5,13h-43C2.224,13,2,12.776,2,12.5v-5C2,6.673,2.673,6,3.5,6h41C45.327,6,46,6.673,46,7.5v5     C46,12.776,45.776,13,45.5,13z M3,12h42V7.5C45,7.224,44.775,7,44.5,7h-41C3.225,7,3,7.224,3,7.5V12z"/>
+      </g>
+        <g>
+        <g>
+          <path d="M16.5,11c-0.827,0-1.5-0.673-1.5-1.5S15.673,8,16.5,8S18,8.673,18,9.5S17.327,11,16.5,11z M16.5,9      C16.225,9,16,9.224,16,9.5s0.225,0.5,0.5,0.5S17,9.776,17,9.5S16.775,9,16.5,9z"/>
+        </g>
+            <g>
+          <path d="M11.5,11c-0.827,0-1.5-0.673-1.5-1.5S10.673,8,11.5,8S13,8.673,13,9.5S12.327,11,11.5,11z M11.5,9      C11.225,9,11,9.224,11,9.5s0.225,0.5,0.5,0.5S12,9.776,12,9.5S11.775,9,11.5,9z"/>
+        </g>
+            <g>
+          <path d="M6.5,11C5.673,11,5,10.327,5,9.5S5.673,8,6.5,8S8,8.673,8,9.5S7.327,11,6.5,11z M6.5,9      C6.225,9,6,9.224,6,9.5S6.225,10,6.5,10S7,9.776,7,9.5S6.775,9,6.5,9z"/>
+        </g>
+      </g>
+    </g>
+      <g>
+      <g>
+        <path d="M35.696,44H12.304c-0.728,0-1.313-0.284-1.605-0.779c-0.289-0.489-0.259-1.126,0.084-1.749L22.58,19.996     c0.709-1.285,2.132-1.285,2.839,0l11.799,21.477v0c0.343,0.623,0.373,1.26,0.084,1.749C37.01,43.716,36.424,44,35.696,44z M24,20     c-0.176,0-0.379,0.179-0.544,0.478L11.659,41.954c-0.168,0.306-0.205,0.582-0.101,0.758C11.667,42.895,11.938,43,12.304,43     h23.393c0.365,0,0.637-0.105,0.745-0.288c0.104-0.177,0.067-0.453-0.101-0.758v0L24.543,20.478C24.379,20.179,24.176,20,24,20z"/>
+      </g>
+          <g>
+        <path d="M24,36L24,36c-0.225,0-0.421-0.15-0.481-0.366C23.456,35.412,22,30.169,22,28c0-1.103,0.897-2,2-2     s2,0.897,2,2c0,2.232-1.457,7.417-1.519,7.636C24.42,35.851,24.224,36,24,36z M24,27c-0.552,0-1,0.449-1,1     c0,1.266,0.569,3.793,1.002,5.531C24.435,31.806,25,29.301,25,28C25,27.449,24.552,27,24,27z"/>
+      </g>
+          <g>
+        <path d="M24,41c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S25.103,41,24,41z M24,38c-0.552,0-1,0.449-1,1     s0.448,1,1,1s1-0.449,1-1S24.552,38,24,38z"/>
+      </g>
+    </g>
+  </g>
+</svg>

packages/builder/cypress/integration/createBinding.spec.js

@@ -29,7 +29,7 @@ context("Create Bindings", () => {
       // The builder preview pages don't have a real URL, so all we can do
       // is check that we were able to bind to the property, and that the
       // component exists on the page
-      cy.getComponent(componentId).should("have.text", "Placeholder text")
+      cy.getComponent(componentId).should("have.text", "New Paragraph")
     })
   })
 

packages/builder/src/builderStore/store/frontend.js

@@ -8,7 +8,6 @@ import {
   selectedComponent,
   selectedAccessRole,
 } from "builderStore"
-// Backendstores
 import {
   datasources,
   integrations,
@@ -43,6 +42,7 @@ const INITIAL_FRONTEND_STATE = {
   appId: "",
   routes: {},
   clientLibPath: "",
+  theme: "",
 }
 
 export const getFrontendStore = () => {
@@ -62,6 +62,7 @@ export const getFrontendStore = () => {
         url: application.url,
         layouts,
         screens,
+        theme: application.theme,
         hasAppPackage: true,
         appInstance: application.instance,
         clientLibPath,
@@ -79,6 +80,20 @@ export const getFrontendStore = () => {
       database.set(application.instance)
       tables.init()
     },
+    theme: {
+      save: async theme => {
+        const appId = get(store).appId
+        const response = await api.put(`/api/applications/${appId}`, { theme })
+        if (response.status === 200) {
+          store.update(state => {
+            state.theme = theme
+            return state
+          })
+        } else {
+          throw new Error("Error updating theme")
+        }
+      },
+    },
     routing: {
       fetch: async () => {
         const response = await api.get("/api/routing")
@@ -196,6 +211,11 @@ export const getFrontendStore = () => {
         const response = await api.post(`/api/layouts`, layoutToSave)
         const savedLayout = await response.json()
 
+        // Abort if saving failed
+        if (response.status !== 200) {
+          return
+        }
+
         store.update(state => {
           const layoutIdx = state.layouts.findIndex(
             stateLayout => stateLayout._id === savedLayout._id
@@ -313,16 +333,6 @@ export const getFrontendStore = () => {
       create: async (componentName, presetProps) => {
         const selected = get(selectedComponent)
         const asset = get(currentAsset)
-        const state = get(store)
-
-        // Only allow one screen slot, and in the layout
-        if (componentName.endsWith("screenslot")) {
-          const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT
-          const slot = findComponentType(asset.props, componentName)
-          if (!isLayout || slot != null) {
-            return
-          }
-        }
 
         // Create new component
         const componentInstance = store.actions.components.createInstance(

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -38,8 +38,6 @@ const createScreen = table => {
     .instanceName("Form")
     .customProps({
       actionType: "Create",
-      theme: "spectrum--lightest",
-      size: "spectrum--medium",
       dataSource: {
         label: table.name,
         tableId: table._id,

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -8,7 +8,6 @@ import {
   makeTitleContainer,
   makeSaveButton,
   makeMainForm,
-  spectrumColor,
   makeDatasourceFormComponents,
 } from "./utils/commonComponents"
 
@@ -26,36 +25,13 @@ export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
 export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
 
 function generateTitleContainer(table, title, formId, repeaterId) {
-  // have to override style for this, its missing margin
+  const saveButton = makeSaveButton(table, formId)
-  const saveButton = makeSaveButton(table, formId).normalStyle({
-    background: "#000000",
-    "border-width": "0",
-    "border-style": "None",
-    color: "#fff",
-    "font-weight": "600",
-    "font-size": "14px",
-  })
-
   const deleteButton = new Component("@budibase/standard-components/button")
-    .normalStyle({
-      background: "transparent",
-      "border-width": "0",
-      "border-style": "None",
-      color: "#9e9e9e",
-      "font-weight": "600",
-      "font-size": "14px",
-      "margin-right": "8px",
-      "margin-left": "16px",
-    })
-    .hoverStyle({
-      background: "transparent",
-      color: "#4285f4",
-    })
-    .customStyle(spectrumColor(700))
     .text("Delete")
     .customProps({
-      className: "",
+      type: "secondary",
-      disabled: false,
+      quiet: true,
+      size: "M",
       onClick: [
         {
           parameters: {
@@ -76,7 +52,19 @@ function generateTitleContainer(table, title, formId, repeaterId) {
     })
     .instanceName("Delete Button")
 
-  return makeTitleContainer(title).addChild(deleteButton).addChild(saveButton)
+  const buttons = new Component("@budibase/standard-components/container")
+    .instanceName("Button Container")
+    .customProps({
+      direction: "row",
+      hAlign: "right",
+      vAlign: "middle",
+      size: "shrink",
+      gap: "M",
+    })
+    .addChild(deleteButton)
+    .addChild(saveButton)
+
+  return makeTitleContainer(title).addChild(buttons)
 }
 
 const createScreen = table => {

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -19,21 +19,10 @@ export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
 
 function generateTitleContainer(table) {
   const newButton = new Component("@budibase/standard-components/button")
-    .normalStyle({
-      background: "#000000",
-      "border-width": "0",
-      "border-style": "None",
-      color: "#fff",
-      "font-weight": "600",
-      "font-size": "14px",
-    })
-    .hoverStyle({
-      background: "#4285f4",
-    })
     .text("Create New")
     .customProps({
-      className: "",
+      size: "M",
-      disabled: false,
+      type: "primary",
       onClick: [
         {
           parameters: {
@@ -46,12 +35,6 @@ function generateTitleContainer(table) {
     .instanceName("New Button")
 
   const heading = new Component("@budibase/standard-components/heading")
-    .normalStyle({
-      margin: "0px",
-      flex: "1 1 auto",
-      "text-transform": "capitalize",
-    })
-    .type("h2")
     .instanceName("Title")
     .text(table.name)
     .customProps({
@@ -60,14 +43,12 @@ function generateTitleContainer(table) {
     })
 
   return new Component("@budibase/standard-components/container")
-    .normalStyle({
-      "margin-bottom": "32px",
-    })
     .customProps({
       direction: "row",
       hAlign: "stretch",
       vAlign: "middle",
       size: "shrink",
+      gap: "M",
     })
     .instanceName("Title Container")
     .addChild(heading)
@@ -91,68 +72,35 @@ const createScreen = table => {
   const spectrumTable = new Component("@budibase/standard-components/table")
     .customProps({
       dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,
-      theme: "spectrum--lightest",
       showAutoColumns: false,
-      quiet: true,
+      quiet: false,
-      size: "spectrum--medium",
       rowCount: 8,
     })
     .instanceName(`${table.name} Table`)
 
   const safeTableId = makePropSafe(spectrumTable._json._id)
   const safeRowId = makePropSafe("_id")
-  const viewButton = new Component("@budibase/standard-components/button")
+  const viewLink = new Component("@budibase/standard-components/link")
     .customProps({
       text: "View",
-      onClick: [
+      url: `${rowListUrl(table)}/{{ ${safeTableId}.${safeRowId} }}`,
-        {
+      size: "S",
-          "##eventHandlerType": "Navigate To",
+      color: "var(--spectrum-global-color-gray-600)",
-          parameters: {
+      align: "left",
-            url: `${rowListUrl(table)}/{{ ${safeTableId}.${safeRowId} }}`,
-          },
-        },
-      ],
     })
-    .instanceName("View Button")
     .normalStyle({
-      background: "transparent",
+      ["margin-left"]: "16px",
-      "font-weight": "600",
+      ["margin-right"]: "16px",
-      color: "#888",
-      "border-width": "0",
-    })
-    .hoverStyle({
-      color: "#4285f4",
     })
+    .instanceName("View Link")
 
-  spectrumTable.addChild(viewButton)
+  spectrumTable.addChild(viewLink)
   provider.addChild(spectrumTable)
 
-  const mainContainer = new Component("@budibase/standard-components/container")
-    .normalStyle({
-      background: "white",
-      "border-radius": "0.5rem",
-      "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-      "border-width": "2px",
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-style": "None",
-      "padding-top": "48px",
-      "padding-bottom": "48px",
-      "padding-right": "48px",
-      "padding-left": "48px",
-    })
-    .customProps({
-      direction: "column",
-      hAlign: "stretch",
-      vAlign: "top",
-      size: "shrink",
-    })
-    .instanceName("Container")
-    .addChild(generateTitleContainer(table))
-    .addChild(provider)
-
   return new Screen()
     .route(rowListUrl(table))
     .instanceName(`${table.name} - List`)
-    .addChild(mainContainer)
+    .addChild(generateTitleContainer(table))
+    .addChild(provider)
     .json()
 }

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -8,23 +8,16 @@ export function spectrumColor(number) {
   // God knows why. It seems to think optional chaining further down the
   // file is invalid if the word g-l-o-b-a-l is found - hence the reason this
   // statement is split into parts.
-  return "color: var(--spectrum-glo" + `bal-color-gray-${number});`
+  return "var(--spectrum-glo" + `bal-color-gray-${number})`
 }
 
 export function makeLinkComponent(tableName) {
   return new Component("@budibase/standard-components/link")
-    .normalStyle({
-      color: "#757575",
-      "text-transform": "capitalize",
-    })
-    .hoverStyle({
-      color: "#4285f4",
-    })
-    .customStyle(spectrumColor(700))
     .text(tableName)
     .customProps({
       url: `/${tableName.toLowerCase()}`,
       openInNewTab: false,
+      color: spectrumColor(700),
       size: "S",
       align: "left",
     })
@@ -33,19 +26,12 @@ export function makeLinkComponent(tableName) {
 export function makeMainForm() {
   return new Component("@budibase/standard-components/form")
     .normalStyle({
-      width: "700px",
+      width: "600px",
-      padding: "0px",
-      "border-radius": "0.5rem",
-      "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-      "padding-top": "48px",
-      "padding-bottom": "48px",
-      "padding-right": "48px",
-      "padding-left": "48px",
     })
     .instanceName("Form")
 }
 
-export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
+export function makeBreadcrumbContainer(tableName, text) {
   const link = makeLinkComponent(tableName).instanceName("Back Link")
 
   const arrowText = new Component("@budibase/standard-components/text")
@@ -53,42 +39,27 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
     .normalStyle({
       "margin-right": "4px",
       "margin-left": "4px",
-      "margin-top": "0px",
-      "margin-bottom": "0px",
     })
-    .customStyle(spectrumColor(700))
     .text(">")
     .instanceName("Arrow")
     .customProps({
+      color: spectrumColor(700),
       size: "S",
       align: "left",
     })
 
-  const textStyling = {
-    color: "#000000",
-    "margin-top": "0px",
-    "margin-bottom": "0px",
-  }
-  if (capitalise) {
-    textStyling["text-transform"] = "capitalize"
-  }
   const identifierText = new Component("@budibase/standard-components/text")
-    .type("none")
-    .normalStyle(textStyling)
-    .customStyle(spectrumColor(700))
     .text(text)
     .instanceName("Identifier")
     .customProps({
+      color: spectrumColor(700),
       size: "S",
       align: "left",
     })
 
   return new Component("@budibase/standard-components/container")
-    .normalStyle({
-      "font-size": "14px",
-      color: "#757575",
-    })
     .customProps({
+      gap: "N",
       direction: "row",
       hAlign: "left",
       vAlign: "middle",
@@ -102,22 +73,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
 
 export function makeSaveButton(table, formId) {
   return new Component("@budibase/standard-components/button")
-    .normalStyle({
-      background: "#000000",
-      "border-width": "0",
-      "border-style": "None",
-      color: "#fff",
-      "font-weight": "600",
-      "font-size": "14px",
-      "margin-left": "16px",
-    })
-    .hoverStyle({
-      background: "#4285f4",
-    })
     .text("Save")
     .customProps({
-      className: "",
+      type: "primary",
-      disabled: false,
+      size: "M",
       onClick: [
         {
           "##eventHandlerType": "Validate Form",
@@ -145,12 +104,6 @@ export function makeSaveButton(table, formId) {
 
 export function makeTitleContainer(title) {
   const heading = new Component("@budibase/standard-components/heading")
-    .normalStyle({
-      margin: "0px",
-      flex: "1 1 auto",
-    })
-    .customStyle(spectrumColor(900))
-    .type("h2")
     .instanceName("Title")
     .text(title)
     .customProps({
@@ -168,6 +121,7 @@ export function makeTitleContainer(title) {
       hAlign: "stretch",
       vAlign: "middle",
       size: "shrink",
+      gap: "M",
     })
     .instanceName("Title Container")
     .addChild(heading)

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -0,0 +1,97 @@
+<script>
+  import { Icon, Combobox, Drawer, Button } from "@budibase/bbui"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/dataBinding"
+  import BindingPanel from "components/common/bindings/BindingPanel.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let panel = BindingPanel
+  export let value = ""
+  export let bindings = []
+  export let title = "Bindings"
+  export let placeholder
+  export let label
+  export let disabled = false
+  export let options
+
+  const dispatch = createEventDispatcher()
+  let bindingDrawer
+  $: tempValue = Array.isArray(value) ? value : []
+  $: readableValue = runtimeToReadableBinding(bindings, value)
+
+  const handleClose = () => {
+    onChange(tempValue)
+    bindingDrawer.hide()
+  }
+
+  const onChange = value => {
+    dispatch("change", readableToRuntimeBinding(bindings, value))
+  }
+</script>
+
+<div class="control">
+  <Combobox
+    {label}
+    {disabled}
+    value={readableValue}
+    on:change={event => onChange(event.detail)}
+    {placeholder}
+    {options}
+  />
+  {#if !disabled}
+    <div class="icon" on:click={bindingDrawer.show}>
+      <Icon size="S" name="FlashOn" />
+    </div>
+  {/if}
+</div>
+<Drawer bind:this={bindingDrawer} {title}>
+  <svelte:fragment slot="description">
+    Add the objects on the left to enrich your text.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
+  <svelte:component
+    this={panel}
+    slot="body"
+    value={readableValue}
+    close={handleClose}
+    on:update={event => (tempValue = event.detail)}
+    bindableProperties={bindings}
+  />
+</Drawer>
+
+<style>
+  .control {
+    flex: 1;
+    position: relative;
+  }
+
+  .icon {
+    right: 31px;
+    bottom: 1px;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-right: 1px solid var(--spectrum-alias-border-color);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
+  }
+
+  .icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
+  }
+</style>

packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { store } from "builderStore"
+
+  const themeOptions = [
+    {
+      label: "Lightest",
+      value: "spectrum--lightest",
+    },
+    {
+      label: "Light",
+      value: "spectrum--light",
+    },
+    {
+      label: "Dark",
+      value: "spectrum--dark",
+    },
+    {
+      label: "Darkest",
+      value: "spectrum--darkest",
+    },
+  ]
+</script>
+
+<div>
+  <Select
+    value={$store.theme || "spectrum--light"}
+    options={themeOptions}
+    placeholder={null}
+    on:change={e => store.actions.theme.save(e.detail)}
+  />
+</div>
+
+<style>
+  div {
+    padding-right: 8px;
+  }
+</style>

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -5,12 +5,16 @@
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
   import { FrontendTypes } from "constants"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { ProgressCircle, Layout, Heading, Body } from "@budibase/bbui"
+  import ErrorSVG from "assets/error.svg?raw"
 
   let iframe
   let layout
   let screen
   let confirmDeleteDialog
   let idToDelete
+  let loading = true
+  let error
 
   // Create screen slot placeholder for use when a page is selected rather
   // than a screen
@@ -44,6 +48,7 @@
     screen,
     selectedComponentId,
     previewType: $store.currentFrontEndType,
+    theme: $store.theme,
   }
 
   // Saving pages and screens to the DB causes them to have _revs.
@@ -68,11 +73,21 @@
   onMount(() => {
     // Initialise the app when mounted
     iframe.contentWindow.addEventListener(
-      "bb-ready",
+      "ready",
       () => refreshContent(strippedJson),
       { once: true }
     )
 
+    // Catch any app errors
+    iframe.contentWindow.addEventListener(
+      "error",
+      event => {
+        loading = false
+        error = event.detail || "An unknown error occurred"
+      },
+      { once: true }
+    )
+
     // Add listener for events sent by cliebt library in preview
     iframe.contentWindow.addEventListener("bb-event", event => {
       const { type, data } = event.detail
@@ -83,8 +98,10 @@
       } else if (type === "delete-component" && data.id) {
         idToDelete = data.id
         confirmDeleteDialog.show()
+      } else if (type === "preview-loaded") {
+        loading = false
       } else {
-        console.log(data)
+        console.warning(`Client sent unknown event type: ${type}`)
       }
     })
   })
@@ -99,11 +116,25 @@
 </script>
 
 <div class="component-container">
+  {#if loading}
+    <div class="center">
+      <ProgressCircle />
+    </div>
+  {:else if error}
+    <div class="center error">
+      <Layout justifyItems="center" gap="S">
+        {@html ErrorSVG}
+        <Heading size="L">App preview failed to load</Heading>
+        <Body size="S">{error}</Body>
+      </Layout>
+    </div>
+  {/if}
   <iframe
     style="height: 100%; width: 100%"
     title="componentPreview"
     bind:this={iframe}
     srcdoc={template}
+    class:hidden={loading || error}
   />
 </div>
 <ConfirmDialog
@@ -131,4 +162,32 @@
     width: 100%;
     background-color: transparent;
   }
+  .center {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    z-index: 1;
+  }
+  .hidden {
+    opacity: 0;
+  }
+  .error :global(svg) {
+    fill: var(--spectrum-global-color-gray-500);
+    width: 80px;
+    height: 80px;
+  }
+  .error :global(h1),
+  .error :global(p) {
+    color: var(--spectrum-global-color-gray-800);
+  }
+  .error :global(p) {
+    font-style: italic;
+    margin-top: -0.5em;
+  }
+  .error :global(h1) {
+    font-weight: 400;
+    margin: 0;
+  }
 </style>

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -27,9 +27,7 @@
     "name": "Card",
     "icon": "Card",
     "children": [
-      "stackedlist",
+      "spectrumcard",
-      "card",
-      "cardhorizontal",
       "cardstat"
     ]
   },
@@ -57,13 +55,6 @@
       "icon",
       "embed"
     ]
-  },
-  {
-    "name": "Other",
-    "icon": "More",
-    "children": [
-      "screenslot"
-    ]
   }
 ]
 

packages/builder/src/components/design/AppPreview/iframeTemplate.js

@@ -25,7 +25,10 @@ export default `
         flex-direction: column;
         justify-content: flex-start;
         align-items: stretch;
-        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+      }
+      html.loaded {
+              box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
+
       }
       body {
         flex: 1 1 auto;
@@ -46,7 +49,14 @@ export default `
         }
 
         // Extract data from message
-        const { selectedComponentId, layout, screen, previewType, appId } = JSON.parse(event.data)
+        const {
+          selectedComponentId,
+          layout,
+          screen,
+          previewType,
+          appId,
+          theme
+        } = JSON.parse(event.data)
 
         // Set some flags so the app knows we're in the builder
         window["##BUDIBASE_IN_BUILDER##"] = true
@@ -56,15 +66,23 @@ export default `
         window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
         window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
         window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
+        window["##BUDIBASE_PREVIEW_THEME##"] = theme
 
         // Initialise app
-        if (window.loadBudibase) {
+        try {
-          loadBudibase()
+          if (window.loadBudibase) {
+            window.loadBudibase()
+            document.documentElement.classList.add("loaded")
+          } else {
+            throw "The client library couldn't be loaded"
+          }
+        } catch (error) {
+          window.dispatchEvent(new CustomEvent("error", { detail: error }))
         }
       }
 
       window.addEventListener("message", receiveMessage)
-      window.dispatchEvent(new Event("bb-ready"))
+      window.dispatchEvent(new Event("ready"))
     </script>
   </head>
   <body/>

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -65,52 +65,56 @@
   }
 </script>
 
-<ActionMenu>
+{#if definition.editable !== false}
-  <div slot="control" class="icon">
+  <ActionMenu>
-    <Icon size="S" hoverable name="MoreSmallList" />
+    <div slot="control" class="icon">
-  </div>
+      <Icon size="S" hoverable name="MoreSmallList" />
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
+    </div>
-  <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
+    <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
-    Move up
+      Delete
-  </MenuItem>
+    </MenuItem>
-  <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
+    <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
-    Move down
+      Move up
-  </MenuItem>
+    </MenuItem>
-  <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
+    <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>
-    Duplicate
+      Move down
-  </MenuItem>
+    </MenuItem>
-  <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
+    <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>
-    Cut
+      Duplicate
-  </MenuItem>
+    </MenuItem>
-  <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
+    <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>
-    Copy
+      Cut
-  </MenuItem>
+    </MenuItem>
-  <MenuItem
+    <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>
-    icon="LayersBringToFront"
+      Copy
-    on:click={() => pasteComponent("above")}
+    </MenuItem>
-    disabled={noPaste}
+    <MenuItem
-  >
+      icon="LayersBringToFront"
-    Paste above
+      on:click={() => pasteComponent("above")}
-  </MenuItem>
+      disabled={noPaste}
-  <MenuItem
+    >
-    icon="LayersSendToBack"
+      Paste above
-    on:click={() => pasteComponent("below")}
+    </MenuItem>
-    disabled={noPaste}
+    <MenuItem
-  >
+      icon="LayersSendToBack"
-    Paste below
+      on:click={() => pasteComponent("below")}
-  </MenuItem>
+      disabled={noPaste}
-  <MenuItem
+    >
-    icon="ShowOneLayer"
+      Paste below
-    on:click={() => pasteComponent("inside")}
+    </MenuItem>
-    disabled={noPaste || noChildrenAllowed}
+    <MenuItem
-  >
+      icon="ShowOneLayer"
-    Paste inside
+      on:click={() => pasteComponent("inside")}
-  </MenuItem>
+      disabled={noPaste || noChildrenAllowed}
-</ActionMenu>
+    >
-<ConfirmDialog
+      Paste inside
-  bind:this={confirmDeleteDialog}
+    </MenuItem>
-  title="Confirm Deletion"
+  </ActionMenu>
-  body={`Are you sure you wish to delete this '${definition?.name}' component?`}
+  <ConfirmDialog
-  okText="Delete Component"
+    bind:this={confirmDeleteDialog}
-  onOk={deleteComponent}
+    title="Confirm Deletion"
-/>
+    body={`Are you sure you wish to delete this '${definition?.name}' component?`}
+    okText="Delete Component"
+    onOk={deleteComponent}
+  />
+{/if}

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte

@@ -3,6 +3,7 @@
   import { DropEffect, DropPosition } from "./dragDropStore"
   import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
+  import { capitalise } from "helpers"
 
   export let components = []
   export let currentComponent
@@ -10,8 +11,6 @@
   export let level = 0
   export let dragDropStore
 
-  const isScreenslot = name => name?.endsWith("screenslot")
-
   const selectComponent = component => {
     store.actions.components.select(component)
   }
@@ -42,6 +41,16 @@
 
     return false
   }
+
+  const getComponentText = component => {
+    if (component._instanceName) {
+      return component._instanceName
+    }
+    const type =
+      component._component.replace("@budibase/standard-components/", "") ||
+      "component"
+    return capitalise(type)
+  }
 </script>
 
 <ul>
@@ -63,9 +72,7 @@
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={dragDropStore.actions.drop}
-        text={isScreenslot(component._component)
+        text={getComponentText(component)}
-          ? "Screenslot"
-          : component._instanceName}
         withArrow
         indentLevel={level + 1}
         selected={$store.selectedComponentId === component._id}

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -1,12 +1,6 @@
 <script>
   import { isEmpty } from "lodash/fp"
-  import {
+  import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
-    Checkbox,
-    Input,
-    Select,
-    DetailSummary,
-    ColorPicker,
-  } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@@ -31,6 +25,8 @@
   import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
   import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
   import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
+  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
+  import URLSelect from "./PropertyControls/URLSelect.svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -66,6 +62,7 @@
     section: SectionSelect,
     navigation: NavigationEditor,
     filter: FilterEditor,
+    url: URLSelect,
     "field/string": StringFieldSelect,
     "field/number": NumberFieldSelect,
     "field/options": OptionsFieldSelect,

packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte

@@ -35,17 +35,19 @@
     <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
   </div>
 </DetailSummary>
-<Drawer bind:this={drawer} title="Custom CSS">
+{#key componentInstance?._id}
-  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <Drawer bind:this={drawer} title="Custom CSS">
-  <DrawerContent slot="body">
+    <Button cta slot="buttons" on:click={save}>Save</Button>
-    <div class="content">
+    <DrawerContent slot="body">
-      <Layout gap="S">
+      <div class="content">
-        <Body size="S">Custom CSS overrides all other component styles.</Body>
+        <Layout gap="S">
-        <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
+          <Body size="S">Custom CSS overrides all other component styles.</Body>
-      </Layout>
+          <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
-    </div>
+        </Layout>
-  </DrawerContent>
+      </div>
-</Drawer>
+    </DrawerContent>
+  </Drawer>
+{/key}
 
 <style>
   .content {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte

@@ -1,42 +1,8 @@
 <script>
-  import { createEventDispatcher } from "svelte"
+  import { ColorPicker } from "@budibase/bbui"
-  import Colorpicker from "@budibase/colorpicker"
+  import { store } from "builderStore"
-
-  const dispatch = createEventDispatcher()
 
   export let value
-
-  const WAIT = 150
-
-  function throttle(callback, wait, immediate = false) {
-    let timeout = null
-    let initialCall = true
-
-    return function () {
-      const callNow = immediate && initialCall
-      const next = () => {
-        callback.apply(this, arguments)
-        timeout = null
-      }
-
-      if (callNow) {
-        initialCall = false
-        next()
-      }
-
-      if (!timeout) {
-        timeout = setTimeout(next, wait)
-      }
-    }
-  }
-
-  const onChange = throttle(
-    e => {
-      dispatch("change", e.detail)
-    },
-    WAIT,
-    true
-  )
 </script>
 
-<Colorpicker value={value || "#C4C4C4"} on:change={onChange} />
+<ColorPicker {value} on:change spectrumTheme={$store.theme} />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte

@@ -51,7 +51,7 @@
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Define Actions</ActionButton>
+<ActionButton on:click={drawer.show}>Define actions</ActionButton>
 <Drawer bind:this={drawer} title={"Actions"}>
   <svelte:fragment slot="description">
     Define what actions to run.

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte

@@ -47,7 +47,7 @@
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Define Filters</ActionButton>
+<ActionButton on:click={drawer.show}>Define filters</ActionButton>
 <Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <DrawerContent slot="body">

packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte

@@ -107,7 +107,7 @@
     loading = false
   }
 
-  $: displayValue = value ? value.substring(3) : "Pick Icon"
+  $: displayValue = value ? value.substring(3) : "Pick icon"
 
   $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
   $: pageEndIdx = maxIconsPerPage * currentPage

packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { store } from "builderStore"
+  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
+
+  export let value
+
+  $: urlOptions = $store.screens
+    .map(screen => screen.routing?.route)
+    .filter(x => x != null)
+</script>
+
+<DrawerBindableCombobox {value} on:change options={urlOptions} />

packages/builder/src/components/design/PropertiesPanel/componentStyles.js

@@ -1,4 +1,5 @@
-import { Input, Select, ColorPicker } from "@budibase/bbui"
+import { Input, Select } from "@budibase/bbui"
+import ColorPicker from "./PropertyControls/ColorPicker.svelte"
 
 export const margin = {
   label: "Margin",

packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte

@@ -13,6 +13,7 @@
   import { FrontendTypes } from "constants"
   import { findComponent, findComponentPath } from "builderStore/storeUtils"
   import { get } from "svelte/store"
+  import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
 
   // Cache previous values so we don't update the URL more than necessary
   let previousType
@@ -147,7 +148,10 @@
 
   <div class="preview-pane">
     {#if $currentAsset}
-      <ComponentSelectionList />
+      <div class="preview-header">
+        <ComponentSelectionList />
+        <AppThemeSelect />
+      </div>
       <div class="preview-content">
         <CurrentItemPreview />
       </div>
@@ -193,6 +197,10 @@
     gap: var(--spacing-m);
     padding: var(--spacing-xl) 40px;
   }
+  .preview-header {
+    display: grid;
+    grid-template-columns: 1fr 100px;
+  }
   .preview-content {
     flex: 1 1 auto;
   }

packages/client/src/api/app.js

@@ -3,8 +3,8 @@ import API from "./api"
 /**
  * Fetches screen definition for an app.
  */
-export const fetchAppDefinition = async appId => {
+export const fetchAppPackage = async appId => {
   return await API.get({
-    url: `/api/applications/${appId}/definition`,
+    url: `/api/applications/${appId}/appPackage`,
   })
 }

packages/client/src/components/ClientApp.svelte

@@ -13,6 +13,7 @@
     authStore,
     routeStore,
     builderStore,
+    appStore,
   } from "../store"
   import { TableNames, ActionTypes } from "../constants"
   import SettingsBar from "./preview/SettingsBar.svelte"
@@ -31,6 +32,9 @@
     await initialise()
     await authStore.actions.fetchUser()
     dataLoaded = true
+    if ($builderStore.inBuilder) {
+      builderStore.actions.notifyLoaded()
+    }
   })
 
   // Register this as a refreshable datasource so that user changes cause
@@ -55,6 +59,9 @@
       }
     }
   }
+
+  $: themeClass =
+    $builderStore.theme || $appStore.application?.theme || "spectrum--light"
 </script>
 
 {#if dataLoaded && $screenStore.activeLayout}
@@ -62,7 +69,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium spectrum--light"
+    class="spectrum spectrum--medium {themeClass}"
   >
     <Provider key="user" data={$authStore} {actions}>
       <div id="app-root">
@@ -101,5 +108,27 @@
   }
   #app-root {
     position: relative;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+  }
+
+  /* Custom scrollbars */
+  :global(::-webkit-scrollbar) {
+    width: 8px;
+    height: 8px;
+  }
+  :global(::-webkit-scrollbar-track) {
+    background: var(--spectrum-alias-background-color-default);
+  }
+  :global(::-webkit-scrollbar-thumb) {
+    background-color: var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+  }
+  :global(::-webkit-scrollbar-corner) {
+    background: var(--spectrum-alias-background-color-default);
+  }
+  :global(*) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--spectrum-global-color-gray-400)
+      var(--spectrum-alias-background-color-default);
   }
 </style>

packages/client/src/components/preview/HoverIndicator.svelte

@@ -29,4 +29,9 @@
   })
 </script>
 
-<IndicatorSet {componentId} color="rgb(120, 170, 244)" transition {zIndex} />
+<IndicatorSet
+  {componentId}
+  color="var(--spectrum-global-color-static-blue-200)"
+  transition
+  {zIndex}
+/>

packages/client/src/components/preview/SelectionIndicator.svelte

@@ -5,7 +5,7 @@
 
 <IndicatorSet
   componentId={$builderStore.selectedComponentId}
-  color="rgb(66, 133, 244)"
+  color="var(--spectrum-global-color-static-blue-600)"
   zIndex="910"
   transition
 />

packages/client/src/components/preview/SettingsBar.svelte

@@ -138,11 +138,11 @@
     padding: 6px 8px;
     opacity: 0;
     flex-direction: row;
-    background: var(--background);
+    background: var(--spectrum-alias-background-color-primary);
     justify-content: center;
     align-items: center;
     border-radius: 4px;
-    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     gap: 2px;
     transition: opacity 0.13s ease-in-out;
   }
@@ -155,4 +155,14 @@
     margin: 0 4px;
     background-color: var(--spectrum-global-color-gray-300);
   }
+
+  /* Theme overrides */
+  :global(.spectrum--dark) .bar,
+  :global(.spectrum--darkest) .bar {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  :global(.spectrum--dark) .divider,
+  :global(.spectrum--darkest) .divider {
+    background: var(--spectrum-global-color-gray-400);
+  }
 </style>

packages/client/src/index.js

@@ -1,5 +1,5 @@
 import ClientApp from "./components/ClientApp.svelte"
-import { builderStore } from "./store"
+import { builderStore, appStore } from "./store"
 
 let app
 
@@ -7,14 +7,18 @@ const loadBudibase = () => {
   // Update builder store with any builder flags
   builderStore.set({
     inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
-    appId: window["##BUDIBASE_APP_ID##"],
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
     previewType: window["##BUDIBASE_PREVIEW_TYPE##"],
+    theme: window["##BUDIBASE_PREVIEW_THEME##"],
   })
 
+  // Set app ID - this window flag is set by both the preview and the real
+  // server rendered app HTML
+  appStore.actions.setAppID(window["##BUDIBASE_APP_ID##"])
+
   // Create app if one hasn't been created yet
   if (!app) {
     app = new ClientApp({

packages/client/src/store/app.js

@@ -0,0 +1,27 @@
+import * as API from "../api"
+import { get, writable } from "svelte/store"
+
+const createAppStore = () => {
+  const store = writable({})
+
+  // Fetches the app definition including screens, layouts and theme
+  const fetchAppDefinition = async () => {
+    const appDefinition = await API.fetchAppPackage(get(store).appId)
+    store.set(appDefinition)
+  }
+
+  // Sets the initial app ID
+  const setAppID = id => {
+    store.update(state => {
+      state.appId = id
+      return state
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { setAppID, fetchAppDefinition },
+  }
+}
+
+export const appStore = createAppStore()

packages/client/src/store/auth.js

@@ -1,26 +1,13 @@
 import * as API from "../api"
-import { writable, get } from "svelte/store"
+import { writable } from "svelte/store"
-import { builderStore } from "./builder"
-import { TableNames } from "../constants"
 
 const createAuthStore = () => {
   const store = writable(null)
 
   // Fetches the user object if someone is logged in and has reloaded the page
   const fetchUser = async () => {
-    // Fetch the first user if inside the builder
+    const user = await API.fetchSelf()
-    if (get(builderStore).inBuilder) {
+    store.set(user)
-      const users = await API.fetchTableData(TableNames.USERS)
-      if (!users.error && users[0] != null) {
-        store.set(users[0])
-      }
-    }
-
-    // Or fetch the current user from localstorage in a real app
-    else {
-      const user = await API.fetchSelf()
-      store.set(user)
-    }
   }
 
   return {

packages/client/src/store/builder.js

@@ -1,7 +1,7 @@
 import { writable, derived } from "svelte/store"
 import Manifest from "@budibase/standard-components/manifest.json"
 
-const dispatchEvent = (type, data) => {
+const dispatchEvent = (type, data = {}) => {
   window.dispatchEvent(
     new CustomEvent("bb-event", {
       detail: { type, data },
@@ -64,6 +64,9 @@ const createBuilderStore = () => {
     deleteComponent: id => {
       dispatchEvent("delete-component", { id })
     },
+    notifyLoaded: () => {
+      dispatchEvent("preview-loaded")
+    },
   }
   return {
     ...writableStore,

packages/client/src/store/index.js

@@ -1,4 +1,5 @@
 export { authStore } from "./auth"
+export { appStore } from "./app"
 export { notificationStore } from "./notification"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"

packages/client/src/store/initialise.js

@@ -1,7 +1,7 @@
 import { routeStore } from "./routes"
-import { screenStore } from "./screens"
+import { appStore } from "./app"
 
 export async function initialise() {
   await routeStore.actions.fetchRoutes()
-  await screenStore.actions.fetchScreens()
+  await appStore.actions.fetchAppDefinition()
 }

packages/client/src/store/screens.js

@@ -1,16 +1,12 @@
-import { writable, derived, get } from "svelte/store"
+import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
-import * as API from "../api"
+import { appStore } from "./app"
 
 const createScreenStore = () => {
-  const config = writable({
-    screens: [],
-    layouts: [],
-  })
   const store = derived(
-    [config, routeStore, builderStore],
+    [appStore, routeStore, builderStore],
-    ([$config, $routeStore, $builderStore]) => {
+    ([$appStore, $routeStore, $builderStore]) => {
       let activeLayout
       let activeScreen
       if ($builderStore.inBuilder) {
@@ -21,7 +17,7 @@ const createScreenStore = () => {
         activeLayout = { props: { _component: "screenslot" } }
 
         // Find the correct screen by matching the current route
-        const { screens, layouts } = $config
+        const { screens, layouts } = $appStore
         if ($routeStore.activeRoute) {
           activeScreen = screens.find(
             screen => screen._id === $routeStore.activeRoute.screenId
@@ -37,17 +33,8 @@ const createScreenStore = () => {
     }
   )
 
-  const fetchScreens = async () => {
-    const appDefinition = await API.fetchAppDefinition(get(builderStore).appId)
-    config.set({
-      screens: appDefinition.screens,
-      layouts: appDefinition.layouts,
-    })
-  }
-
   return {
     subscribe: store.subscribe,
-    actions: { fetchScreens },
   }
 }
 

packages/client/src/utils/styleable.js

@@ -29,7 +29,7 @@ export const styleable = (node, styles = {}) => {
     // overridden by any user specified styles
     let baseStyles = {}
     if (newStyles.empty) {
-      baseStyles.border = "2px dashed var(--grey-5)"
+      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
       baseStyles.padding = "var(--spacing-l)"
       baseStyles.overflow = "hidden"
     }

packages/server/nodemon.json

@@ -0,0 +1,6 @@
+{
+  "watch": ["src"],
+  "ext": "js,ts,json",
+  "ignore": ["src/**/*.spec.ts", "src/**/*.spec.js"],
+  "exec": "ts-node src/index.ts"
+}

packages/server/package.json

@@ -18,7 +18,7 @@
     "dev:stack:up": "node scripts/dev/manage.js up",
     "dev:stack:down": "node scripts/dev/manage.js down",
     "dev:stack:nuke": "node scripts/dev/manage.js nuke",
-    "dev:builder": "yarn run dev:stack:up && ts-node src/index.ts",
+    "dev:builder": "yarn run dev:stack:up && nodemon",
     "format": "prettier --config ../../.prettierrc.json 'src/**/*.ts' --write",
     "lint": "eslint --fix src/",
     "lint:fix": "yarn run format && yarn run lint",

packages/server/src/api/controllers/application.js

@@ -67,15 +67,18 @@ async function getAppUrlIfNotInUse(ctx) {
   let url
   if (ctx.request.body.url) {
     url = encodeURI(ctx.request.body.url)
-  } else {
+  } else if (ctx.request.body.name) {
     url = encodeURI(`${ctx.request.body.name}`)
   }
-  url = `/${url.replace(URL_REGEX_SLASH, "")}`.toLowerCase()
+  if (url) {
+    url = `/${url.replace(URL_REGEX_SLASH, "")}`.toLowerCase()
+  }
   if (!env.SELF_HOSTED) {
     return url
   }
   const deployedApps = await getDeployedApps(ctx)
   if (
+    url &&
     deployedApps[url] != null &&
     deployedApps[url].appId !== ctx.params.appId
   ) {
@@ -161,7 +164,15 @@ exports.fetchAppDefinition = async function (ctx) {
 exports.fetchAppPackage = async function (ctx) {
   const db = new CouchDB(ctx.params.appId)
   const application = await db.get(DocumentTypes.APP_METADATA)
-  const [layouts, screens] = await Promise.all([getLayouts(db), getScreens(db)])
+  const layouts = await getLayouts(db)
+  let screens = await getScreens(db)
+
+  // Only filter screens if the user is not a builder
+  if (!(ctx.user.builder && ctx.user.builder.global)) {
+    const userRoleId = getUserRoleId(ctx)
+    const accessController = new AccessController(ctx.params.appId)
+    screens = await accessController.checkScreensAccess(screens, userRoleId)
+  }
 
   ctx.body = {
     application,

packages/server/src/constants/layouts.js

@@ -15,6 +15,7 @@ const EMPTY_LAYOUT = {
       {
         _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
         _component: "@budibase/standard-components/screenslot",
+        _instanceName: "Screen slot",
         _styles: {
           normal: {
             flex: "1 1 auto",
@@ -63,6 +64,7 @@ const BASE_LAYOUTS = [
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
           _component: "@budibase/standard-components/screenslot",
+          _instanceName: "Screen slot",
           _styles: {
             normal: {
               flex: "1 1 auto",
@@ -84,6 +86,7 @@ const BASE_LAYOUTS = [
         normal: {},
         selected: {},
       },
+      title: "{{ name }}",
       navigation: "Top",
       width: "Large",
       links: [
@@ -109,6 +112,7 @@ const BASE_LAYOUTS = [
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
           _component: "@budibase/standard-components/screenslot",
+          _instanceName: "Screen slot",
           _styles: {
             normal: {
               flex: "1 1 auto",

packages/standard-components/manifest.json

@@ -230,7 +230,8 @@
   "screenslot": {
     "name": "Screenslot",
     "icon": "WebPage",
-    "description": "Contains your app screens"
+    "description": "Contains your app screens",
+    "editable": false
   },
   "button": {
     "name": "Button",
@@ -290,6 +291,11 @@
         ],
         "defaultValue": "M"
       },
+      {
+        "type": "boolean",
+        "label": "Quiet",
+        "key": "quiet"
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -448,6 +454,7 @@
     }
   },
   "stackedlist": {
+    "deprecated": true,
     "name": "Stacked List",
     "icon": "TaskList",
     "description": "A basic card component that can contain content and actions.",
@@ -811,30 +818,29 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "md",
+        "defaultValue": "ri-1x",
         "options": [
-          { "value": "ri-xxs", "label": "xxs" },
+          { "value": "ri-xxs", "label": "XXS" },
-          { "value": "ri-xs", "label": "xs" },
+          { "value": "ri-xs", "label": "XS" },
-          { "value": "ri-sm", "label": "sm" },
+          { "value": "ri-sm", "label": "Small" },
-          { "value": "ri-1x", "label": "md" },
+          { "value": "ri-1x", "label": "Medium" },
-          { "value": "ri-lg", "label": "lg" },
+          { "value": "ri-lg", "label": "Large" },
-          { "value": "ri-xl", "label": "xl" },
+          { "value": "ri-xl", "label": "XL" },
-          { "value": "ri-2x", "label": "2x" },
+          { "value": "ri-2x", "label": "2XL" },
-          { "value": "ri-3x", "label": "3x" },
+          { "value": "ri-3x", "label": "3XL" },
-          { "value": "ri-4x", "label": "4x" },
+          { "value": "ri-4x", "label": "4XL" },
-          { "value": "ri-5x", "label": "5x" },
+          { "value": "ri-5x", "label": "5XL" },
-          { "value": "ri-6x", "label": "6x" },
+          { "value": "ri-6x", "label": "6XL" },
-          { "value": "ri-7x", "label": "7x" },
+          { "value": "ri-7x", "label": "7XL" },
-          { "value": "ri-8x", "label": "8x" },
+          { "value": "ri-8x", "label": "8XL" },
-          { "value": "ri-9x", "label": "9x" },
+          { "value": "ri-9x", "label": "9XL" },
-          { "value": "ri-10x", "label": "10x" }
+          { "value": "ri-10x", "label": "10XL" }
         ]
       },
       {
         "type": "color",
         "label": "Color",
-        "key": "color",
+        "key": "color"
-        "defaultValue": "#000"
       },
       {
         "type": "event",
@@ -844,6 +850,7 @@
     ]
   },
   "navigation": {
+    "deprecated": true,
     "name": "Nav Bar",
     "description": "A component for handling the navigation within your app.",
     "icon": "BreadcrumbNavigation",
@@ -876,7 +883,7 @@
         "key": "text"
       },
       {
-        "type": "text",
+        "type": "url",
         "label": "URL",
         "key": "url",
         "placeholder": "/screen"
@@ -1638,6 +1645,7 @@
     "actions": [
       "ValidateForm"
     ],
+    "styles": ["size"],
     "settings": [
       {
         "type": "select",
@@ -1651,46 +1659,6 @@
         "label": "Schema",
         "key": "dataSource"
       },
-      {
-        "type": "select",
-        "label": "Theme",
-        "key": "theme",
-        "defaultValue": "spectrum--light",
-        "options": [
-          {
-            "label": "Lightest",
-            "value": "spectrum--lightest"
-          },
-          {
-            "label": "Light",
-            "value": "spectrum--light"
-          },
-          {
-            "label": "Dark",
-            "value": "spectrum--dark"
-          },
-          {
-            "label": "Darkest",
-            "value": "spectrum--darkest"
-          }
-        ]
-      },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "defaultValue": "spectrum--medium",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ]
-      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2067,46 +2035,6 @@
         "key": "rowCount",
         "defaultValue": 8
       },
-      {
-        "type": "select",
-        "label": "Theme",
-        "key": "theme",
-        "defaultValue": "spectrum--light",
-        "options": [
-          {
-            "label": "Lightest",
-            "value": "spectrum--lightest"
-          },
-          {
-            "label": "Light",
-            "value": "spectrum--light"
-          },
-          {
-            "label": "Dark",
-            "value": "spectrum--dark"
-          },
-          {
-            "label": "Darkest",
-            "value": "spectrum--darkest"
-          }
-        ]
-      },
-      {
-        "type": "select",
-        "label": "Size",
-        "key": "size",
-        "defaultValue": "spectrum--medium",
-        "options": [
-          {
-            "label": "Medium",
-            "value": "spectrum--medium"
-          },
-          {
-            "label": "Large",
-            "value": "spectrum--large"
-          }
-        ]
-      },
       {
         "type": "multifield",
         "label": "Columns",
@@ -2161,5 +2089,42 @@
         "defaultValue": "Last 30 days"
       }
     ]
+  },
+  "spectrumcard": {
+    "name": "Card",
+    "icon": "Card",
+    "styles": ["size"],
+    "settings": [
+      {
+        "type": "text",
+        "key": "title",
+        "label": "Title"
+      },
+      {
+        "type": "text",
+        "key": "subtitle",
+        "label": "Subtitle"
+      },
+      {
+        "type": "text",
+        "key": "description",
+        "label": "Description"
+      },
+      {
+        "type": "text",
+        "key": "imageURL",
+        "label": "Image URL"
+      },
+      {
+        "type": "url",
+        "key": "linkURL",
+        "label": "Link URL"
+      },
+      {
+        "type": "boolean",
+        "key": "horizontal",
+        "label": "Horizontal"
+      }
+    ]
   }
 }

packages/standard-components/package.json

@@ -34,8 +34,10 @@
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
     "@budibase/bbui": "^0.9.70",
+    "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/link": "^3.1.3",
     "@spectrum-css/page": "^3.0.1",
+    "@spectrum-css/typography": "^3.0.2",
     "@spectrum-css/vars": "^3.0.1",
     "apexcharts": "^3.22.1",
     "dayjs": "^1.10.5",

packages/standard-components/src/Button.svelte

@@ -9,10 +9,12 @@
   export let onClick
   export let size = "M"
   export let type = "primary"
+  export let quiet = false
 </script>
 
 <button
   class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
+  class:spectrum-Button--quiet={quiet}
   disabled={disabled || false}
   use:styleable={$component.styles}
   on:click={onClick}

packages/standard-components/src/CardStat.svelte

@@ -20,14 +20,13 @@
   .container {
     min-width: 260px;
     width: max-content;
-    border: 1px solid var(--grey-3);
+    border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 0.3rem;
-    color: var(--blue);
   }
 
   .title {
     font-size: 0.85rem;
-    color: #9e9e9e;
+    color: var(--spectrum-global-color-gray-600);
     font-weight: 600;
     margin: 1rem 1.5rem 0.5rem 1.5rem;
     white-space: pre-wrap;
@@ -37,14 +36,14 @@
     font-size: 2rem;
     font-weight: 600;
     margin: 0 1.5rem 1.5rem 1.5rem;
-    color: inherit;
+    color: var(--spectrum-global-color-blue-600);
     white-space: pre-wrap;
   }
 
   .label {
     font-size: 0.85rem;
     font-weight: 400;
-    color: #9e9e9e;
+    color: var(--spectrum-global-color-gray-600);
     margin: 1rem 1.5rem;
     white-space: pre-wrap;
   }

packages/standard-components/src/Heading.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import "@spectrum-css/typography/dist/index-vars.css"
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -14,8 +15,10 @@
 
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = $builderStore.inBuilder
-    ? text || "Placeholder text"
+    ? text || $component.name || "Placeholder text"
     : text || ""
+  $: sizeClass = `spectrum-Heading--size${size || "M"}`
+  $: alignClass = `align--${align || "left"}`
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
@@ -41,25 +44,19 @@
   class:bold
   class:italic
   class:underline
-  class="align--{align || 'left'} size--{size || 'M'}"
+  class="spectrum-Heading {sizeClass} {alignClass}"
 >
-  {#if bold}
+  {componentText}
-    <strong>{componentText}</strong>
-  {:else}
-    {componentText}
-  {/if}
 </h1>
 
 <style>
   h1 {
-    display: inline-block;
     white-space: pre-wrap;
     font-weight: 600;
-    margin: 0;
   }
   .placeholder {
     font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
   .bold {
     font-weight: 700;
@@ -70,15 +67,7 @@
   .underline {
     text-decoration: underline;
   }
-  .size--S {
+
-    font-size: 18px;
-  }
-  .size--M {
-    font-size: 22px;
-  }
-  .size--L {
-    font-size: 28px;
-  }
   .align--left {
     text-align: left;
   }

packages/standard-components/src/Icon.svelte

@@ -1,21 +1,34 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let icon = ""
+  export let icon
-  export let size = "fa-lg"
+  export let size
-  export let color = "#f00"
+  export let color
   export let onClick
 
   $: styles = {
     ...$component.styles,
     normal: {
       ...$component.styles.normal,
-      color,
+      color: color || "var(--spectrum-global-color-gray-900)",
     },
   }
 </script>
 
-<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+{#if icon}
+  <i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+{:else if $builderStore.inBuilder}
+  <div use:styleable={styles}>
+    <Placeholder />
+  </div>
+{/if}
+
+<style>
+  div {
+    font-style: italic;
+  }
+</style>

packages/standard-components/src/Layout.svelte

@@ -125,6 +125,7 @@
     overflow: auto;
     overflow-x: hidden;
     position: relative;
+    background: var(--spectrum-alias-background-color-secondary);
   }
 
   .nav-wrapper {
@@ -132,9 +133,10 @@
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
-    background: white;
+    background: var(--spectrum-alias-background-color-primary);
     z-index: 2;
-    box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
   }
   .layout--top .nav-wrapper.sticky {
     position: sticky;
@@ -312,7 +314,7 @@
       transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
       height: 100vh;
       opacity: 0;
-      background: white;
+      background: var(--spectrum-alias-background-color-secondary);
       z-index: 999;
       flex-direction: column;
       justify-content: flex-start;
@@ -326,7 +328,8 @@
     .links.visible {
       opacity: 1;
       transform: translateX(250px);
-      box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.2);
+      border-right: 1px solid var(--spectrum-global-color-gray-300);
     }
     .mobile-click-handler.visible {
       position: fixed;

packages/standard-components/src/Link.svelte

@@ -74,12 +74,15 @@
 <style>
   a {
     color: var(--spectrum-alias-text-color);
-    display: inline-block;
+    white-space: nowrap;
-    white-space: pre-wrap;
+    transition: color 130ms ease-in-out;
+  }
+  a:hover {
+    color: var(--spectrum-global-color-blue-600) !important;
   }
   .placeholder {
     font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
   .bold {
     font-weight: 600;

packages/standard-components/src/Placeholder.svelte

@@ -15,7 +15,7 @@
 
 <style>
   div {
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
   }
 </style>

packages/standard-components/src/Repeater.svelte

@@ -33,7 +33,7 @@
 
 <style>
   .noRows {
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
     padding: var(--spacing-l);
     display: grid;
@@ -42,6 +42,6 @@
   .noRows i {
     margin-bottom: var(--spacing-m);
     font-size: 1.5rem;
-    color: var(--grey-5);
+    color: var(--spectrum-global-color-gray-600);
   }
 </style>

packages/standard-components/src/ScreenSlot.svelte

@@ -30,6 +30,6 @@
   }
   span {
     font-size: var(--font-size-s);
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
 </style>

packages/standard-components/src/Section.svelte

@@ -67,7 +67,7 @@
     grid-template-columns: 1fr 1fr;
   }
   .placeholder {
-    border: 2px dashed var(--grey-5);
+    border: 2px dashed var(--spectrum-global-color-gray-600);
     padding: var(--spacing-l);
   }
 </style>

packages/standard-components/src/SpectrumCard.svelte

@@ -0,0 +1,119 @@
+<script>
+  import "@spectrum-css/card/dist/index-vars.css"
+  import { getContext } from "svelte"
+
+  export let title
+  export let subtitle
+  export let description
+  export let imageURL
+  export let linkURL
+  export let horizontal
+
+  const { styleable, linkable } = getContext("sdk")
+  const component = getContext("component")
+
+  $: external = linkURL && !linkURL.startsWith("/")
+</script>
+
+<div
+  use:styleable={$component.styles}
+  class="spectrum-Card"
+  tabindex="0"
+  role="figure"
+  class:horizontal
+>
+  {#if imageURL}
+    <div
+      class="spectrum-Card-coverPhoto"
+      style="background-image: url({imageURL})"
+    />
+  {/if}
+  <div class="spectrum-Card-container">
+    <div class="spectrum-Card-body">
+      <div class="spectrum-Card-header">
+        <div
+          class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
+        >
+          {#if linkURL}
+            {#if external}
+              <a href={linkURL}>{title || "Card Title"}</a>
+            {:else}
+              <a use:linkable href={linkURL}>{title || "Card Title"}</a>
+            {/if}
+          {:else}
+            {title || "Card Title"}
+          {/if}
+        </div>
+      </div>
+      {#if subtitle}
+        <div class="spectrum-Card-content">
+          <div
+            class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS"
+          >
+            {subtitle}
+          </div>
+        </div>
+      {/if}
+    </div>
+    {#if description}
+      <div class="spectrum-Card-footer">
+        {description}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .spectrum-Card {
+    width: 240px;
+    border-color: var(--spectrum-global-color-gray-300) !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .spectrum-Card.horizontal {
+    flex-direction: row;
+    width: 420px;
+  }
+  .spectrum-Card-title :global(a) {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+  }
+  .spectrum-Card-subtitle {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .spectrum-Card-footer {
+    word-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+  a {
+    transition: color 130ms ease-in-out;
+    color: var(--spectrum-alias-text-color);
+  }
+  a:hover {
+    color: var(--spectrum-global-color-blue-600);
+  }
+
+  .horizontal .spectrum-Card-coverPhoto {
+    flex: 0 0 160px;
+    height: auto;
+    border-bottom-left-radius: calc(
+      var(--spectrum-alias-border-radius-regular) - 1px
+    );
+    border-top-right-radius: 0;
+  }
+  .horizontal .spectrum-Card-container {
+    width: 0;
+    flex: 1 1 auto;
+  }
+  .spectrum-Card-footer {
+    border-top: none;
+    padding-top: 0;
+    margin-top: -8px;
+  }
+</style>

packages/standard-components/src/Text.svelte

@@ -14,7 +14,7 @@
 
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = $builderStore.inBuilder
-    ? text || "Placeholder text"
+    ? text || $component.name || "Placeholder text"
     : text || ""
 
   // Add color styles to main styles object, otherwise the styleable helper
@@ -54,7 +54,7 @@
   }
   .placeholder {
     font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
   .bold {
     font-weight: 600;

packages/standard-components/src/charts/ApexChart.svelte

@@ -23,6 +23,16 @@
     text-transform: capitalize;
   }
   div :global(.apexcharts-yaxis-label, .apexcharts-xaxis-label) {
-    fill: #aaa;
+    fill: var(--spectrum-global-color-gray-600);
+  }
+
+  div :global(.apexcharts-gridline) {
+    stroke: var(--spectrum-global-color-gray-600);
+  }
+  div :global(.apexcharts-legend-text) {
+    color: var(--spectrum-global-color-gray-700) !important;
+  }
+  div :global(.apexcharts-datalabel) {
+    fill: var(--spectrum-global-color-gray-800);
   }
 </style>

packages/standard-components/src/forms/InnerForm.svelte

@@ -5,8 +5,6 @@
   import { generateID } from "../helpers"
 
   export let dataSource
-  export let theme
-  export let size
   export let disabled = false
   export let initialValues
 
@@ -160,24 +158,9 @@
   {actions}
   data={{ ...$formState.values, tableId: dataSource?.tableId }}
 >
-  <div
+  <div use:styleable={$component.styles}>
-    lang="en"
-    dir="ltr"
-    use:styleable={$component.styles}
-    class={`spectrum ${size || "spectrum--medium"} ${
-      theme || "spectrum--light"
-    }`}
-  >
     {#if loaded}
       <slot />
     {/if}
   </div>
 </Provider>
-
-<style>
-  div {
-    padding: 20px;
-    position: relative;
-    background-color: var(--spectrum-alias-background-color-secondary);
-  }
-</style>

packages/standard-components/src/index.js

@@ -20,20 +20,23 @@ export { default as dataprovider } from "./DataProvider.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
 export { default as repeater } from "./Repeater.svelte"
-export { default as stackedlist } from "./StackedList.svelte"
-export { default as card } from "./Card.svelte"
 export { default as text } from "./Text.svelte"
-export { default as navigation } from "./Navigation.svelte"
 export { default as layout } from "./Layout.svelte"
 export { default as link } from "./Link.svelte"
 export { default as heading } from "./Heading.svelte"
 export { default as image } from "./Image.svelte"
 export { default as embed } from "./Embed.svelte"
-export { default as cardhorizontal } from "./CardHorizontal.svelte"
-export { default as cardstat } from "./CardStat.svelte"
 export { default as icon } from "./Icon.svelte"
 export { default as backgroundimage } from "./BackgroundImage.svelte"
 export { default as daterangepicker } from "./DateRangePicker.svelte"
+export { default as cardstat } from "./CardStat.svelte"
+export { default as spectrumcard } from "./SpectrumCard.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"
+
+// Deprecated component left for compatibility in old apps
+export { default as navigation } from "./deprecated/Navigation.svelte"
+export { default as cardhorizontal } from "./deprecated/CardHorizontal.svelte"
+export { default as stackedlist } from "./deprecated/StackedList.svelte"
+export { default as card } from "./deprecated/Card.svelte"

packages/standard-components/src/table/Table.svelte

@@ -3,8 +3,6 @@
   import { Table } from "@budibase/bbui"
   import SlotRenderer from "./SlotRenderer.svelte"
 
-  export let theme
-  export let size
   export let dataProvider
   export let columns
   export let showAutoColumns
@@ -73,12 +71,7 @@
   }
 </script>
 
-<div
+<div use:styleable={$component.styles}>
-  lang="en"
-  dir="ltr"
-  use:styleable={$component.styles}
-  class={`spectrum ${size || "spectrum--medium"} ${theme || "spectrum--light"}`}
->
   <Table
     {data}
     {schema}

packages/standard-components/yarn.lock

@@ -2,6 +2,59 @@
 # yarn lockfile v1
 
 
+"@adobe/spectrum-css-workflow-icons@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.1.tgz#7e2cb3fcfb5c8b12d7275afafbb6ec44913551b4"
+  integrity sha512-uVgekyBXnOVkxp+CUssjN/gefARtudZC8duEn1vm0lBQFwGRZFlDEzU1QC+aIRWCrD1Z8OgRpmBYlSZ7QS003w==
+
+"@budibase/bbui@^0.9.67":
+  version "0.9.67"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-0.9.67.tgz#9e242cbf25c04d9843d64cd676f5c293f531f18f"
+  integrity sha512-XwwwPuOG4y/bV9psjOjYBvAqVaVJ56nklKOm2snaSS0P9WlQ17TWVcixQo5Ol9ecvzl9iVD2Wi2rWTX6y6sYaA==
+  dependencies:
+    "@adobe/spectrum-css-workflow-icons" "^1.2.1"
+    "@spectrum-css/actionbutton" "^1.0.1"
+    "@spectrum-css/actiongroup" "^1.0.1"
+    "@spectrum-css/avatar" "^3.0.2"
+    "@spectrum-css/button" "^3.0.1"
+    "@spectrum-css/buttongroup" "^3.0.2"
+    "@spectrum-css/checkbox" "^3.0.2"
+    "@spectrum-css/dialog" "^3.0.1"
+    "@spectrum-css/divider" "^1.0.1"
+    "@spectrum-css/dropzone" "^3.0.2"
+    "@spectrum-css/fieldgroup" "^3.0.2"
+    "@spectrum-css/fieldlabel" "^3.0.1"
+    "@spectrum-css/icon" "^3.0.1"
+    "@spectrum-css/illustratedmessage" "^3.0.2"
+    "@spectrum-css/inputgroup" "^3.0.2"
+    "@spectrum-css/label" "^2.0.10"
+    "@spectrum-css/link" "^3.1.1"
+    "@spectrum-css/menu" "^3.0.1"
+    "@spectrum-css/modal" "^3.0.1"
+    "@spectrum-css/pagination" "^3.0.3"
+    "@spectrum-css/picker" "^1.0.1"
+    "@spectrum-css/popover" "^3.0.1"
+    "@spectrum-css/progressbar" "^1.0.2"
+    "@spectrum-css/progresscircle" "^1.0.2"
+    "@spectrum-css/radio" "^3.0.2"
+    "@spectrum-css/search" "^3.0.2"
+    "@spectrum-css/sidenav" "^3.0.2"
+    "@spectrum-css/statuslight" "^3.0.2"
+    "@spectrum-css/switch" "^1.0.2"
+    "@spectrum-css/table" "^3.0.1"
+    "@spectrum-css/tabs" "^3.0.1"
+    "@spectrum-css/tags" "^3.0.2"
+    "@spectrum-css/textfield" "^3.0.1"
+    "@spectrum-css/toast" "^3.0.1"
+    "@spectrum-css/tooltip" "^3.0.3"
+    "@spectrum-css/treeview" "^3.0.2"
+    "@spectrum-css/typography" "^3.0.1"
+    "@spectrum-css/underlay" "^2.0.9"
+    "@spectrum-css/vars" "^3.0.1"
+    dayjs "^1.10.4"
+    svelte-flatpickr "^3.1.0"
+    svelte-portal "^1.0.0"
+
 "@rollup/pluginutils@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838"
@@ -10,11 +63,103 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@spectrum-css/link@^3.1.3":
+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.3.tgz#8f7342a69b303c5acdcfa0a59f5e9267b9f3cb30"
+  integrity sha512-P9qoCPSiZ1SB6ZYqK5hub0vGty00YYqonQE0KTjtb1i+T1nYR/87vWqVPERx9j63uhgZncjwFYaThTvRqye7eQ==
+
+"@spectrum-css/actiongroup@^1.0.1":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.3.tgz#4713ce65e6f5c72c404a7b638fbc3b4fd7e3874f"
+  integrity sha512-NlB9Q4ZlWixXxymoPIYG6g2hkwAGKFodHWPFfxHD8ddkjXWRB9G2akUP7cfsJ4DcYn4VisUORCOYQwqDiSmboQ==
+
+"@spectrum-css/avatar@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-3.0.2.tgz#4f1826223eae330e64b6d3cc899e9bc2e98dac95"
+  integrity sha512-wEczvSqxttTWSiL3cOvXV/RmGRwSkw2w6+slcHhnf0kb7ovymMM+9oz8vvEpEsSeo5u598bc+7ktrKFpAd6soQ==
+
+"@spectrum-css/button@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.3.tgz#2df1efaab6c7e0b3b06cb4b59e1eae59c7f1fc84"
+  integrity sha512-6CnLPqqtaU/PcSSIGeGRi0iFIIxIUByYLKFO6zn5NEUc12KQ28dJ4PLwB6WBa0L8vRoAGlnWWH2ZZweTijbXgg==
+
+"@spectrum-css/buttongroup@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.3.tgz#719d868845ac9d2c4f939c1b9f6044507902d5aa"
+  integrity sha512-eXl8U4QWMWXqyTu654FdQdEGnmczgOYlpIFSHyCMVjhtPqZp2xwnLFiGh6LKw+bLio6eeOZ0L+vpk1GcoYqgkw==
+
+"@spectrum-css/card@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-3.0.3.tgz#56b2e2da6b80c1583228baa279de7407383bfb6b"
+  integrity sha512-+oKLUI2a0QmQP9EzySeq/G4FpUkkdaDNbuEbqCj2IkPMc/2v/nwzsPhh1fj2UIghGAiiUwXfPpzax1e8fyhQUg==
+
+"@spectrum-css/checkbox@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.3.tgz#8577067fc8b97e4609f92bd242364937a533a7bb"
+  integrity sha512-QVG9uMHq+lh70Dh6mDNnY+vEvNz2p7VC6xgLfDYfijp2qeiqYPq72fQK6p/SiyqPk96ZACzNRwgeROU6Xf6Wgg==
+
+"@spectrum-css/dialog@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.3.tgz#7715a4ea435e753afb623d99ca5917ed1bcd6f34"
+  integrity sha512-AhmKgfRIVyTe3ABiJ8lLUQL34VB/H6fN16na2LlbDRJvyRMzkdN1Xf2i6U3f4OMd3qQ8Gm5xat4BvMxIQPBAUQ==
+
+"@spectrum-css/divider@^1.0.1":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.3.tgz#639e2ebaa0834efa40f42397668bbd5c153ea385"
+  integrity sha512-Zy4Rn40w8UtzMh3wx/U9+CepSCpm1aOCGftHgWDub0XZuVTzh0c1WwyzTuLCx2Hf21z5VRGNiDh8bGEEzSbtNA==
+  dependencies:
+    "@spectrum-css/vars" "^3.0.2"
+
+"@spectrum-css/dropzone@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.3.tgz#aee71697a2c195947599d7541b858c3c198741dc"
+  integrity sha512-ujrswdtB6bHigklyHsm6zomFd6rUnKJ3xVVRjroVF4+ouK4DxK5tX0iVd0EW6AOfOjx4Cc28uyFot3fpxp+MQw==
+
+"@spectrum-css/fieldgroup@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.3.tgz#85d85da048d08200f25ceab378026dd2b11e0bb2"
+  integrity sha512-wXUXTXN1CPnR7M4Ltd+3uh7BfcNGUV1+Xe0/h0tCpq/j+S2Sd4xo7/pUMdU19sIDrAAtpEFp1tt+nouHcU5HGQ==
+
+"@spectrum-css/fieldlabel@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.3.tgz#f73c04d20734d4718ffb620dc46458904685b449"
+  integrity sha512-nEvIkEXCD5n4fW67Unq6Iu7VXoauEd/JGpfTY02VsC5p4FJLnwKfPDbJUuUsqClAxqw7nAsmXVKtn4zQFf5yPQ==
+
+"@spectrum-css/icon@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.3.tgz#5c612822380927087aebd526855d82ed2c3e2cba"
+  integrity sha512-hyloKOejPCXhP3MBNsm3SjR9j8xT1R1S19p32KW/0Qhj+VMUtfyEPmevyFptpn7wcovQccdl/vZVIVDuML/imw==
+
+"@spectrum-css/illustratedmessage@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.2.tgz#6a480be98b027e050b086e7899e40d87adb0a8c0"
+  integrity sha512-dqnE8X27bGcO0HN8+dYx8O4o0dNNIAqeivOzDHhe2El+V4dTzMrNIerF6G0NLm3GjVf6XliwmitsZK+K6FmbtA==
+
+"@spectrum-css/inputgroup@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.3.tgz#00c9a370ddc2c55cf0f37dd6069faa9501fd7eb5"
+  integrity sha512-FqRJTiLL7jiGfzDVXWUGVLqHryJjCcqQIrqAi+Tq0oenapzsBe2qc/zIrKgh2wtMI+NTIBLXTECvij3L1HlqAg==
+
+"@spectrum-css/label@^2.0.10":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.10.tgz#2368651d7636a19385b5d300cdf6272db1916001"
+  integrity sha512-xCbtEiQkZIlLdWFikuw7ifDCC21DOC/KMgVrrVJHXFc4KRQe9LTZSqmGF3tovm+CSq1adE59mYoTbojVQ9YuEQ==
+
+"@spectrum-css/link@^3.1.1", "@spectrum-css/link@^3.1.3":
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.3.tgz#b0e560a7e0acdb4a2b329b6669696aa3438f5993"
   integrity sha512-8Pmy5d73MwKcATTPaj+fSrZYnIw7GmfX40AvpC1xx5LauOxsbUb4AVNp1kn2H8rrOBmxF7czyhoBBhEiv66QUg==
 
+"@spectrum-css/menu@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.3.tgz#46a9b221bb5f470a2f8a934bdfd512d84d2fdc4d"
+  integrity sha512-qKA9J/MrikNKIpCEHsAazG2vY3im5tjGCmo6p9Pdnu8/aQMsiuZDHZayukeCttJUZkrb9guDVL9OIHlK5RZvcQ==
+
+"@spectrum-css/modal@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.2.tgz#58b6621cab65f90788d310374f40df1f7090473f"
+  integrity sha512-YnIivJhoaao7Otu+HV7sgebPyFbO6sd/oMvTN/Rb2wwgnaMnIIuIRdGandSrcgotN2uNgs+P0knG6mv/xA1/dg==
+
 "@spectrum-css/page@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.2.tgz#8f0c03d25f5565fb13115541a8fcaf0e1d3a8ee0"
@@ -22,6 +167,101 @@
   dependencies:
     "@spectrum-css/vars" "^3.0.2"
 
+"@spectrum-css/pagination@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/pagination/-/pagination-3.0.3.tgz#b204c3ada384c4af751a354bc428346d82eeea65"
+  integrity sha512-OJ/v9GeNXJOZ9Yr9LDBYPrR2NCiLOWP9wANT/a5sqFuugRnQbn/HYMnRp9TBxwpDY6ihaPo0T/wi7kLiAJFdDw==
+
+"@spectrum-css/picker@^1.0.1":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.3.tgz#21379bcf8ae94277deeb6ad65dcd9e2bbfacb487"
+  integrity sha512-oHLGxBx5BwVCSGo7/T1C9PTHX1+/5AmVjyLiTJ4UoIdSJmOERw9YcRZbcGZgBJNWbxcjr4TyGtwj1EcSjEy97w==
+
+"@spectrum-css/popover@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.3.tgz#6fb69873474fb968afb738eacb9e121f93e83a09"
+  integrity sha512-KvmXv4TV19FBx39KfmgVlDYtvtBqv/8RRK7RRLDDHGViTxZtShjVsVpwIgfkfgn4iJztCnXpWzFqRXWUu2XCpQ==
+
+"@spectrum-css/progressbar@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.3.tgz#f70bcc38a2a21cff2f422ec825724ebbb9455e67"
+  integrity sha512-vJHplefUuy8+NjCw1X7fLbqHVGNVBpvGFXNAeaIj4SFf4ygxiUq/5c9iRhhsCQixEsJlfD/b7BnGXU7BUDkr6Q==
+
+"@spectrum-css/progresscircle@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-1.0.2.tgz#258ea9170fb70f795edda03e38a61d93bef4487c"
+  integrity sha512-JLULpyzjIY95lzlWR1yE1gv4l1K6p+scQ+edmuZZUHBzwM3pUtkvHJmUlA9TYdResUYW6Uka60VRdY6lZ8gnFQ==
+
+"@spectrum-css/radio@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.3.tgz#25c3bc5e9c30a8a8ae728717b7c7fb736cdae640"
+  integrity sha512-LaLGfz/eGNR2iyqouXYILIA+pKRqF769iPdwM0REm5RpWvMQDD7rPZ/kWlg18owjaFsyllEp25gEjmhRJIIVOw==
+
+"@spectrum-css/search@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.3.tgz#3415dc106aca0d5dd996e87084a1b47c2b95a882"
+  integrity sha512-kdLpKTt0obljuhS1q1tukujRlvSs8sBwij76D4Qp8KpMzwePfZyvv1kYzuWPNZfTeISxWsmyZ6Wxd1uvzjn+UA==
+
+"@spectrum-css/sidenav@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.3.tgz#132141fbd2500a927c312fa4e1d712c438b3d597"
+  integrity sha512-cQ+CgwjxGftrcc79i1XnGd66QTl7H7zopSU0UTV4Qq7hvqfrjjWxfZ6b+3tezrrhNlDope1ff9o8sm67PsPXtg==
+
+"@spectrum-css/statuslight@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.2.tgz#dc54b6cd113413dcdb909c486b5d7bae60db65c5"
+  integrity sha512-xodB8g8vGJH20XmUj9ZsPlM1jHrGeRbvmVXkz0q7YvQrYAhim8pP3W+XKKZAletPFAuu8cmUOc6SWn6i4X4z6w==
+
+"@spectrum-css/switch@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"
+  integrity sha512-zqmHpgWPNg1gEwdUNFYV3CBX5JaeALfIqcJIxE0FLZqr9d1C4+oLE0ItIFzt1bwr4bFAOmkEpvtiY+amluzGxQ==
+
+"@spectrum-css/table@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.3.tgz#7f7f19905ef3275cbf907ce3a5818e63c30b2caf"
+  integrity sha512-nxwzVjLPsXoY/v4sdxOVYLcC+cEbGgJyLcLclT5LT9MGSbngFeUMJzzVR4EvehzuN4dH7hrATG7Mbuq29Mf0Hg==
+
+"@spectrum-css/tabs@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.3.tgz#51dd6f168c897b0fdc3a7e9f901df7bd2288b4fc"
+  integrity sha512-iLP1I72bJWz9APdQB1jiw+pOv5a7N+hYOCJvRoc56Us/hJKVzowkyGRe3uH+8v36nCG9bHxiAQNLoU8eXisVrg==
+
+"@spectrum-css/tags@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.3.tgz#fc76d2735cdc442de91b7eb3bee49a928c0767ac"
+  integrity sha512-SL8vPxVDfWcY5VdIuyl0TImEXcOU1I7yCyXkk7MudMwfnYs81FaIyY32hFV9OHj0Tz/36UzRzc7AVMSuRQ53pw==
+
+"@spectrum-css/textfield@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.2.tgz#907f62d2dc82852dd6236a820be99e252b531631"
+  integrity sha512-nkFgAb0cP4jUodkUBErMNfyF78jJLtgL1Mrr9/rvGpGobo10IAbb8zZY4CkZ64o8XmMy/85+wZTKcx+KHatqpg==
+
+"@spectrum-css/toast@^3.0.1":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.3.tgz#97c1527384707600832ecda35643ed304615250f"
+  integrity sha512-CjLeaMs+cjUXojCCRtbj0YkD2BoZW16kjj2o5omkEpUTjA34IJ8xJ1a+CCtDILWekhXvN0MBN4sbumcnwcnx8w==
+
+"@spectrum-css/tooltip@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.3.tgz#26b8ca3b3d30e29630244d85eb4fc11d0c841281"
+  integrity sha512-ztRF7WW1FzyNavXBRc+80z67UoOrY9wl3cMYsVD3MpDnyxdzP8cjza1pCcolKBaFqRTcQKkxKw3GWtGICRKR5A==
+
+"@spectrum-css/treeview@^3.0.2":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.3.tgz#aeda5175158b9f8d7529cb2b394428eb2a428046"
+  integrity sha512-D5gGzZC/KtRArdx86Mesc9+99W9nTbUOeyYGqoJoAfJSOttoT6Tk5CrDvlCmAqjKf5rajemAkGri1ChqvUIwkw==
+
+"@spectrum-css/typography@^3.0.1", "@spectrum-css/typography@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.2.tgz#ea3ca0a60e18064527819d48c8c4364cab4fcd38"
+  integrity sha512-5ZOLmQe0edzsDMyhghUd4hBb5uxGsFrxzf+WasfcUw9klSfTsRZ09n1BsaaWbgrLjlMQ+EEHS46v5VNo0Ms2CA==
+
+"@spectrum-css/underlay@^2.0.9":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.10.tgz#8b75b646605a311850f6620caa18d4996cd64ed7"
+  integrity sha512-PmsmkzeGD/rY4pp3ILXHt9w8BW7uaEqXe08hQRS7rGki7wqCpG4mE0/8N3yEcA3QxWQclmG9gdkg5uz6wMmYzA==
+
 "@spectrum-css/vars@^3.0.1", "@spectrum-css/vars@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.2.tgz#ea9062c3c98dfc6ba59e5df14a03025ad8969999"
@@ -85,7 +325,7 @@ colorette@^1.2.2:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
-dayjs@^1.10.5:
+dayjs@^1.10.4, dayjs@^1.10.5:
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.5.tgz#5600df4548fc2453b3f163ebb2abbe965ccfb986"
   integrity sha512-BUFis41ikLz+65iH6LHQCDm4YPMj5r1YFLdupPIyM4SGcXMmtiLQ7U37i+hGS8urIuqe7I/ou3IS1jVc4nbN4g==
@@ -236,6 +476,11 @@ svelte-hmr@^0.14.2:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.4.tgz#b7ef2bfeef23916e0e912828c50645ca572ac355"
   integrity sha512-kItFF7vqzStckSigoFmMnxJpTOdB9TWnQAW6Js+yAB4277tLbJIIE5KBlGHNmJNpA7MguqidsPB27Uw5UzQPCA==
 
+svelte-portal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
+  integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
+
 svelte@^3.38.2:
   version "3.38.2"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"