gardenjs 1.6.8 → 1.7.0

package/src/client/GardenApp.svelte

@@ -2,6 +2,17 @@
   import Stage from './components/stage/Stage.svelte'
   import Sidebar from './components/sidebar/Sidebar.svelte'
   import Topbar from './components/topbar/Topbar.svelte'
+  import VerticalSplitPane from './components/panes/VerticalSplitPane.svelte'
+  import {
+    sidebarWidth,
+    sidebarExpanded,
+    sidebarMaxWidth,
+    updateSidebarWidth,
+    updateSidebarMaxWidth,
+    toggleExpandSidebar,
+    collapseMobileNavIfVisible,
+    initSidebar,
+  } from './logic/sidebar.svelte.js'
   import {
     stageStyle,
     stageSize,
@@ -31,12 +42,9 @@
     updateStageWidth,
     updateStageRect,
     resetStage,
-    sidebarExpanded,
-    toggleExpandSidebar,
     toggleShowInspector,
     toggleShowGrid,
     toggleOrientation,
-    handleSelectionChanged,
     showInspector,
     showGrid,
     gridSettings,
@@ -92,9 +100,11 @@
   })
   $effect(() => {
     updateSelectedComponent($componentName)
-    handleSelectionChanged()
+    collapseMobileNavIfVisible()
   })
 
+  initSidebar()
+
   let projectTitle = config.project_title || ''
   let projectLogo = config.project_logo?.split('/').pop() || null
   let projectLogoDarkmode =
@@ -132,99 +142,101 @@
   </div>
 {:else}
   <div class="garden">
-    <div class="sidebar">
-      <Sidebar
-        {docsLink}
-        {projectLogoDarkmode}
-        {projectLogo}
-        {projectTitle}
-        appTheme={$appTheme}
-        bookmarks={$bookmarks}
-        filter={$filterNavTree}
-        nodes={$nodes}
-        panelExpanded={$panelExpanded}
-        treeCollapsed={$treeCollapsed}
-        sidebarExpanded={$sidebarExpanded}
-        onLogoClicked={resetStage}
-        onToggleBookmark={toggleBookmark}
-        onToggleExpandPanel={toggleExpandPanel}
-        onToggleFoldStatusOfNode={toggleFolder}
-        onUpdateFilter={updateFilter}
-        onCollapseTree={collapseTree}
-        onExpandTree={expandTree}
-      />
-    </div>
-    <div class="main">
-      <Topbar
-        appTheme={$appTheme}
-        landscape={$landscape}
-        node={$selectedNode}
-        showGrid={$showGrid}
-        nodeVisibleInExplorer={$selectedNodeVisibleInTree}
-        showInspector={$showInspector}
-        sidebarExpanded={$sidebarExpanded}
-        stageHeight={$stageHeight}
-        stageMaxHeight={$stageMaxHeight}
-        stageMaxWidth={$stageMaxWidth}
-        stageRect={$stageRect}
-        stageSize={$stageSize}
-        stageSizes={$stageSizes}
-        stageWidth={$stageWidth}
-        themes={$themes}
-        onOpenInTab={openInTab}
-        onSetStageHeight={updateStageHeight}
-        onSetStageWidth={updateStageWidth}
-        onSetStageSize={setStagesize}
-        onSetTheme={setTheme}
-        onToggleAppTheme={toggleAppTheme}
-        onToggleBookmark={toggleBookmark}
-        onToggleExpandSidebar={toggleExpandSidebar}
-        onToggleOrientation={toggleOrientation}
-        onToggleShowGrid={toggleShowGrid}
-        onToggleShowInspector={toggleShowInspector}
-        onRevealInExplorer={() => navigateToLeafNode($selectedNode?.href)}
-      />
-      <Stage
-        appTheme={$appTheme}
-        componentName={$componentName}
-        das={$das}
-        devmodus={config.devmodus}
-        gridSettings={$gridSettings}
-        panelExpanded={$panelExpanded}
-        selectedExample={$selectedExample}
-        showGrid={$showGrid}
-        showInspector={$showInspector}
-        stageContainerHeight={$stageContainerHeight}
-        stageContainerMaxHeight={$stageContainerMaxHeight}
-        stageHeight={$stageHeight}
-        stageMaxHeight={$stageMaxHeight}
-        stageMaxWidth={$stageMaxWidth}
-        stageSize={$stageSize}
-        stageStyle={$stageStyle}
-        stageWidth={$stageWidth}
-        theme={$activeTheme}
-        onSetStageContainerHeight={updateStageContainerHeight}
-        onSetStageContainerMaxHeight={updateStageContainerMaxHeight}
-        onSetStageContainerWidth={updateStageContainerWidth}
-        onSetStageHeight={updateStageHeight}
-        onSetStageWidth={updateStageWidth}
-        onToggleExpandPanel={toggleExpandPanel}
-        onUpdateStageRect={updateStageRect}
-      />
-    </div>
+    <VerticalSplitPane
+      leftWidth={$sidebarWidth}
+      maxWidth={$sidebarMaxWidth}
+      onSetLeftWidth={updateSidebarWidth}
+      onSetMaxWidth={updateSidebarMaxWidth}
+      hideDragBar
+    >
+      {#snippet left()}
+        <Sidebar
+          {docsLink}
+          {projectLogoDarkmode}
+          {projectLogo}
+          {projectTitle}
+          appTheme={$appTheme}
+          bookmarks={$bookmarks}
+          filter={$filterNavTree}
+          nodes={$nodes}
+          panelExpanded={$panelExpanded}
+          treeCollapsed={$treeCollapsed}
+          sidebarExpanded={$sidebarExpanded}
+          onLogoClicked={resetStage}
+          onToggleBookmark={toggleBookmark}
+          onToggleExpandPanel={toggleExpandPanel}
+          onToggleFoldStatusOfNode={toggleFolder}
+          onUpdateFilter={updateFilter}
+          onCollapseTree={collapseTree}
+          onExpandTree={expandTree}
+        />
+      {/snippet}
+      {#snippet right()}
+        <div class="main">
+          <Topbar
+            appTheme={$appTheme}
+            landscape={$landscape}
+            node={$selectedNode}
+            showGrid={$showGrid}
+            nodeVisibleInExplorer={$selectedNodeVisibleInTree}
+            showInspector={$showInspector}
+            sidebarExpanded={$sidebarExpanded}
+            stageHeight={$stageHeight}
+            stageMaxHeight={$stageMaxHeight}
+            stageMaxWidth={$stageMaxWidth}
+            stageRect={$stageRect}
+            stageSize={$stageSize}
+            stageSizes={$stageSizes}
+            stageWidth={$stageWidth}
+            themes={$themes}
+            onOpenInTab={openInTab}
+            onSetStageHeight={updateStageHeight}
+            onSetStageWidth={updateStageWidth}
+            onSetStageSize={setStagesize}
+            onSetTheme={setTheme}
+            onToggleAppTheme={toggleAppTheme}
+            onToggleBookmark={toggleBookmark}
+            onToggleExpandSidebar={toggleExpandSidebar}
+            onToggleOrientation={toggleOrientation}
+            onToggleShowGrid={toggleShowGrid}
+            onToggleShowInspector={toggleShowInspector}
+            onRevealInExplorer={() => navigateToLeafNode($selectedNode?.href)}
+          />
+          <Stage
+            appTheme={$appTheme}
+            componentName={$componentName}
+            das={$das}
+            devmodus={config.devmodus}
+            gridSettings={$gridSettings}
+            panelExpanded={$panelExpanded}
+            selectedExample={$selectedExample}
+            showGrid={$showGrid}
+            showInspector={$showInspector}
+            stageContainerHeight={$stageContainerHeight}
+            stageContainerMaxHeight={$stageContainerMaxHeight}
+            stageHeight={$stageHeight}
+            stageMaxHeight={$stageMaxHeight}
+            stageMaxWidth={$stageMaxWidth}
+            stageSize={$stageSize}
+            stageStyle={$stageStyle}
+            stageWidth={$stageWidth}
+            theme={$activeTheme}
+            onSetStageContainerHeight={updateStageContainerHeight}
+            onSetStageContainerMaxHeight={updateStageContainerMaxHeight}
+            onSetStageContainerWidth={updateStageContainerWidth}
+            onSetStageHeight={updateStageHeight}
+            onSetStageWidth={updateStageWidth}
+            onToggleExpandPanel={toggleExpandPanel}
+            onUpdateStageRect={updateStageRect}
+          />
+        </div>
+      {/snippet}
+    </VerticalSplitPane>
   </div>
 {/if}
 
 <style>
-  .sidebar {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
   .garden {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    flex-grow: 1;
     margin: 0;
     padding: 0 0.375rem;
     width: 100vw;
@@ -233,6 +245,7 @@
     background-color: var(--c-bg-body);
   }
   .main {
+    margin-left: 0.125rem;
     display: flex;
     flex-direction: column;
     width: 100%;

package/src/client/GardenFrame.svelte

@@ -54,8 +54,13 @@
     showGrid = evt.data.showGrid === true
     gridSettings = evt.data.gridSettings
     das = dasMap[evt.data.componentName]
-    selectedExample =
+    const rawSelectedExample =
       das?.examples?.find((ex) => ex.title === evt.data.selectedExample) ?? {}
+    const paramValues = evt.data?.paramValues ?? undefined
+    selectedExample = {
+      ...rawSelectedExample,
+      input: paramValues ?? rawSelectedExample?.input ?? {},
+    }
     componentChanged = componentName !== evt.data.componentName
     componentName = evt.data.componentName || 'Welcome'
     selectedExampleChanged = selectedExampleTitle !== evt.data.selectedExample
@@ -68,7 +73,7 @@
       redirectData = {}
       return
     } else {
-      updateComponent(component, selectedExample, das)
+      executeLatest(() => updateComponent(component, selectedExample, das))
     }
   })
 
@@ -84,6 +89,23 @@
     return DefaultRendererBuilder
   }
 
+  let latestTask
+  let running = false
+
+  const executeLatest = async (task) => {
+    latestTask = task
+    if (running) return
+    if (!running) {
+      running = true
+      while (latestTask != null) {
+        const currentTask = latestTask
+        latestTask = undefined
+        await currentTask()
+      }
+      running = false
+    }
+  }
+
   async function updateComponent(component, selectedExample, das) {
     if (config.renderer) {
       const newRendererBuilder = await getRendererBuilderFor(das?.file)
@@ -95,7 +117,7 @@
     await runHooks()
 
     try {
-      currentRenderer?.updateComponent({
+      await currentRenderer?.updateComponent({
         component,
         selectedExample,
         das,

package/src/client/assets/scss/main.scss

@@ -3,4 +3,3 @@
 @use './base/typography';
 @use './base/navs';
 @use './base/buttons';
-@use './base/input-number.css';

package/src/client/components/panes/HorizontalSplitPane.svelte

@@ -1,12 +1,11 @@
 <script>
-  import { onMount, onDestroy } from 'svelte'
   let {
     topHeight = $bindable(),
     maxHeight,
     top,
     bottom,
-    onSetMaxWidth,
     onSetMaxHeight,
+    onSetMaxWidth,
     onSetTopHeight,
   } = $props()
   let element = $state()
@@ -33,39 +32,38 @@
     return undefined
   })
 
-  const resizeObserver = new ResizeObserver((entries) => {
-    entries.forEach(() => {
-      onSetMaxHeight(element.offsetHeight)
-      onSetMaxWidth(element.offsetWidth)
+  $effect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        if (element) {
+          onSetMaxHeight(element.offsetHeight)
+          onSetMaxWidth(element.offsetWidth)
+        }
+      })
     })
-  })
-
-  onMount(() => {
     resizeObserver.observe(element)
-  })
 
-  onDestroy(() => {
-    resizeObserver.disconnect()
+    return () => {
+      resizeObserver.disconnect()
+    }
   })
 
-  function register() {
-    document.addEventListener('mousemove', drag)
-    document.addEventListener('mouseup', unregister)
+  function startDrag(e) {
+    e.currentTarget.setPointerCapture(e.pointerId)
+    document.body.style.userSelect = 'none'
     dragging = true
   }
 
   const drag = (e) => {
-    window.getSelection().removeAllRanges()
-    const newHeight = Math.min(maxHeight, e.pageY - element.offsetTop - 7)
-    topHeight = newHeight
+    if (e.buttons !== 1) return
+    const newHeight = Math.min(maxHeight, topHeight + e.movementY)
+    topHeight = Math.max(100, newHeight)
     onSetTopHeight(topHeight)
   }
 
-  function unregister() {
-    document.removeEventListener('mousemove', drag)
-    document.removeEventListener('mouseup', unregister)
-
-    onSetTopHeight(topHeight)
+  function stopDrag(e) {
+    e.currentTarget.releasePointerCapture(e.pointerId)
+    document.body.style.userSelect = ''
     dragging = false
   }
 </script>
@@ -75,7 +73,13 @@
     {@render top?.()}
   </div>
   <!-- eslint-disable-next-line -->
-  <div class="dragbar" class:dragging onmousedown={register}></div>
+  <div
+    class="dragbar"
+    class:dragging
+    onpointerdown={startDrag}
+    onpointerup={stopDrag}
+    onpointermove={drag}
+  ></div>
   {@render bottom?.()}
 </div>
 

package/src/client/components/panes/VerticalSplitPane.svelte

@@ -0,0 +1,118 @@
+<script>
+  let {
+    leftWidth = $bindable(),
+    maxWidth,
+    left,
+    right,
+    onSetMaxWidth,
+    onSetLeftWidth,
+    hideDragBar,
+  } = $props()
+  let element = $state()
+  let dragging = $state(false)
+
+  let init = $state(false)
+
+  $effect(() => {
+    if (element && !init) {
+      init = true
+      if (leftWidth && maxWidth) {
+        return
+      }
+      const elementWidth = element.offsetWidth
+      onSetMaxWidth(elementWidth - 100)
+      onSetLeftWidth(Math.round(elementWidth * 0.2))
+    }
+  })
+
+  const leftWidthWithUnit = $derived.by(() => {
+    if (Number.isInteger(leftWidth) && Number.isInteger(maxWidth)) {
+      return maxWidth < leftWidth ? maxWidth + 'px' : leftWidth + 'px'
+    }
+    return undefined
+  })
+
+  $effect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        if (element) {
+          onSetMaxWidth(element.offsetWidth - 100)
+        }
+      })
+    })
+    resizeObserver.observe(element)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  })
+
+  function startDrag(e) {
+    e.currentTarget.setPointerCapture(e.pointerId)
+    document.body.style.userSelect = 'none'
+    dragging = true
+  }
+
+  const drag = (e) => {
+    if (e.buttons !== 1) return
+    const newWidth = Math.min(maxWidth, leftWidth + e.movementX)
+    leftWidth = Math.max(100, newWidth)
+    onSetLeftWidth(leftWidth)
+  }
+
+  function stopDrag(e) {
+    e.currentTarget.releasePointerCapture(e.pointerId)
+    document.body.style.userSelect = ''
+    dragging = false
+  }
+</script>
+
+<div class="container" bind:this={element}>
+  <div class="left" style="width: {leftWidthWithUnit};">
+    {@render left?.()}
+  </div>
+  <!-- eslint-disable-next-line -->
+  <div
+    class="dragbar"
+    class:dragging
+    class:hide-drag-bar={hideDragBar}
+    onpointerdown={startDrag}
+    onpointerup={stopDrag}
+    onpointermove={drag}
+  ></div>
+  {@render right?.()}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+  }
+  .left {
+    flex-grow: 0;
+    flex-shrink: 0;
+    border-right: 0;
+    border-radius: 0.625rem 0.625rem 0 0;
+    overflow: auto;
+  }
+  .dragbar {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 0.188rem;
+    background-color: var(--c-primary);
+    cursor: col-resize;
+    z-index: 10;
+  }
+  .dragging,
+  .dragbar:hover {
+    background-color: var(--c-primary);
+    transform: scaleX(2);
+  }
+  .hide-drag-bar {
+    background-color: unset;
+  }
+</style>

package/src/client/components/sidebar/Sidebar.svelte

@@ -108,13 +108,10 @@
 
 <style>
   .sidebar_container {
-    --w-sidebar: 260px;
+    margin-right: 0.125rem;
     display: flex;
     flex-direction: column;
     position: relative;
-    margin: 0.375rem 0;
-    width: 0;
-    max-width: var(--w-sidebar);
     height: calc(100vh - 0.75rem);
     background-color: var(--c-sidebar-bg);
     border-radius: 0.625rem;
@@ -122,8 +119,7 @@
     overflow: hidden;
   }
   .show-sidebar {
-    margin: 0.375rem 0.375rem 0.375rem 0;
-    width: var(--w-sidebar);
+    margin: 0.375rem 0.125rem 0.375rem 0;
     box-sizing: border-box;
   }
   .project-identifier {
@@ -135,10 +131,10 @@
     align-items: center;
     padding: 0.25rem 0.688rem;
     margin: 0 0 0.125rem;
-    width: var(--w-sidebar);
+    width: 100%;
     height: 2.25rem;
     background-color: var(--c-sidebar);
-    inline-size: var(--w-sidebar);
+    inline-size: 100%;
     overflow: hidden;
     white-space: nowrap;
     font-size: 1.25rem;
@@ -183,11 +179,12 @@
     color: var(--c-basic-500);
   }
   /* same styles as the input in the topbar: */
-  .filter_input:focus-visible {
+  .filter_input:focus {
     background-color: var(--c-primary-bg);
+    box-shadow: 0 0 0 1px var(--c-primary);
   }
   .filter_zero-results {
-    width: var(--w-sidebar);
+    width: 100%;
     padding: 0.5rem 0.688rem 0.375rem 0.688rem;
     text-transform: initial;
     font-size: 0.813rem;
@@ -213,7 +210,7 @@
     .controls {
       display: block;
       flex-shrink: 0;
-      width: var(--w-sidebar);
+      width: 100%;
       height: 103px;
       bottom: 0.375rem;
       padding: 0;

package/src/client/components/stage/Stage.svelte

@@ -38,6 +38,72 @@
   let myframeready = $state()
   let myframe = $state()
 
+  const selectedExampleObj = $derived.by(() => {
+    if (!das?.examples?.length) return {}
+    return das.examples.find((ex) => ex.title === selectedExample) ?? {}
+  })
+
+  const selectedExampleInput = $derived.by(() => {
+    const input = selectedExampleObj?.input
+    if (input && typeof input === 'object') return input
+    return {}
+  })
+
+  function getType(value) {
+    if (Array.isArray(value)) {
+      return 'array'
+    }
+    if (value instanceof Date) {
+      return 'date'
+    }
+    return typeof value
+  }
+
+  function capitalize(str) {
+    if (str.length > 1) {
+      return str.charAt(0).toUpperCase() + str.substring(1)
+    }
+    return str
+  }
+
+  const params = $derived.by(() => {
+    const configuredParams = das?.params ?? []
+    const exampleParams = Object.entries(selectedExampleInput).reduce(
+      (acc, [name, value]) => {
+        let configuredParam = configuredParams.find((p) => p.name === name)
+        if (configuredParam) {
+          acc.push(configuredParam)
+        } else {
+          acc.push({ name, type: getType(value), label: capitalize(name) })
+        }
+        return acc
+      },
+      []
+    )
+
+    return [
+      ...exampleParams,
+      ...configuredParams
+        .filter((configuredParam) =>
+          exampleParams.every(
+            (exampleParam) => exampleParam.name !== configuredParam.name
+          )
+        )
+        .map((p) => ({ ...p, value: undefined })),
+    ]
+  })
+
+  let paramValues = $derived(structuredClone(selectedExampleInput))
+
+  const paramValuesForPostMessage = $derived.by(() => {
+    try {
+      return JSON.parse(JSON.stringify(paramValues))
+    } catch (e) {
+      console.err(e)
+      return null
+    }
+  })
+
   const resizeObserver = new ResizeObserver((entries) => {
     entries.forEach((entry) => {
       onUpdateStageRect(entry.contentRect)
@@ -84,6 +150,14 @@
       tabs.push({
         name: 'Examples',
         props: {
+          params,
+          values: paramValues,
+          onChange: (prop, value) => {
+            paramValues = { ...paramValues, [prop]: value }
+          },
+          onReset: () => {
+            paramValues = { ...selectedExampleInput }
+          },
           selected: selectedExample,
           examples: das.examples.map((ex) => ex.title),
           onSelectExample: setSelectedExample,
@@ -127,6 +201,7 @@
           showInspector,
           showGrid,
           gridSettings,
+          paramValues: paramValuesForPostMessage,
         },
         window.location
       )
@@ -165,7 +240,7 @@
   {#snippet bottom()}
     <div class="panel">
       {#if panelExpanded}
-        <PanelComponent {tabs} {onToggleExpandPanel} />
+        <PanelComponent {tabs} {onToggleExpandPanel} children={undefined} />
       {/if}
     </div>
   {/snippet}