windmill-components 1.309.7 → 1.339.2

package/package/components/ArgInput.svelte

@@ -1,4 +1,4 @@
-<script>import { setInputCat as computeInputCat, emptyString } from '../utils';
+<script>import { setInputCat as computeInputCat, emptyString, shouldDisplayPlaceholder } from '../utils';
 import { ChevronDown, DollarSign, Pipette, Plus, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Multiselect from 'svelte-multiselect';
@@ -9,7 +9,6 @@ import FieldHeader from './FieldHeader.svelte';
 import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
-import Password from './Password.svelte';
 import Range from './Range.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import SchemaForm from './SchemaForm.svelte';
@@ -20,10 +19,15 @@ import { twMerge } from 'tailwind-merge';
 import ArgEnum from './ArgEnum.svelte';
 import ArrayTypeNarrowing from './ArrayTypeNarrowing.svelte';
 import DateTimeInput from './DateTimeInput.svelte';
+import DateInput from './DateInput.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
 import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte';
 import FileUpload from './common/fileUpload/FileUpload.svelte';
 import autosize from '../autosize';
+import PasswordArgInput from './PasswordArgInput.svelte';
+import Password from './Password.svelte';
+import Label from './Label.svelte';
+import Tooltip from './Tooltip.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -56,6 +60,10 @@ export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let simpleTooltip = undefined;
 export let customErrorMessage = undefined;
+export let onlyMaskPassword = false;
+export let nullable = false;
+export let title = undefined;
+export let placeholder = undefined;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 let ignoreValueUndefined = false;
@@ -68,12 +76,12 @@ export let editor = undefined;
 let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 let rawValue = undefined;
-function computeDefaultValue(nvalue, inputCat, defaultValue) {
+function computeDefaultValue(nvalue, inputCat, defaultValue, nnullable) {
     if ((value == undefined || value == null) && !ignoreValueUndefined) {
         value = defaultValue;
         if (defaultValue === undefined || defaultValue === null) {
             if (inputCat === 'string') {
-                value = '';
+                value = nullable ? null : '';
             }
             else if (inputCat == 'enum' && required) {
                 value = enum_?.[0];
@@ -89,9 +97,12 @@ function computeDefaultValue(nvalue, inputCat, defaultValue) {
             evalValueToRaw();
         }
     }
+    if (nnullable && type === 'string' && value === '') {
+        value = null;
+    }
 }
 computeDefaultValue();
-$: computeDefaultValue(value, inputCat, defaultValue);
+$: computeDefaultValue(value, inputCat, defaultValue, nullable);
 $: defaultValue != undefined && handleDefaultValueChange();
 let oldDefaultValue = defaultValue;
 function handleDefaultValueChange() {
@@ -128,7 +139,11 @@ export function focus() {
     }
 }
 function validateInput(pattern, v, required) {
-    if (required && (v == undefined || v == null || v === '')) {
+    if (nullable && emptyString(v)) {
+        error = '';
+        valid && (valid = true);
+    }
+    else if (required && (v == undefined || v == null || v === '')) {
         error = 'Required';
         valid && (valid = false);
     }
@@ -183,14 +198,13 @@ function changePosition(i, up) {
 	}}
 	readOnlyMode={false}
 />
-
 <!-- svelte-ignore a11y-autofocus -->
 <div class="flex flex-col w-full {minW ? 'min-w-[250px]' : ''}">
 	<div>
 		{#if displayHeader}
 			<FieldHeader
 				prettify={prettifyHeader}
-				{label}
+				label={title && !emptyString(title) ? title : label}
 				{disabled}
 				{required}
 				{type}
@@ -198,6 +212,7 @@ function changePosition(i, up) {
 				{format}
 				{simpleTooltip}
 			/>
+
 			{#if editableSchema}
 				<span class="mx-8" />
 				{#if editableSchema.i > 0}
@@ -217,7 +232,7 @@ function changePosition(i, up) {
 			{/if}
 		{/if}
 		{#if editableSchema}
-			<label class="text-secondary">
+			<Label label="Description">
 				<textarea
 					class="mb-1"
 					use:autosize
@@ -226,7 +241,15 @@ function changePosition(i, up) {
 					on:keydown={onKeyDown}
 					placeholder="Field description"
 				/>
-			</label>
+			</Label>
+			<div class="flex flex-row gap-2 w-full">
+				<Label label="Custom Title" class="w-full">
+					<svelte:fragment slot="header">
+						<Tooltip light>Will be displayed in the UI instead of the field name.</Tooltip>
+					</svelte:fragment>
+					<input class="mb-1" bind:value={title} on:keydown={onKeyDown} placeholder="Field title" />
+				</Label>
+			</div>
 
 			{#if type == 'array'}
 				<ArrayTypeNarrowing bind:itemsType />
@@ -257,9 +280,11 @@ function changePosition(i, up) {
 									bind:pattern
 									bind:enum_
 									bind:contentEncoding
+									bind:password={extra['password']}
 									bind:minRows={extra['minRows']}
 									bind:disableCreate={extra['disableCreate']}
 									bind:disableVariablePicker={extra['disableVariablePicker']}
+									bind:dateFormat={extra['dateFormat']}
 								/>
 							{:else if type == 'number' || type == 'integer'}
 								<NumberTypeNarrowing
@@ -272,6 +297,24 @@ function changePosition(i, up) {
 								<ObjectTypeNarrowing bind:format />
 							{/if}
 						</div>
+						{#if shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern)}
+							<Label label="Placeholder" class="pt-2">
+								<textarea placeholder="Enter a placeholder" rows="1" bind:value={placeholder} />
+							</Label>
+						{/if}
+						{#if !required && type === 'string'}
+							<div class="mt-2 border-t pt-4">
+								<Toggle
+									options={{
+										right: 'Nullable',
+										rightTooltip:
+											'If enabled, the default value will be null and not an empty string.'
+									}}
+									size="xs"
+									bind:checked={extra.nullable}
+								/>
+							</div>
+						{/if}
 					{/if}
 				</div>
 			{/if}
@@ -279,9 +322,10 @@ function changePosition(i, up) {
 		{/if}
 		{#if description}
 			<div class="text-xs italic pb-1 text-secondary">
-				<pre class="font-main">{description}</pre>
+				<pre class="font-main whitespace-normal">{description}</pre>
 			</div>
 		{/if}
+
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
 				{#if extra['min'] != undefined && extra['max'] != undefined}
@@ -322,7 +366,7 @@ function changePosition(i, up) {
 							class={valid
 								? ''
 								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
-							placeholder={defaultValue ?? ''}
+							placeholder={placeholder ?? defaultValue ?? ''}
 							bind:value
 							min={extra['min']}
 							max={extra['max']}
@@ -520,6 +564,7 @@ function changePosition(i, up) {
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
 						<SchemaForm
+							{onlyMaskPassword}
 							{disablePortal}
 							{disabled}
 							schema={{ properties, $schema: '', required: nestedRequired ?? [], type: 'object' }}
@@ -568,7 +613,11 @@ function changePosition(i, up) {
 					/>
 				</div>
 			{:else if inputCat == 'date'}
-				<DateTimeInput useDropdown {autofocus} bind:value />
+				{#if format === 'date'}
+					<DateInput {autofocus} bind:value dateFormat={extra?.['dateFormat']} />
+				{:else}
+					<DateTimeInput useDropdown {autofocus} bind:value />
+				{/if}
 			{:else if inputCat == 'sql' || inputCat == 'yaml'}
 				<div class="border my-1 mb-4 w-full border-primary">
 					<SimpleEditor
@@ -616,14 +665,22 @@ function changePosition(i, up) {
 					class={valid
 						? ''
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
-					placeholder={defaultValue ?? ''}
+					placeholder={placeholder ?? defaultValue ?? ''}
 					bind:value
 				/>
 			{:else if inputCat == 'string'}
 				<div class="flex flex-col w-full">
 					<div class="flex flex-row w-full items-center justify-between relative">
 						{#if password || extra?.['password'] == true}
-							<Password {disabled} bind:password={value} />
+							{#if onlyMaskPassword}
+								<Password
+									{disabled}
+									bind:password={value}
+									placeholder={placeholder ?? defaultValue ?? ''}
+								/>
+							{:else}
+								<PasswordArgInput {disabled} bind:value />
+							{/if}
 						{:else}
 							{#key extra?.['minRows']}
 								<textarea
@@ -645,7 +702,7 @@ function changePosition(i, up) {
 											? ''
 											: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
 									)}
-									placeholder={defaultValue ?? ''}
+									placeholder={placeholder ?? defaultValue ?? ''}
 									bind:value
 								/>
 							{/key}

package/package/components/ArgInput.svelte.d.ts

@@ -47,6 +47,10 @@ declare const __propDef: {
         showSchemaExplorer?: boolean | undefined;
         simpleTooltip?: string | undefined;
         customErrorMessage?: string | undefined;
+        onlyMaskPassword?: boolean | undefined;
+        nullable?: boolean | undefined;
+        title?: string | undefined;
+        placeholder?: string | undefined;
         editor?: SimpleEditor | undefined;
         focus?: (() => void) | undefined;
     };

package/package/components/ConcurrentJobsChart.svelte

@@ -0,0 +1,212 @@
+<script>import { Line } from 'svelte-chartjs';
+import 'chartjs-adapter-date-fns';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { Chart as ChartJS, CategoryScale, Legend, LineElement, LinearScale, PointElement, TimeScale, Title, Tooltip } from 'chart.js';
+import { createEventDispatcher } from 'svelte';
+import { getDbClockNow } from '../forLater';
+export let extendedJobs = undefined;
+export let maxIsNow = false;
+export let minTimeSet = undefined;
+export let maxTimeSet = undefined;
+const dispatch = createEventDispatcher();
+function calculateTimeSeries(extendedJobs) {
+    const timeline = new Map();
+    extendedJobs.jobs.forEach((j) => {
+        if (j.started_at != undefined) {
+            const startTime = new Date(j.started_at).getTime();
+            if (!timeline.has(startTime)) {
+                timeline.set(startTime, { count: 0, id_started: [], id_ended: [] });
+            }
+            const s = timeline.get(startTime);
+            s.count += 1;
+            s.id_started.push(j.id);
+            if (j.type === 'CompletedJob') {
+                const jc = j;
+                const endTime = startTime + jc.duration_ms;
+                if (!timeline.has(endTime)) {
+                    timeline.set(endTime, { count: 0, id_started: [], id_ended: [] });
+                }
+                const e = timeline.get(endTime);
+                e.count -= 1;
+                e.id_ended.push(j.id);
+            }
+        }
+    });
+    extendedJobs.obscured_jobs.forEach((j) => {
+        if (j.started_at != undefined) {
+            const startTime = new Date(j.started_at).getTime();
+            if (!timeline.has(startTime)) {
+                timeline.set(startTime, { count: 0, id_started: [], id_ended: [] });
+            }
+            const s = timeline.get(startTime);
+            s.count += 1;
+            s.id_started.push('unknoww');
+            if (j.duration_ms != undefined) {
+                const jc = j;
+                const endTime = startTime + jc.duration_ms;
+                if (!timeline.has(endTime)) {
+                    timeline.set(endTime, { count: 0, id_started: [], id_ended: [] });
+                }
+                const e = timeline.get(endTime);
+                e.count -= 1;
+                e.id_ended.push('unknown');
+            }
+        }
+    });
+    let count = 0;
+    const result = [];
+    for (const [time, change] of [...timeline.entries()].sort(([time1], [time2]) => time1 - time2)) {
+        count += change.count;
+        let msg = '';
+        msg += change.id_started.length != 0 ? `${change.id_started.join(',')} started` : '';
+        msg += change.id_started.length != 0 && change.id_ended.length != 0 ? '\n' : '';
+        msg += change.id_ended.length != 0 ? `${change.id_ended.join(',')} ended` : '';
+        result.push({ time: new Date(time), count, msg });
+    }
+    // Add points to continue the line towards the extremities
+    if (result.length > 0) {
+        let start_time = addSeconds(new Date(result[0].time), -1);
+        let start_count = 0;
+        let end_count = result[result.length - 1].count;
+        result.unshift({
+            time: start_time,
+            count: start_count
+        });
+        result.push({
+            time: new Date(),
+            count: end_count
+        });
+    }
+    return result;
+}
+let intervals = undefined;
+$: intervals = extendedJobs ? calculateTimeSeries(extendedJobs) : undefined;
+ChartJS.register(Title, Tooltip, Legend, zoomPlugin, LineElement, CategoryScale, LinearScale, PointElement, TimeScale);
+$: data = {
+    datasets: [
+        {
+            borderColor: '#4ade80',
+            backgroundColor: '#f8717100',
+            pointRadius: 0,
+            label: 'running',
+            showLine: true,
+            stepped: true,
+            data: intervals?.map((job) => ({
+                x: job.time,
+                y: job.count,
+                id: job.msg
+            })) ?? []
+        }
+    ]
+};
+const zoomOptions = {
+    pan: {
+        enabled: true,
+        modifierKey: 'ctrl',
+        onPanComplete: ({ chart }) => {
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
+        }
+    },
+    zoom: {
+        drag: {
+            enabled: true
+        },
+        mode: 'x',
+        onZoom: ({ chart }) => {
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
+        }
+    }
+};
+let minTime = addSeconds(new Date(), -300);
+let maxTime = getDbClockNow();
+$: computeMinMaxTime(intervals, minTimeSet, maxTimeSet);
+function minJobTime(intervals) {
+    return intervals[0].time;
+}
+function maxJobTime(intervals) {
+    return intervals[intervals?.length - 1].time;
+}
+function computeMinMaxTime(intervals, minTimeSet, maxTimeSet) {
+    let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined;
+    let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined;
+    if (minTimeSetDate && maxTimeSetDate) {
+        minTime = minTimeSetDate;
+        maxTime = maxTimeSetDate;
+        return;
+    }
+    if (intervals == undefined || intervals?.length == 0) {
+        minTime = minTimeSetDate ?? addSeconds(new Date(), -300);
+        maxTime = maxTimeSetDate ?? getDbClockNow();
+        return;
+    }
+    const maxJob = maxIsNow ? getDbClockNow() : maxJobTime(intervals);
+    const minJob = minJobTime(intervals);
+    const diff = (maxJob.getTime() - minJob.getTime()) / 20000;
+    minTime = minTimeSetDate ?? addSeconds(minJob, -diff);
+    if (maxIsNow) {
+        maxTime = maxTimeSetDate ?? maxJob;
+    }
+    else {
+        maxTime = maxTimeSetDate ?? addSeconds(maxJob, diff);
+    }
+}
+function addSeconds(date, seconds) {
+    date.setTime(date.getTime() + seconds * 1000);
+    return date;
+}
+$: options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        zoom: zoomOptions,
+        legend: {
+            display: false
+        },
+        tooltip: {
+            callbacks: {
+                footer: function (context) {
+                    return context[context.length - 1].raw.id;
+                }
+            }
+        }
+    },
+    scales: {
+        x: {
+            type: 'time',
+            grid: {
+                display: false
+            },
+            min: minTime,
+            max: maxTime
+        },
+        y: {
+            grid: {
+                display: false
+            },
+            title: {
+                display: true,
+                text: 'concurrent jobs'
+            },
+            beginAtZero: true,
+            ticks: {
+                stepSize: 1
+            }
+        }
+    },
+    animation: false,
+    interaction: {
+        intersect: false,
+        mode: 'index'
+    }
+};
+</script>
+
+<div class="relative max-h-40">
+	<Line {data} {options} />
+</div>

package/package/components/ConcurrentJobsChart.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import 'chartjs-adapter-date-fns';
+import type { ExtendedJobs } from '../gen';
+declare const __propDef: {
+    props: {
+        extendedJobs?: ExtendedJobs | undefined;
+        maxIsNow?: boolean | undefined;
+        minTimeSet?: string | undefined;
+        maxTimeSet?: string | undefined;
+    };
+    events: {
+        zoom: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConcurrentJobsChartProps = typeof __propDef.props;
+export type ConcurrentJobsChartEvents = typeof __propDef.events;
+export type ConcurrentJobsChartSlots = typeof __propDef.slots;
+export default class ConcurrentJobsChart extends SvelteComponent<ConcurrentJobsChartProps, ConcurrentJobsChartEvents, ConcurrentJobsChartSlots> {
+}
+export {};

package/package/components/CustomOauth.svelte

@@ -64,8 +64,8 @@ $: if (!connect_config) {
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm"
 		>Payload <Tooltip
-			>Auth is passed in query most commonly. LinkedIn is an example of OAuth using
-			x-www-form-urlencoded
+			>Auth (client id/client secret) is passed as basic auth most commonly but can be passed in the
+			body x-www-form-urlencoded. Some LinkedIn is an example of OAuth using x-www-form-urlencoded
 		</Tooltip></span
 	>
 	<div>

package/package/components/DateInput.svelte

@@ -0,0 +1,47 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { format, isValid } from 'date-fns';
+export let value = undefined;
+export let autofocus = false;
+export let minDate = undefined;
+export let maxDate = undefined;
+export let dateFormat = 'dd-MM-yyyy';
+let date = undefined;
+const dispatch = createEventDispatcher();
+function updateValue(newDate) {
+    if (newDate && isValid(new Date(newDate))) {
+        if (dateFormat === undefined) {
+            dateFormat = 'dd-MM-yyyy';
+        }
+        try {
+            let dateFromValue = newDate ? new Date(newDate) : undefined;
+            if (dateFromValue === undefined) {
+                return;
+            }
+            const parsedDate = format(dateFromValue, dateFormat);
+            value = parsedDate;
+            dispatch('change', value);
+        }
+        catch (error) {
+            console.error('Failed to parse date:', error);
+            return;
+        }
+    }
+}
+let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
+</script>
+
+<div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
+	<input
+		type="date"
+		bind:value={date}
+		{autofocus}
+		class="!w-full app-editor-input"
+		min={minDate}
+		max={maxDate}
+		on:change={() => {
+			if (date) {
+				updateValue(date)
+			}
+		}}
+	/>
+</div>

package/package/components/DateInput.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        autofocus?: boolean | null | undefined;
+        minDate?: string | undefined;
+        maxDate?: string | undefined;
+        dateFormat?: string | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+        focus: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateInputProps = typeof __propDef.props;
+export type DateInputEvents = typeof __propDef.events;
+export type DateInputSlots = typeof __propDef.slots;
+export default class DateInput extends SvelteComponent<DateInputProps, DateInputEvents, DateInputSlots> {
+}
+export {};

package/package/components/DateTimeInput.svelte

@@ -1,5 +1,8 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { Button } from './common';
+import { Clock } from 'lucide-svelte';
+// import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+// import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 export let value = undefined;
 export let autofocus = false;
 export let useDropdown = false;
@@ -7,6 +10,7 @@ export let minDate = undefined;
 export let maxDate = undefined;
 let date = undefined;
 let time = undefined;
+// let format: 'local' | 'utc' = 'local'
 function parseValue(value = undefined) {
     let dateFromValue = value ? new Date(value) : undefined;
     date = isValidDate(dateFromValue)
@@ -49,11 +53,21 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 
 <div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
 	<!-- svelte-ignore a11y-autofocus -->
-	<input type="date" bind:value={date} {autofocus} class="!w-3/4" min={minDate} max={maxDate} />
-	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px]" />
+	<input
+		type="date"
+		bind:value={date}
+		{autofocus}
+		class="!w-3/4 app-editor-input"
+		min={minDate}
+		max={maxDate}
+	/>
+	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px] app-editor-input" />
 	<Button
 		variant="border"
 		color="light"
+		startIcon={{
+			icon: Clock
+		}}
 		size="xs"
 		portalTarget={`#${randomId}`}
 		dropdownItems={useDropdown
@@ -86,6 +100,14 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 			: undefined}
 		on:click={() => {
 			setTimeLater(0)
-		}}>Now</Button
+		}}
 	>
+		Now
+	</Button>
+	<!-- <div>
+		<ToggleButtonGroup bind:selected={format}>
+			<ToggleButton light small value={'local'} label="local" />
+			<ToggleButton light small value={'utc'} label="utc" />
+		</ToggleButtonGroup>
+	</div> -->
 </div>

package/package/components/DefaultScripts.svelte

@@ -4,18 +4,15 @@ import { Button } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import DefaultScriptsInner from './DefaultScriptsInner.svelte';
-import Portal from 'svelte-portal';
 let drawer;
 </script>
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
-	<Portal>
-		<Drawer bind:this={drawer} placement="left">
-			<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
-				<DefaultScriptsInner />
-			</DrawerContent>
-		</Drawer>
-	</Portal>
+	<Drawer bind:this={drawer} placement="left">
+		<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
+			<DefaultScriptsInner />
+		</DrawerContent>
+	</Drawer>
 	<Button
 		on:click={drawer?.openDrawer}
 		startIcon={{ icon: SettingsIcon }}

package/package/components/DefaultTags.svelte

@@ -2,6 +2,7 @@
 import { Pen } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import DefaultTagsInner from './DefaultTagsInner.svelte';
+export let defaultTagPerWorkspace = undefined;
 let placement = 'bottom-end';
 </script>
 
@@ -19,5 +20,5 @@ let placement = 'bottom-end';
 			>
 		</Button>
 	</svelte:fragment>
-	<DefaultTagsInner />
-</Popup> 
+	<DefaultTagsInner bind:defaultTagPerWorkspace />
+</Popup>

package/package/components/DefaultTags.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        defaultTagPerWorkspace?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };