windmill-components 1.122.0 → 1.138.2

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

@@ -33,7 +33,12 @@ $: gridItem =
     $selectedComponentInEditor && !$selectedComponentInEditor.startsWith(BG_PREFIX)
         ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0])
         : undefined;
-$: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => BG_PREFIX + index === $selectedComponentInEditor);
+$: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => {
+    const [prefix, id] = $selectedComponentInEditor?.split('_') || [];
+    if (prefix !== 'bg')
+        return false;
+    return Number(id) === index;
+});
 $: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unused-${index}` === $selectedComponentInEditor);
 </script>
 
@@ -44,7 +49,7 @@ $: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unu
 		</Pane>
 		<Pane size={75}>
 			{#if !$selectedComponentInEditor}
-				<div class="text-sm text-gray-500 text-center py-8 px-2">
+				<div class="text-sm text-secondary text-center py-8 px-2">
 					Select a script on the left panel
 				</div>
 			{:else if gridItem}
@@ -68,12 +73,13 @@ $: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unu
 				{#key hiddenInlineScript}
 					{#if $app.hiddenInlineScripts?.[hiddenInlineScript]}
 						<InlineScriptHiddenRunnable
+							transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
 							id={BG_PREFIX + hiddenInlineScript}
 							bind:runnable={$app.hiddenInlineScripts[hiddenInlineScript]}
 						/>{/if}{/key}
 			{:else}
-				<div class="text-sm text-gray-500 text-center py-8 px-2">
+				<div class="text-sm text-tertiary text-center py-8 px-2">
 					No script found at id {$selectedComponentInEditor}
 				</div>
 			{/if}

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

@@ -65,7 +65,9 @@ function createBackgroundScript() {
 							<button
 								id={PREFIX + id}
 								class="panel-item
-				{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+				{$selectedComponentInEditor === id
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+									: 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
 								<span class="text-2xs truncate">{name}</span>
@@ -79,7 +81,7 @@ function createBackgroundScript() {
 										id={PREFIX + id + '_transformer'}
 										class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
 			{$selectedComponentInEditor === id + '_transformer'
-											? 'border-blue-500 bg-blue-100'
+											? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
 											: 'hover:bg-blue-50'}"
 										on:click={() => selectScript(id + '_transformer')}
 									>
@@ -94,7 +96,9 @@ function createBackgroundScript() {
 					<button
 						id={PREFIX + id}
 						class="panel-item
-						{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+						{$selectedComponentInEditor === id
+							? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+							: 'hover:bg-blue-50'}"
 						on:click={() => selectScript(id)}
 					>
 						<span class="text-2xs truncate">{name}</span>
@@ -106,7 +110,7 @@ function createBackgroundScript() {
 								id={PREFIX + id + '_transformer'}
 								class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
 {$selectedComponentInEditor === id + '_transformer'
-									? 'border-blue-500 bg-blue-100'
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
 									: 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id + '_transformer')}
 							>
@@ -123,7 +127,9 @@ function createBackgroundScript() {
 							<button
 								id={PREFIX + id}
 								class="panel-item
-								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								{$selectedComponentInEditor === id
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+									: 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
 								<span class="text-2xs truncate">{unusedInlineScript.name}</span>
@@ -133,14 +139,14 @@ function createBackgroundScript() {
 					</div>
 				{/if}
 				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0 && runnables.imported.length == 0}
-					<div class="text-xs text-gray-500">No scripts/flows</div>
+					<div class="text-xs text-tertiary">No scripts/flows</div>
 				{/if}
 			</div>
 		</div>
 
 		<div>
 			<div class="w-full flex justify-between items-center mb-1">
-				<div class="text-xs text-gray-600 font-semibold truncate">
+				<div class="text-xs text-tertiary font-semibold truncate">
 					Background runnables
 					<Tooltip
 						class="mb-0.5"
@@ -159,27 +165,43 @@ function createBackgroundScript() {
 					aria-label="Create a new background runnable"
 					on:click={createBackgroundScript}
 				>
-					<Plus size={14} class="text-gray-500" />
+					<Plus size={14} class="!text-primary" />
 				</Button>
 			</div>
 			<div class="flex flex-col gap-1 w-full">
 				{#if $app.hiddenInlineScripts?.length > 0}
-					{#each $app.hiddenInlineScripts as { name, hidden }, index (index)}
+					{#each $app.hiddenInlineScripts as { name, hidden, transformer }, index (index)}
 						{#if !hidden}
 							{@const id = BG_PREFIX + index}
 							<button
 								id={PREFIX + id}
 								class="panel-item
-								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								{$selectedComponentInEditor === id
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+									: 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
 								<span class="text-2xs truncate">{name}</span>
 								<Badge color="indigo">{id}</Badge>
 							</button>
+							{#if transformer}
+								<div class="w-full pl-4">
+									<button
+										id={PREFIX + id + '_transformer'}
+										class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
+		{$selectedComponentInEditor === id + '_transformer'
+											? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+											: 'hover:bg-blue-50'}"
+										on:click={() => selectScript(id + '_transformer')}
+									>
+										<span class="text-2xs truncate">Transformer</span>
+									</button>
+								</div>
+							{/if}
 						{/if}
 					{/each}
 				{:else}
-					<div class="text-xs text-gray-500">No background runnable</div>
+					<div class="text-xs text-tertiary">No background runnable</div>
 				{/if}
 			</div>
 		</div>

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

@@ -8,7 +8,7 @@ export let component;
 
 {#if component.horizontalAlignment || component.verticalAlignment}
 	<div class="flex flex-wrap gap-x-4 gap-y-1 w-full justify-end items-center">
-		<div class="text-gray-600 text-xs">Alignment</div>
+		<div class="text-tertiary text-xs">Alignment</div>
 		{#if component.horizontalAlignment}
 			<ToggleButtonGroup
 				noWFull

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

@@ -104,7 +104,7 @@ function handleItemsChange() {
 <div class="flex gap-2 flex-col mt-2 w-full">
 	{#key redraw}
 		{#if Array.isArray(items) && componentInput.value}
-			<div class="text-xs text-gray-600 font-semibold">{pluralize(items.length, 'item')}</div>
+			<div class="text-xs text-tertiary font-semibold">{pluralize(items.length, 'item')}</div>
 			<section
 				use:dndzone={{
 					items,

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

@@ -14,7 +14,7 @@ import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
 import AlignmentEditor from './AlignmentEditor.svelte';
 import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
 import TemplateEditor from '../../../TemplateEditor.svelte';
-import { ccomponents } from '../component';
+import { ccomponents, components } from '../component';
 import CssProperty from '../componentsPanel/CssProperty.svelte';
 import GridTab from './GridTab.svelte';
 import { clearErrorByComponentId, clearJobsByComponentId, deleteGridItem } from '../appUtils';
@@ -24,11 +24,10 @@ import { push } from '../../../../history';
 import Kbd from '../../../common/kbd/Kbd.svelte';
 import { secondaryMenu } from './secondaryMenu';
 import StylePanel from './StylePanel.svelte';
-import { Delete } from 'lucide-svelte';
+import { Delete, ExternalLink } from 'lucide-svelte';
 import GridCondition from './GridCondition.svelte';
 import { isTriggerable } from './script/utils';
 export let componentSettings = undefined;
-export let rowColumns = false;
 export let onDelete = undefined;
 export let noGrid = false;
 export let duplicateMoveAllowed = true;
@@ -70,7 +69,7 @@ function removeGridElement() {
 let viewCssOptions = false;
 $: extraLib =
     componentSettings?.item?.data?.componentInput?.type === 'template' && $worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, false, $state, false)
+        ? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, $state, false)
         : undefined;
 function keydown(event) {
     const { key, metaKey } = event;
@@ -95,6 +94,22 @@ const hasInteraction = componentSettings?.item.data.type
 
 {#if componentSettings?.item?.data}
 	{@const component = componentSettings.item.data}
+	<div class="flex justify-between items-center px-3 py-2 bg-surface-selected">
+		<div class="text-xs text-primary font-semibold"
+			>{components[componentSettings.item.data.type].name}</div
+		>
+		<a
+			href={components[componentSettings.item.data.type].documentationLink}
+			target="_blank"
+			class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
+		>
+			<div class="flex flex-row gap-2">
+				See documentation
+				<ExternalLink size="16" />
+			</div>
+		</a>
+	</div>
+
 	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
 			<PanelSection
@@ -174,7 +189,6 @@ const hasInteraction = componentSettings?.item.data.type
 										bind:inputSpecs={componentSettings.item.data.componentInput.fields}
 										userInputEnabled={component.type === 'formcomponent' ||
 											component.type === 'formbuttoncomponent'}
-										{rowColumns}
 									/>
 								</PanelSection>
 							</div>
@@ -186,7 +200,6 @@ const hasInteraction = componentSettings?.item.data.type
 		{#if Object.values(initialConfiguration).length > 0}
 			<PanelSection title={`Configuration (${Object.values(initialConfiguration).length})`}>
 				<InputsSpecsEditor
-					{rowColumns}
 					id={component.id}
 					inputSpecsConfiguration={initialConfiguration}
 					bind:inputSpecs={componentSettings.item.data.configuration}
@@ -194,7 +207,7 @@ const hasInteraction = componentSettings?.item.data.type
 				/>
 			</PanelSection>
 		{:else}
-			<div class="h-full w-full text-sm text-gray-500 text-center py-8 px-2"
+			<div class="h-full w-full text-sm text-tertiary text-center py-8 px-2"
 				>{ccomponents[component.type].name} has no configuration</div
 			>
 		{/if}
@@ -295,23 +308,23 @@ const hasInteraction = componentSettings?.item.data.type
 				</div>
 				<div class="flex flex-col gap-1">
 					<div>
-						<span class="text-gray-600 text-xs mr-2"> Copy:</span>
+						<span class="text-secondary text-xs mr-2"> Copy:</span>
 						<Kbd>{getModifierKey()}</Kbd>+<Kbd>C</Kbd>,
 						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
 					</div>
 					<div>
-						<span class="text-gray-600 text-xs mr-2">Move: </span>
+						<span class="text-secondary text-xs mr-2">Move: </span>
 						<Kbd>{getModifierKey()}</Kbd>+<Kbd>X</Kbd>,
 						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
 					</div>
 					<div>
-						<span class="text-gray-600 text-xs mr-2">Navigate:</span>
+						<span class="text-secondary text-xs mr-2">Navigate:</span>
 						<Kbd>&leftarrow;</Kbd>
 						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
 						<Kbd>ESC</Kbd>
 					</div>
 					<div>
-						<span class="text-gray-600 text-xs mr-2">Add to selection:</span>
+						<span class="text-secondary text-xs mr-2">Add to selection:</span>
 						<Kbd>&DoubleUpArrow;</Kbd>+<Kbd>click</Kbd>
 					</div>
 				</div>

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

@@ -6,7 +6,6 @@ declare const __propDef: {
             item: GridItem;
             parent: string | undefined;
         } | undefined;
-        rowColumns?: boolean | undefined;
         onDelete?: (() => void) | undefined;
         noGrid?: boolean | undefined;
         duplicateMoveAllowed?: boolean | undefined;

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

@@ -101,7 +101,7 @@ function addCondition() {
 		subgrid.
 	</Alert>
 	{#if items.length == 0}
-		<span class="text-xs text-gray-500">No Tabs</span>
+		<span class="text-xs text-tertiary">No Tabs</span>
 	{/if}
 	<div class="w-full flex flex-col mt-2">
 		<section
@@ -117,7 +117,7 @@ function addCondition() {
 				{#if index < items.length - 1}
 					{@const condition = item.value}
 					<div class="w-full flex flex-row gap-2 items-center relative">
-						<div class={twMerge('grow border p-3 my-2 rounded-md border-gray-200 bg-white')}>
+						<div class={twMerge('grow border p-3 my-2 rounded-md bg-surface')}>
 							<InputsSpecEditor
 								key={`Condition ${index + 1}`}
 								bind:componentInput={item.value}
@@ -125,7 +125,6 @@ function addCondition() {
 								userInputEnabled={false}
 								shouldCapitalize={true}
 								resourceOnly={false}
-								hasRows={false}
 								fieldType={condition?.['fieldType']}
 								subFieldType={condition?.['subFieldType']}
 								format={condition?.['format']}

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

@@ -38,7 +38,7 @@ function deleteSubgrid(index) {
 
 <PanelSection title={`panes ${panes.length > 0 ? `(${panes.length})` : ''}`}>
 	{#if panes.length == 0}
-		<span class="text-xs text-gray-500">No panes</span>
+		<span class="text-xs text-tertiary">No panes</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		{#each panes as value, index (index)}

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

@@ -122,7 +122,7 @@ function handleKeyDown(event) {
 
 <PanelSection title={`${word}s ${tabs.length > 0 ? `(${tabs.length})` : ''}`}>
 	{#if tabs.length == 0}
-		<span class="text-xs text-gray-500">No Tabs</span>
+		<span class="text-xs text-tertiary">No Tabs</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		<section
@@ -135,7 +135,7 @@ function handleKeyDown(event) {
 			on:finalize={handleFinalize}
 		>
 			{#each items as item, index (item.id)}
-				<div class="border rounded-md p-2 mb-2 bg-white">
+				<div class="border rounded-md p-2 mb-2 bg-surface">
 					<div class="w-full flex flex-row gap-2 items-center relative my-1">
 						<input
 							on:keydown|stopPropagation

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

@@ -38,7 +38,6 @@ let disablable = !(field.type === 'static' && field.value === false);
 			userInputEnabled={false}
 			shouldCapitalize={true}
 			resourceOnly={false}
-			hasRows={false}
 			fieldType={field?.['fieldType']}
 			subFieldType={field?.['subFieldType']}
 			format={field?.['format']}

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

@@ -13,7 +13,6 @@ import { fieldTypeToTsType } from '../../utils';
 export let id;
 export let componentInput;
 export let key;
-export let hasRows = false;
 export let userInputEnabled = false;
 export let shouldCapitalize = true;
 export let resourceOnly = false;
@@ -53,7 +52,7 @@ $: if (componentInput == undefined) {
 	>
 		<div class="flex justify-between items-end">
 			<div class="flex flex-row gap-4 items-center">
-				<span class="text-xs font-semibold truncate text-gray-800">
+				<span class="text-xs font-semibold truncate text-primary">
 					{customTitle
 						? customTitle
 						: shouldCapitalize
@@ -66,7 +65,7 @@ $: if (componentInput == undefined) {
 					{/if}
 				</span>
 				{#if displayType}
-					<div class="text-xs text-gray-500">
+					<div class="text-xs text-tertiary">
 						{fieldType === 'array' && subFieldType
 							? `${fieldTypeToTsType(subFieldType)}[]`
 							: fieldTypeToTsType(fieldType)}
@@ -131,11 +130,11 @@ $: if (componentInput == undefined) {
 				/>
 			</div>
 		{:else if componentInput?.type === 'eval'}
-			<EvalInputEditor {hasRows} {id} bind:componentInput />
+			<EvalInputEditor {id} bind:componentInput />
 		{:else if componentInput?.type === 'upload'}
 			<UploadInputEditor bind:componentInput {fileUpload} />
 		{:else if componentInput?.type === 'user'}
-			<span class="text-2xs italic text-gray-600">Field's value is set by the user</span>
+			<span class="text-2xs italic text-tertiary">Field's value is set by the user</span>
 		{/if}
 	</div>
 {/if}

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

@@ -6,7 +6,6 @@ declare const __propDef: {
         id: string;
         componentInput: RichConfiguration;
         key: string;
-        hasRows?: boolean | undefined;
         userInputEnabled?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
         resourceOnly?: boolean | undefined;

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

@@ -5,7 +5,6 @@ export let inputSpecs;
 export let inputSpecsConfiguration = undefined;
 export let userInputEnabled = false;
 export let shouldCapitalize = true;
-export let rowColumns = false;
 export let resourceOnly = false;
 export let displayType = false;
 $: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs;
@@ -21,7 +20,6 @@ $: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs;
 					{id}
 					{shouldCapitalize}
 					{resourceOnly}
-					{rowColumns}
 					inputSpecsConfiguration={finalInputSpecsConfiguration?.[k]?.['configuration']}
 					labels={finalInputSpecsConfiguration?.[k]?.['labels']}
 					tooltip={finalInputSpecsConfiguration?.[k]?.['tooltip']}
@@ -35,7 +33,6 @@ $: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs;
 					{userInputEnabled}
 					{shouldCapitalize}
 					{resourceOnly}
-					hasRows={rowColumns}
 					fieldType={meta?.['fieldType']}
 					subFieldType={meta?.['subFieldType']}
 					format={meta?.['format']}
@@ -52,5 +49,5 @@ $: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs;
 		{/each}
 	</div>
 {:else}
-	<div class="text-gray-500 text-sm">No inputs</div>
+	<div class="text-tertiary text-sm">No inputs</div>
 {/if}

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         inputSpecsConfiguration?: RichConfigurations | undefined;
         userInputEnabled?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
-        rowColumns?: boolean | undefined;
         resourceOnly?: boolean | undefined;
         displayType?: boolean | undefined;
     };

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

@@ -8,7 +8,6 @@ export let labels;
 export let shouldCapitalize;
 export let id;
 export let resourceOnly;
-export let rowColumns;
 export let tooltip;
 $: {
     if (oneOf == undefined) {
@@ -58,7 +57,6 @@ $: {
 					userInputEnabled={false}
 					{shouldCapitalize}
 					{resourceOnly}
-					hasRows={rowColumns}
 					fieldType={config?.['fieldType']}
 					subFieldType={config?.['subFieldType']}
 					format={config?.['format']}

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

@@ -12,7 +12,6 @@ declare const __propDef: {
         shouldCapitalize: boolean;
         id: string;
         resourceOnly: boolean;
-        rowColumns: boolean;
         tooltip: string | undefined;
     };
     events: {

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

@@ -16,18 +16,18 @@ function onChange(checked, id) {
 </script>
 
 <PanelSection
-	title="Trigger Runnable"
+	title="Trigger runnables on success"
 	tooltip="Select components to recompute after running this runnable as a success"
 	documentationLink="https://www.windmill.dev/docs/apps/app-runnable-panel#recompute-others"
 >
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
-		<table class="divide-y divide-gray-300 border w-full">
-			<thead class="bg-gray-50">
+		<table class="divide-y border w-full">
+			<thead class="bg-surface-secondary">
 				<tr>
-					<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500">
+					<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-tertiary">
 						Component
 					</th>
-					<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500">
+					<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-tertiary">
 						Recompute
 					</th>
 				</tr>

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

@@ -7,7 +7,6 @@ import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { appComponentFromType, clearErrorByComponentId, clearJobsByComponentId } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
-import TableActionLabel from './TableActionLabel.svelte';
 import { Inspect, List, ToggleRightIcon } from 'lucide-svelte';
 export let components;
 export let id;
@@ -32,13 +31,13 @@ function deleteComponent(cid) {
 
 <PanelSection title={`Table actions`}>
 	{#if components.length == 0}
-		<span class="text-xs text-gray-500">No action buttons</span>
+		<span class="text-xs text-tertiary">No action buttons</span>
 	{/if}
 	{#each components as component}
 		<div
 			class={classNames(
 				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
-				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
+				'bg-surface border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-secondary',
 				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
 			on:click={() => {
@@ -51,7 +50,13 @@ function deleteComponent(cid) {
 			</Badge>
 
 			<div>
-				<TableActionLabel componentInput={component.configuration.label} />
+				{#if component.type == 'buttoncomponent'}
+					Button
+				{:else if component.type == 'selectcomponent'}
+					Select
+				{:else if component.type == 'checkboxcomponent'}
+					Toggle
+				{/if}
 			</div>
 			<div>
 				<Button variant="border" color="red" on:click={() => deleteComponent(component.id)}>
@@ -62,7 +67,7 @@ function deleteComponent(cid) {
 	{/each}
 	<div class="w-full flex gap-2">
 		<Button
-			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			btnClasses="gap-1 flex items-center text-sm text-tertiary"
 			wrapperClasses="w-full"
 			color="light"
 			variant="border"
@@ -72,7 +77,7 @@ function deleteComponent(cid) {
 			+ <Inspect size={14} />
 		</Button>
 		<Button
-			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			btnClasses="gap-1 flex items-center text-sm text-tertiary"
 			wrapperClasses="w-full"
 			color="light"
 			variant="border"
@@ -82,7 +87,7 @@ function deleteComponent(cid) {
 			+ <ToggleRightIcon size={14} />
 		</Button>
 		<Button
-			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			btnClasses="gap-1 flex items-center text-sm text-tertiary"
 			wrapperClasses="w-full"
 			color="light"
 			variant="border"

package/package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -15,7 +15,7 @@ export let documentationLink = undefined;
 	)}
 >
 	<div class="flex justify-between flex-wrap items-center w-full gap-1">
-		<div class="text-sm inline-flex items-center font-semibold text-gray-800 {titlePadding} gap-1">
+		<div class="text-sm inline-flex items-center font-semibold text-primary {titlePadding} gap-1">
 			<span class="truncate">
 				{title}
 			</span>

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

@@ -3,16 +3,15 @@ import SimpleEditor from '../../../../SimpleEditor.svelte';
 import { buildExtraLib } from '../../../utils';
 export let componentInput;
 export let id;
-export let hasRows = false;
 const { onchange, worldStore, state } = getContext('AppViewerContext');
 $: extraLib =
     componentInput?.expr && $worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows, $state, false)
+        ? buildExtraLib($worldStore?.outputsById ?? {}, id, $state, false)
         : undefined;
 </script>
 
 {#if componentInput?.type === 'eval'}
-	<div class="border border-gray-300">
+	<div class="border">
 		<SimpleEditor
 			lang="javascript"
 			bind:code={componentInput.expr}

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

@@ -4,7 +4,6 @@ declare const __propDef: {
     props: {
         componentInput: EvalAppInput | undefined;
         id: string;
-        hasRows?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;