windmill-components 1.57.4 → 1.60.0

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -7,7 +7,7 @@ import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
 import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
-import { scriptLangToEditorLang } from '../../../../utils';
+import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
 import Tooltip from '../../../Tooltip.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
@@ -15,7 +15,7 @@ export let name = undefined;
 export let id;
 const { runnableComponents } = getContext('AppEditorContext');
 let editor;
-let validCode = false;
+let validCode = true;
 async function inferInlineScriptSchema(language, content, schema) {
     try {
         await inferArgs(language, content, schema);
@@ -28,8 +28,8 @@ async function inferInlineScriptSchema(language, content, schema) {
     return schema;
 }
 onMount(async () => {
-    if (inlineScript) {
-        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, inlineScript?.schema);
+    if (inlineScript && !inlineScript.schema) {
+        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
     }
 });
 const dispatch = createEventDispatcher();
@@ -73,7 +73,7 @@ let runLoading = false;
 					startIcon={{ icon: faTrash }}
 					on:click={() => dispatch('delete')}
 				/>
-			{:else}
+			{:else if $runnableComponents[id] != undefined}
 				<Button
 					loading={runLoading}
 					size="xs"
@@ -84,9 +84,8 @@ let runLoading = false;
 						runLoading = false
 					}}
 				>
-					Run&nbsp;<Tooltip
-						>Ctrl+Enter to run the script and see the result in the component directly</Tooltip
-					>
+					Run&nbsp;
+					<Tooltip light>Ctrl+Enter</Tooltip>
 				</Button>
 			{/if}
 

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -13,7 +13,7 @@ export let id;
 async function fork(path) {
     let { content, language, schema } = await getScriptByPath(path);
     if (componentInput && componentInput.type == 'runnable') {
-        if (!schema || Object.keys(schema).length == 0) {
+        if (!schema || typeof schema == 'string' || Object.keys(schema).length == 0) {
             schema = emptySchema();
             await inferArgs(language, content, schema);
         }

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -109,7 +109,10 @@ $: extraLib =
 					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
 						<ConnectedInputEditor bind:componentInput={component.componentInput} />
 					{:else if component.componentInput?.type === 'runnable' && component.componentInput !== undefined}
-						<RunnableInputEditor bind:appInput={component.componentInput} />
+						<RunnableInputEditor
+							bind:appInput={component.componentInput}
+							defaultUserInput={component.type == 'formcomponent'}
+						/>
 					{/if}
 				</div>
 				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -12,7 +12,5 @@ export let componentInput;
 {:else if componentInput.type === 'static'}
 	<StaticInputEditor bind:componentInput />
 {:else if componentInput.type === 'user'}
-	<span class="text-2xs italic text-gray-6f00"
-		>Field's value is set by the user in the visible field</span
-	>
+	<span class="text-2xs italic text-gray-6f00">Field's value is set by the user</span>
 {/if}

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -1,9 +1,11 @@
 <script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
-import { capitalize } from '../../../../utils';
+import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
 import { faArrowRight, faPen, faTableCells, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fieldTypeToTsType } from '../../utils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import { getContext } from 'svelte';
+import Tooltip from '../../../Tooltip.svelte';
+import Popover from '../../../Popover.svelte';
 export let inputSpecs;
 export let userInputEnabled = true;
 export let staticOnly = false;
@@ -19,10 +21,17 @@ const { connectingInput } = getContext('AppEditorContext');
 			<div class="flex flex-col gap-1">
 				<div class="flex justify-between items-end gap-1">
 					<span class="text-sm font-semibold truncate">
-						{shouldCapitalize ? capitalize(inputSpecKey) : inputSpecKey}
+						{shouldCapitalize
+							? capitalize(addWhitespaceBeforeCapitals(inputSpecKey))
+							: inputSpecKey}
+						{#if input.tooltip}
+							<Tooltip>
+								{input.tooltip}
+							</Tooltip>
+						{/if}
 					</span>
 
-					<div class="flex gap-2 flex-wrap items-center">
+					<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
 						<Badge color="blue">
 							{input.fieldType === 'array' && input.subFieldType
 								? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
@@ -33,7 +42,6 @@ const { connectingInput } = getContext('AppEditorContext');
 							<ToggleButtonGroup
 								bind:selected={inputSpecs[inputSpecKey].type}
 								on:selected={(e) => {
-									console.log(inputSpecs[inputSpecKey])
 									if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
 										$connectingInput = {
 											opened: true,
@@ -43,45 +51,56 @@ const { connectingInput } = getContext('AppEditorContext');
 									}
 								}}
 							>
-								<ToggleButton
-									title="Static"
-									position="left"
-									value="static"
-									startIcon={{ icon: faPen }}
-									size="xs"
-									iconOnly
-								/>
-								{#if rowColumns}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
 									<ToggleButton
-										title="From Row"
-										position="center"
-										value="row"
-										startIcon={{ icon: faTableCells }}
+										position="left"
+										value="static"
+										startIcon={{ icon: faPen }}
 										size="xs"
 										iconOnly
-										disabled={staticOnly}
 									/>
+									<svelte:fragment slot="text">Static</svelte:fragment>
+								</Popover>
+								{#if rowColumns}
+									<Popover placement="bottom" notClickable disapperTimoout={0}>
+										<ToggleButton
+											position="center"
+											value="row"
+											startIcon={{ icon: faTableCells }}
+											size="xs"
+											disabled={staticOnly}
+										>
+											<Tooltip>
+												Use the column name to have the value of the cell be passed to the action
+											</Tooltip>
+										</ToggleButton>
+										<svelte:fragment slot="text">Column</svelte:fragment>
+									</Popover>
+								{/if}
+								{#if userInputEnabled && !input.format?.startsWith('resource-')}
+									<Popover placement="bottom" notClickable disapperTimoout={0}>
+										<ToggleButton
+											position="center"
+											value="user"
+											startIcon={{ icon: faUser }}
+											size="xs"
+											iconOnly
+											disabled={staticOnly}
+										/>
+										<svelte:fragment slot="text">User Input</svelte:fragment>
+									</Popover>
 								{/if}
-								{#if userInputEnabled && (!input.format?.startsWith('resource-') || true)}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
 									<ToggleButton
-										title="User Input"
-										position="center"
-										value="user"
-										startIcon={{ icon: faUser }}
+										position="right"
+										value="connected"
+										startIcon={{ icon: faArrowRight }}
 										size="xs"
 										iconOnly
 										disabled={staticOnly}
 									/>
-								{/if}
-								<ToggleButton
-									title="Connect"
-									position="right"
-									value="connected"
-									startIcon={{ icon: faArrowRight }}
-									size="xs"
-									iconOnly
-									disabled={staticOnly}
-								/>
+									<svelte:fragment slot="text">Connect</svelte:fragment>
+								</Popover>
 							</ToggleButtonGroup>
 						{/if}
 					</div>

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { BaseAppComponent } from '../../types';
 declare const __propDef: {
     props: {
-        inputSpecs: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput) & {
-            onlyStatic?: boolean;
-        }>;
+        inputSpecs: BaseAppComponent['configuration'];
         userInputEnabled?: boolean | undefined;
         staticOnly?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;

package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -13,7 +13,7 @@ const { selectedComponent, staticOutputs } = getContext('AppEditorContext');
 function addComponent() {
     const actionId = getNextId(components.map((x) => x.id.split('-')[1]));
     const newComponent = {
-        id: `${id}-${actionId}`,
+        id: `${id}_${actionId}`,
         type: 'buttoncomponent',
         configuration: {
             label: {

package/components/apps/editor/settingsPanel/inputEditor/RowInputEditor.svelte

@@ -2,5 +2,5 @@
 </script>
 
 {#if componentInput}
-	<input type="text" placeholder="column" bind:value={componentInput.column} />
+	<input type="text" placeholder="column name" bind:value={componentInput.column} />
 {/if}

package/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte

@@ -2,11 +2,12 @@
 import RunnableSelector from '../mainInput/RunnableSelector.svelte';
 import SelectedRunnable from '../SelectedRunnable.svelte';
 export let appInput;
+export let defaultUserInput = false;
 $: isRunnableSelected = isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput);
 </script>
 
 {#if isRunnableSelected}
 	<SelectedRunnable bind:appInput />
 {:else}
-	<RunnableSelector bind:appInput />
+	<RunnableSelector {defaultUserInput} bind:appInput />
 {/if}

package/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte.d.ts

@@ -3,6 +3,7 @@ import type { ResultAppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
+        defaultUserInput?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -13,7 +13,7 @@ $: componentInput && onchange?.();
 	{#if componentInput.fieldType === 'number'}
 		<input type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
-		<textarea type="text" bind:value={componentInput.value} />
+		<textarea bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -9,6 +9,7 @@ import { getContext } from 'svelte';
 import { loadSchema, schemaToInputsSpec } from '../../../utils';
 import { emptySchema } from '../../../../../utils';
 export let appInput;
+export let defaultUserInput = false;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
@@ -19,7 +20,7 @@ async function loadSchemaFromTriggerable(path, runType) {
 async function pickScript(path) {
     if (appInput.type === 'runnable') {
         const schema = await loadSchemaFromTriggerable(path, 'script');
-        const fields = schemaToInputsSpec(schema);
+        const fields = schemaToInputsSpec(schema, defaultUserInput);
         appInput.runnable = {
             type: 'runnableByPath',
             path,
@@ -32,7 +33,7 @@ async function pickScript(path) {
 async function pickFlow(path) {
     if (appInput.type === 'runnable') {
         const schema = await loadSchemaFromTriggerable(path, 'flow');
-        const fields = schemaToInputsSpec(schema);
+        const fields = schemaToInputsSpec(schema, defaultUserInput);
         appInput.runnable = {
             type: 'runnableByPath',
             path,
@@ -45,7 +46,7 @@ async function pickFlow(path) {
 async function pickHubScript(path) {
     if (appInput.type === 'runnable') {
         const schema = await loadSchemaFromTriggerable(path, 'hubscript');
-        const fields = schemaToInputsSpec(schema);
+        const fields = schemaToInputsSpec(schema, defaultUserInput);
         appInput.runnable = {
             type: 'runnableByPath',
             path,

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte.d.ts

@@ -3,6 +3,7 @@ import type { ResultAppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
+        defaultUserInput?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editorUtils.js

@@ -4,8 +4,13 @@ export function defaultCode(component, language) {
   return [
     { foo: x, bar: 42 },
     { foo: "static", bar: 84 }]
-}
-`;
+}`;
+    }
+    else if (component === 'tablecomponent' && language === 'python3') {
+        return `def main(x: str):
+  return [
+    { "foo": x, "bar": 42 },
+    { "foo": "static", "bar": 84 }]`;
     }
     return undefined;
 }

package/components/apps/inputType.d.ts

@@ -39,7 +39,7 @@ type RunnableByName = {
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type ResultInput = {
     runnable: Runnable;
-    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+    fields: Record<string, (StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput)>;
     type: 'runnable';
     value?: any;
 };

package/components/apps/types.d.ts

@@ -2,7 +2,7 @@ import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
 import type { FilledItem } from 'svelte-grid';
 import type { Writable } from 'svelte/store';
-import type { AppInput, ConnectedAppInput, ConnectedInput, StaticAppInput, UserAppInput } from './inputType';
+import type { AppInput, ConnectedAppInput, ConnectedInput, RowAppInput, StaticAppInput, UserAppInput } from './inputType';
 import type { World } from './rx';
 type BaseComponent<T extends string> = {
     type: T;
@@ -12,6 +12,7 @@ export type TextInputComponent = BaseComponent<'textinputcomponent'>;
 export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
 export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
+export type SliderComponent = BaseComponent<'slidercomponent'>;
 export type HtmlComponent = BaseComponent<'htmlcomponent'>;
 export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
 export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
@@ -42,8 +43,9 @@ export type Aligned = {
 export interface BaseAppComponent extends Partial<Aligned> {
     id: ComponentID;
     componentInput: AppInput | undefined;
-    configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput) & {
+    configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput) & {
         onlyStatic?: boolean;
+        tooltip?: string;
     }>;
     card: boolean | undefined;
     /**
@@ -53,7 +55,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
      */
     softWrap?: boolean;
 }
-export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
+export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | SliderComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
 export type ComponentSet = {
     title: string;
     components: AppComponent[];

package/components/apps/utils.d.ts

@@ -2,7 +2,7 @@ import type { Schema } from '../../common';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { AppComponent } from './types';
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
-export declare function schemaToInputsSpec(schema: Schema): Record<string, StaticAppInput>;
+export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
 export declare const displayData: Record<AppComponent['type'], {
     name: string;
     icon: any;

package/components/apps/utils.js

@@ -1,6 +1,7 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
-import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2 } from 'lucide-svelte';
+import { emptySchema } from '../../utils';
+import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal } from 'lucide-svelte';
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -20,20 +21,22 @@ export async function loadSchema(workspace, path, runType) {
         const script = await ScriptService.getHubScriptByPath({
             path
         });
+        if (script.schema == undefined || Object.keys(script.schema).length == 0 || typeof script.schema != 'object') {
+            script.schema = emptySchema();
+        }
         await inferArgs(script.language, script.content, script.schema);
         return script.schema;
     }
 }
-export function schemaToInputsSpec(schema) {
+export function schemaToInputsSpec(schema, defaultUserInput) {
     if (schema?.properties == undefined) {
         return {};
     }
     return Object.keys(schema.properties).reduce((accu, key) => {
         const property = schema.properties[key];
         accu[key] = {
-            type: 'static',
+            type: defaultUserInput && !property.format?.startsWith('resource-') ? 'user' : 'static',
             value: property.default,
-            visible: property.format ? false : true,
             fieldType: property.type,
             format: property.format
         };
@@ -113,6 +116,10 @@ export const displayData = {
         name: 'Number',
         icon: Binary
     },
+    slidercomponent: {
+        name: 'Slider',
+        icon: SlidersHorizontal
+    },
     passwordinputcomponent: {
         name: 'Password',
         icon: Lock

package/components/common/button/Button.svelte

@@ -25,8 +25,8 @@ const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
     blue: {
-        border: 'border-blue-500 hover:border-blue-700 focus:border-blue-700 bg-white hover:bg-blue-100 focus:bg-blue-100 text-blue-500 hover:text-blue-700 focus:text-blue-700 focus:ring-blue-300',
-        contained: 'bg-blue-500 hover:bg-blue-700 focus:bg-blue-700 text-white focus:ring-blue-300'
+        border: 'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
+        contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300'
     },
     red: {
         border: 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',

package/components/common/drawer/Drawer.svelte

@@ -83,7 +83,7 @@ onMount(() => {
 	.drawer.open {
 		height: 100%;
 		width: 100%;
-		z-index: 99;
+		z-index: 1002;
 		transition: z-index var(--duration) step-start;
 	}
 

package/components/common/table/AppRow.svelte

@@ -2,7 +2,7 @@
 import SharedBadge from '../../SharedBadge.svelte';
 import { AppService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
-import { faEdit, faEye, faFileExport, faPen, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCodeFork, faEdit, faEye, faFileExport, faPen, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
@@ -44,6 +44,18 @@ const dispatch = createEventDispatcher();
 							Edit
 						</Button>
 					</div>
+				{:else}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faCodeFork }}
+							href="/apps/add?template={path}"
+						>
+							Fork
+						</Button>
+					</div>
 				{/if}
 			{/if}
 
@@ -71,6 +83,11 @@ const dispatch = createEventDispatcher();
 					icon: faPen,
 					href: `/apps/edit/${path}?nodraft=true`
 				},
+				{
+					displayName: 'Use as template',
+					icon: faCodeFork,
+					href: `/apps/add?template=${path}`
+				},
 				{
 					displayName: 'Move/Rename',
 					icon: faFileExport,

package/components/common/table/LanguageBadge.svelte

@@ -28,5 +28,7 @@ const colorByLanguage = {
 	baseClass={classNames(baseClassByLanguage, 'flex gap-1 items-center')}
 >
 	<LanguageIcon lang={language} width={12} height={12} />
-	{languageLabel}
+	<span class="hidden lg:inline">
+		{languageLabel}
+	</span>
 </Badge>

package/components/common/table/Row.svelte

@@ -17,8 +17,10 @@ const color = {
 }[kind];
 </script>
 
-<div class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 first-of-type:!border-t-0 
-first-of-type:rounded-t-md last-of-type:rounded-b-md {color}">
+<div
+	class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 first-of-type:!border-t-0 
+first-of-type:rounded-t-md last-of-type:rounded-b-md {color}"
+>
 	<RowIcon {href} {kind} />
 
 	<a {href} class="min-w-0 grow hover:underline decoration-gray-400">
@@ -34,7 +36,7 @@ first-of-type:rounded-t-md last-of-type:rounded-b-md {color}">
 		</div>
 	</a>
 	{#if $$slots.badges}
-		<div class="w-32 hidden lg:flex flex-row gap-1 items-start flex-wrap">
+		<div class="w-32 hidden md:flex flex-row gap-1 items-start flex-wrap">
 			<slot name="badges" />
 		</div>
 	{/if}

package/components/flows/CreateActionsApp.svelte

@@ -23,9 +23,7 @@ async function importJson() {
 		startIcon={{ icon: faPlus }}
 		href="/apps/add?nodraft=true"
 	>
-		<svelte:fragment slot="main"
-			>New App (alpha) <LayoutDashboard class="ml-1.5" size={18} />
-		</svelte:fragment>
+		<svelte:fragment slot="main">App <LayoutDashboard class="ml-1.5" size={18} /></svelte:fragment>
 		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
 			Import from raw JSON
 		</ButtonPopupItem>

package/components/flows/CreateActionsFlow.svelte

@@ -25,7 +25,7 @@ async function importJson() {
 		href="/flows/add?nodraft=true"
 	>
 		<svelte:fragment slot="main"
-			>New Flow <Icon data={faBarsStaggered} scale={0.8} class="ml-1.5" />
+			>Flow <Icon data={faBarsStaggered} scale={0.8} class="ml-1.5" />
 		</svelte:fragment>
 		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
 			Import from raw JSON

package/components/flows/content/CapturePayload.svelte

@@ -56,13 +56,13 @@ async function getCaptureInput() {
 				on:click={(e) => {
 					e.preventDefault()
 					copyToClipboard(
-						`${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/capture/${$flowStore.path}`
+						`${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/capture_u/${$flowStore.path}`
 					)
 				}}
 				href="{$page.url.protocol}//{$page.url
-					.hostname}/api/w/{$workspaceStore}/capture/{$flowStore.path}"
+					.hostname}/api/w/{$workspaceStore}/capture_u/{$flowStore.path}"
 				>{$page.url.protocol}//{$page.url
-					.hostname}/api/w/{$workspaceStore}/capture/{$flowStore.path}
+					.hostname}/api/w/{$workspaceStore}/capture_u/{$flowStore.path}
 				<Icon data={faClipboard} /></a
 			>
 		</div>
@@ -70,7 +70,7 @@ async function getCaptureInput() {
 
 		<div class="text-xs box mb-4 b">
 			<pre class="overflow-auto"
-				>{`curl -X POST ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/capture/${$flowStore.path} \\
+				>{`curl -X POST ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/capture_u/${$flowStore.path} \\
    -H 'Content-Type: application/json' \\
    -d '{"foo": 42}'`}</pre
 			>

package/components/flows/content/FlowSettings.svelte

@@ -35,7 +35,6 @@ let topHeight = 0;
 								type="text"
 								bind:value={$flowStore.summary}
 								placeholder="A short summary of the flow displayed when the flow is listed"
-								rows="1"
 								id="flow-summary"
 							/>
 						</label>

package/components/flows/utils.js

@@ -146,24 +146,26 @@ export function numberToChars(n) {
     sp = 0;
     while (sp < b.length) {
         if (b[sp] > 25) {
-            div = Math.floor(b[sp] / 26);
+            div = Math.floor(b[sp] / 27);
             b[sp + 1] = div - 1;
-            b[sp] %= 26;
+            b[sp] %= 27;
         }
         sp += 1;
     }
     out = '';
     for (i = 0; i < b.length; i += 1) {
-        out = String.fromCharCode(aCharCode + b[i]) + out;
+        let charCode = aCharCode + b[i];
+        out = (charCode == 26 ? '-' : String.fromCharCode(charCode)) + out;
     }
     return out;
 }
 export function charsToNumber(n) {
-    let b = Math.pow(26, n.length - 1);
+    let b = Math.pow(27, n.length - 1);
     let res = 0;
     for (let c of n) {
-        res += (c.charCodeAt(0) - aCharCode + 1) * b;
-        b = b / 26;
+        let charCode = c == '-' ? aCharCode + 26 : c.charCodeAt(0);
+        res += (charCode - aCharCode + 1) * b;
+        b = b / 27;
     }
     return res - 1;
 }