windmill-components 1.623.1 → 1.642.0

package/package/components/common/badge/CountBadge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-let { count, small = true, alwaysVisible = false } = $props();
+let { count, small = true, alwaysVisible = false, class: classNames = '' } = $props();
 </script>
 
 {#if count === undefined || count > 0 || alwaysVisible}
@@ -17,7 +17,8 @@ let { count, small = true, alwaysVisible = false } = $props();
 
 			// Special case for always visible
 			alwaysVisible && small ? 'h-3 w-3 text-[8px] -right-0.5 -top-0.5' : '',
-			alwaysVisible && !small ? 'h-4 w-4 text-xs -right-1 -top-1' : ''
+			alwaysVisible && !small ? 'h-4 w-4 text-xs -right-1 -top-1' : '',
+			classNames
 		)}
 	>
 		{#if count === undefined}
@@ -26,4 +27,4 @@ let { count, small = true, alwaysVisible = false } = $props();
 			<p>{count}</p>
 		{/if}
 	</div>
-{/if}
+{/if}

package/package/components/common/badge/CountBadge.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     count: number | undefined;
     small?: boolean;
     alwaysVisible?: boolean;
+    class?: string;
 }
 declare const CountBadge: import("svelte").Component<Props, {}, "">;
 type CountBadge = ReturnType<typeof CountBadge>;

package/package/components/common/breadcrumb/Breadcrumb.svelte

@@ -1,24 +1,20 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
-import Button from '../button/Button.svelte';
-export let items;
-export let selectedIndex;
-export let disabled = false;
-const dispatch = createEventDispatcher();
+<script lang="ts">import Button from '../button/Button.svelte';
+let { items, selectedIndex, numbered = false, separator, onselect } = $props();
 </script>
 
 <div class="flex items-center justify-center">
 	{#each items as item, index}
-		{#if index > 0}
-			<slot name="separator" />
+		{#if index > 0 && separator}
+			{@render separator()}
 		{/if}
 		<Button
-			size="sm"
-			color="light"
-			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-primary'}
-			on:click={() => dispatch('select', { index })}
-			disabled={selectedIndex - 1 === index ? disabled : false}
+			unifiedSize="sm"
+			variant="subtle"
+			selected={selectedIndex - 1 === index}
+			onClick={() => onselect?.(index)}
+			disabled={index > selectedIndex - 1}
 		>
-			{item}
+			{numbered ? `${index + 1}. ` : ''}{item}
 		</Button>
 	{/each}
 </div>

package/package/components/common/breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,26 +1,11 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
     items: string[];
     selectedIndex: number;
-    disabled?: boolean;
-}, {
-    select: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    separator: {};
-}, {}, string>;
-type Breadcrumb = InstanceType<typeof Breadcrumb>;
+    numbered?: boolean;
+    separator?: Snippet;
+    onselect?: (index: number) => void;
+};
+declare const Breadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
 export default Breadcrumb;

package/package/components/common/button/Button.svelte

@@ -10,7 +10,7 @@ import { createTooltip } from '@melt-ui/svelte';
 import { conditionalMelt } from '../../../utils';
 import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
-let { id = '', aiId = undefined, aiDescription = undefined, size = 'md', spacingSize = size, unifiedSize = undefined, extendedSize = undefined, color = 'blue', variant = 'default', btnClasses = '', wrapperClasses = '', wrapperStyle = '', disabled = false, selected = false, href = undefined, target = undefined, iconOnly = false, loadUntilNav = false, clickableWhileLoading = false, element = $bindable(undefined), nonCaptureEvent = false, propagateEvent = false, loading = $bindable(false), title = undefined, style = '', download = undefined, startIcon = undefined, endIcon = undefined, destructive = false, shortCut = undefined, tooltipPopover = undefined, dropdownBtnClasses = '', dropdownItems = undefined, hideDropdown = false, children, tooltip, onClick, dropdownOpen = $bindable(false), dropdownWidth = undefined, ...rest } = $props();
+let { id, aiId = undefined, aiDescription = undefined, size = 'md', spacingSize = size, unifiedSize = undefined, extendedSize = undefined, color = 'blue', variant = 'default', btnClasses = '', wrapperClasses = '', wrapperStyle = '', disabled = false, selected = false, href = undefined, target = undefined, iconOnly = false, loadUntilNav = false, clickableWhileLoading = false, element = $bindable(undefined), nonCaptureEvent = false, propagateEvent = false, loading = $bindable(false), title = undefined, style = '', download = undefined, startIcon = undefined, endIcon = undefined, destructive = false, shortCut = undefined, tooltipPopover = undefined, dropdownBtnClasses = '', dropdownItems = undefined, hideDropdown = false, children, tooltip, onClick, dropdownOpen = $bindable(false), dropdownWidth = undefined, ...rest } = $props();
 function computeDropdowns(menuItems) {
     const items = typeof menuItems === 'function' ? menuItems() : menuItems;
     return items.map((item) => ({

package/package/components/common/button/model.js

@@ -136,7 +136,7 @@ export var ButtonType;
     };
     // New unified sizing system
     ButtonType.UnifiedSizingClasses = {
-        xs: 'px-1',
+        xs: 'px-2',
         sm: 'px-2', // Regular horizontal padding
         md: 'px-4',
         lg: 'px-6'

package/package/components/common/calendarPicker/CalendarPicker.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const CalendarPicker: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;
-    date: string | undefined;
+    date: string | null | undefined;
     label: string;
     useDropdown?: boolean | undefined;
     clearable?: boolean | undefined;

package/package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -4,7 +4,7 @@ import { fade } from 'svelte/transition';
 import Button from '../button/Button.svelte';
 import { AlertTriangle, CornerDownLeft, Loader2, RefreshCcw } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-const { title, confirmationText, keyListen = true, loading = false, open = false, type: _type, showIcon = true, children, onConfirmed, onCanceled } = $props();
+const { title, confirmationText, keyListen = true, loading = false, open = false, type: _type, showIcon = true, id, children, onConfirmed, onCanceled } = $props();
 const type = $derived(_type ?? 'danger');
 const dispatch = createEventDispatcher();
 function onKeyDown(event) {
@@ -54,6 +54,7 @@ const Icon = $derived(theme[type].Icon ?? AlertTriangle);
 		transition:fadeFast|local
 		class={'fixed top-0 bottom-0 left-0 right-0 z-[5000]'}
 		role="dialog"
+		{id}
 	>
 		<div
 			class={classNames(

package/package/components/common/confirmationModal/ConfirmationModal.svelte.d.ts

@@ -7,6 +7,7 @@ type Props = {
     open?: boolean;
     type?: 'danger' | 'reload';
     showIcon?: boolean;
+    id?: string;
     children?: Snippet;
     onConfirmed?: () => void | Promise<void>;
     onCanceled?: () => void;

package/package/components/common/drawer/Drawer.svelte

@@ -3,11 +3,14 @@ import { BROWSER } from 'esm-env';
 import Disposable from './Disposable.svelte';
 import ConditionalPortal from './ConditionalPortal.svelte';
 import { chatState } from '../../copilot/chat/sharedChatState.svelte';
-let { open = $bindable(undefined), duration = 0.3, placement = 'right', size = '600px', alwaysOpen = false, shouldUsePortal = true, offset = 0, preventEscape = false, disableChatOffset = false, class: clazz = '', positionClass = undefined, name = undefined, children: children_render } = $props();
+import { useReducedMotion } from '../../../svelte5Utils.svelte';
+let { open = $bindable(undefined), duration: _duration = 0.3, placement = 'right', size = '600px', alwaysOpen = false, shouldUsePortal = true, offset = 0, preventEscape = false, disableChatOffset = false, class: clazz = '', positionClass = undefined, name = undefined, children: children_render } = $props();
 if (open === undefined) {
     open = false;
 }
 let disposable = $state(undefined);
+let reducedMotion = useReducedMotion();
+let duration = $derived(reducedMotion.val ? 0 : _duration);
 let durationMs = $derived(duration * 1000);
 export function toggleDrawer() {
     disposable?.toggleDrawer();

package/package/components/common/drawer/DrawerContent.svelte

@@ -5,11 +5,14 @@ import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
 import { createEventDispatcher } from 'svelte';
 import EEOnly from '../../EEOnly.svelte';
 import { enterpriseLicense } from '../../../stores';
-let { aiId, aiDescription, title = undefined, overflow_y = true, noPadding = false, forceOverflowVisible = false, tooltip = '', documentationLink = undefined, CloseIcon = undefined, fullScreen = true, eeOnly = false, actions, titleExtra, children } = $props();
+let { aiId, aiDescription, title = undefined, overflow_y = true, noPadding = false, forceOverflowVisible = false, tooltip = '', documentationLink = undefined, CloseIcon = undefined, fullScreen = true, eeOnly = false, id, actions, titleExtra, children } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
-<div class={classNames('flex flex-col divide-y', fullScreen ? 'h-screen max-h-screen' : 'h-full')}>
+<div
+	class={classNames('flex flex-col divide-y', fullScreen ? 'h-screen max-h-screen' : 'h-full')}
+	{id}
+>
 	<div class="flex justify-between w-full items-center pl-2 pr-4 py-2 gap-2">
 		<div class="flex items-center gap-2 w-full truncate">
 			<div
@@ -21,7 +24,7 @@ const dispatch = createEventDispatcher();
 					}
 				}}
 			>
-				<CloseButton on:close Icon={CloseIcon} />
+				<CloseButton on:close Icon={CloseIcon} id="{id}-close-btn" />
 			</div>
 			<span class="font-semibold text-emphasis truncate text-lg max-w-sm"
 				>{title ?? ''}
@@ -46,7 +49,7 @@ const dispatch = createEventDispatcher();
 	<div
 		class={classNames(
 			noPadding ? '' : 'p-4',
-			'grow h-full max-h-full',
+			'grow min-h-0 max-h-full',
 			forceOverflowVisible ? '!overflow-visible' : ''
 		)}
 		class:overflow-y-auto={overflow_y}

package/package/components/common/drawer/DrawerContent.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     CloseIcon?: any | undefined;
     fullScreen?: boolean;
     eeOnly?: boolean;
+    id?: string | undefined;
     actions?: import('svelte').Snippet;
     titleExtra?: import('svelte').Snippet;
     children?: import('svelte').Snippet;

package/package/components/common/languageIcons/TypeScript.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">"use strict";
-let { width = 16, height = 16, ...rest } = $props();
+let { width = 16, height = 16, size = undefined, ...rest } = $props();
+const derivedWidth = $derived(size ? size : width);
+const derivedHeight = $derived(size ? size : height);
 </script>
 
 <svg
-	{width}
-	{height}
+	width={derivedWidth}
+	height={derivedHeight}
 	{...rest}
 	viewBox="0 0 17 16"
 	fill="none"

package/package/components/common/languageIcons/TypeScript.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     width?: number;
     height?: number;
+    size?: number;
     [key: string]: any;
 }
 declare const TypeScript: import("svelte").Component<Props, {}, "">;

package/package/components/common/modal/Modal.svelte

@@ -54,7 +54,7 @@ function fadeFast(node) {
 				<div
 					onclick={stopPropagation(bubble('click'))}
 					class={twMerge(
-						'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						'relative transform overflow-hidden rounded-md bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
 						c,
 						open
 							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
@@ -67,9 +67,9 @@ function fadeFast(node) {
 						>
 					{/if}
 					<div class="flex">
-						<div class="ml-4 text-left flex-1">
+						<div class="text-left flex-1">
 							<div class="flex flex-row items-center justify-between">
-								<h3>{title}</h3>
+								<h3 class="text-emphasis text-lg font-semibold">{title}</h3>
 								{@render settings?.()}
 							</div>
 

package/package/components/common/modal/Modal2.svelte

@@ -82,6 +82,7 @@ function fadeFast(node) {
 												<slot name="header-right" />
 												<div class="w-8">
 													<button
+														id="modal-close-button"
 														on:click={() => {
 															close()
 														}}

package/package/components/common/seconds/SecondsInput.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">const ONE_DAY_IN_SECONDS = 86400;
+<script lang="ts">import { untrack } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { inputBaseClass, inputBorderClass, inputSizeClasses } from '../../text_input/TextInput.svelte';
+import CloseButton from '../CloseButton.svelte';
+const ONE_DAY_IN_SECONDS = 86400;
 const ONE_HOUR_IN_SECONDS = 3600;
 const ONE_MINUTE_IN_SECONDS = 60;
-export let seconds = 0;
-export let hideDisplay = false;
-export let disabled = false;
-export let max = undefined;
-let day = undefined;
-let hour = undefined;
-let min = undefined;
-let sec = undefined;
-$: convertSecondsToTime(seconds);
-function convertSecondsToTime(seconds) {
-    day = Math.floor(seconds / ONE_DAY_IN_SECONDS);
-    seconds -= day * ONE_DAY_IN_SECONDS;
-    day = day || undefined;
-    hour = Math.floor(seconds / ONE_HOUR_IN_SECONDS);
-    seconds -= hour * ONE_HOUR_IN_SECONDS;
-    hour = hour || undefined;
-    min = Math.floor(seconds / ONE_MINUTE_IN_SECONDS);
-    seconds -= min * ONE_MINUTE_IN_SECONDS;
-    min = min || undefined;
-    sec = seconds || undefined;
+const segmentClass = 'no-default-style !bg-transparent border-none !w-7 text-right p-0 text-xs font-medium focus:ring-0 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none';
+let { seconds = $bindable(), disabled = false, max = undefined, size = 'md', clearable = false, defaultValue = undefined, onfocus } = $props();
+let day = $state(0);
+let hour = $state(0);
+let min = $state(0);
+let sec = $state(0);
+let containerFocused = $state(false);
+let hasValue = $derived(seconds != null);
+function convertSecondsToTime(s) {
+    day = Math.floor(s / ONE_DAY_IN_SECONDS);
+    s -= day * ONE_DAY_IN_SECONDS;
+    hour = Math.floor(s / ONE_HOUR_IN_SECONDS);
+    s -= hour * ONE_HOUR_IN_SECONDS;
+    min = Math.floor(s / ONE_MINUTE_IN_SECONDS);
+    s -= min * ONE_MINUTE_IN_SECONDS;
+    sec = s;
 }
 function convertUnitsToSeconds() {
     seconds =
@@ -34,70 +34,161 @@ function convertUnitsToSeconds() {
         seconds = max;
     }
 }
+function clamp(value, maxVal) {
+    return Math.max(0, Math.min(maxVal, value));
+}
+function handleKeydown(e, getter, setter, maxVal) {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        setter(clamp((getter() || 0) + (e.key === 'ArrowUp' ? 1 : -1), maxVal));
+        convertUnitsToSeconds();
+    }
+}
+function handleInput(e, setter, maxVal) {
+    const input = e.currentTarget;
+    const clamped = clamp(parseInt(input.value) || 0, maxVal);
+    setter(clamped);
+    input.value = String(clamped);
+    convertUnitsToSeconds();
+}
+function handleFocus(e) {
+    containerFocused = true;
+    if (seconds == null) {
+        seconds = 0;
+    }
+    onfocus?.(e);
+}
+function handleBlur() {
+    containerFocused = false;
+}
+$effect(() => {
+    const s = seconds;
+    untrack(() => convertSecondsToTime(s ?? 0));
+});
 </script>
 
-<div class="flex flex-wrap gap-x-4">
-	{#if !hideDisplay}
-		<input
-			value={seconds == null || seconds == undefined
-				? 'Not set'
-				: disabled
-					? ''
-					: seconds + ' second' + (seconds === 1 ? '' : 's')}
-			{disabled}
-			readonly
-			type="text"
-			class="max-w-[248px] bg-gray-50 mb-2 mt-6"
-		/>
-	{/if}
-	<div class="flex flex-wrap items-center gap-2 text-xs font-medium">
-		<div class="flex items-center gap-2">
-			<label>
-				Sec
+<div class="flex flex-col gap-1">
+	<div class="flex items-center gap-1">
+		<div
+			class={twMerge(
+				inputBaseClass,
+				inputSizeClasses[size],
+				inputBorderClass({ forceFocus: containerFocused }),
+				'flex items-center gap-0.5 !w-fit'
+			)}
+		>
+			<div class="flex items-baseline">
 				<input
 					type="number"
-					class="!w-14"
+					class={segmentClass}
+					value={hasValue ? day || 0 : ''}
+					placeholder="_ _"
+					min="0"
 					{disabled}
-					bind:value={sec}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					oninput={(e) => handleInput(e, (v) => (day = v), Infinity)}
+					onkeydown={(e) =>
+						handleKeydown(
+							e,
+							() => day,
+							(v) => (day = v),
+							Infinity
+						)}
+					onfocus={handleFocus}
+					onblur={handleBlur}
 				/>
-			</label>
-			<label>
-				Min
+				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
+					><span class="invisible">days</span><span>{day && day > 1 ? 'days' : 'day'}</span></span
+				>
+			</div>
+			<div class="flex items-baseline">
 				<input
 					type="number"
-					class="!w-14"
+					class={segmentClass}
+					value={hasValue ? hour || 0 : ''}
+					placeholder="_ _"
+					min="0"
+					max="23"
 					{disabled}
-					bind:value={min}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					oninput={(e) => handleInput(e, (v) => (hour = v), 23)}
+					onkeydown={(e) =>
+						handleKeydown(
+							e,
+							() => hour,
+							(v) => (hour = v),
+							23
+						)}
+					onfocus={handleFocus}
+					onblur={handleBlur}
 				/>
-			</label>
-		</div>
-		<div class="flex items-center gap-2">
-			<label>
-				Hour
+				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
+					><span class="invisible">hrs</span><span>{hour && hour > 1 ? 'hrs' : 'hr'}</span></span
+				>
+			</div>
+			<div class="flex items-baseline">
 				<input
 					type="number"
-					class="!w-14"
+					class={segmentClass}
+					value={hasValue ? min || 0 : ''}
+					placeholder="_ _"
+					min="0"
+					max="59"
 					{disabled}
-					bind:value={hour}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					oninput={(e) => handleInput(e, (v) => (min = v), 59)}
+					onkeydown={(e) =>
+						handleKeydown(
+							e,
+							() => min,
+							(v) => (min = v),
+							59
+						)}
+					onfocus={handleFocus}
+					onblur={handleBlur}
 				/>
-			</label>
-			<label>
-				Day
+				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
+					><span class="invisible">mins</span><span>{min && min > 1 ? 'mins' : 'min'}</span></span
+				>
+			</div>
+			<div class="flex items-baseline">
 				<input
 					type="number"
-					class="!w-14"
+					class={segmentClass}
+					value={hasValue ? sec || 0 : ''}
+					placeholder="_ _"
+					min="0"
+					max="59"
 					{disabled}
-					bind:value={day}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					oninput={(e) => handleInput(e, (v) => (sec = v), 59)}
+					onkeydown={(e) =>
+						handleKeydown(
+							e,
+							() => sec,
+							(v) => (sec = v),
+							59
+						)}
+					onfocus={handleFocus}
+					onblur={handleBlur}
 				/>
-			</label>
+				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
+					><span class="invisible">secs</span><span>{sec && sec > 1 ? 'secs' : 'sec'}</span></span
+				>
+			</div>
 		</div>
+		{#if clearable && !disabled && seconds != null && seconds !== defaultValue}
+			<CloseButton
+				class="bg-transparent text-secondary hover:text-primary"
+				noBg
+				small
+				on:close={() => {
+					seconds = defaultValue
+				}}
+			/>
+		{/if}
 	</div>
+	{#if seconds != null}
+		<span class="text-2xs text-hint">
+			= {seconds.toLocaleString()} second{seconds === 1 ? '' : 's'}
+		</span>
+	{:else}
+		<span class="text-2xs text-hint"> no time set </span>
+	{/if}
 </div>

package/package/components/common/seconds/SecondsInput.svelte.d.ts

@@ -1,25 +1,13 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SecondsInput: $$__sveltets_2_IsomorphicComponent<{
+import type { ButtonType } from '../button/model';
+interface Props {
     seconds?: number;
-    hideDisplay?: boolean;
     disabled?: boolean;
     max?: number | undefined;
-}, {
-    focus: FocusEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SecondsInput = InstanceType<typeof SecondsInput>;
+    size?: ButtonType.UnifiedSize;
+    clearable?: boolean;
+    defaultValue?: number | undefined;
+    onfocus?: (e: FocusEvent) => void;
+}
+declare const SecondsInput: import("svelte").Component<Props, {}, "seconds">;
+type SecondsInput = ReturnType<typeof SecondsInput>;
 export default SecondsInput;

package/package/components/common/sidebar/SidebarNavigation.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+import Button from '../button/Button.svelte';
+import EEOnly from '../../EEOnly.svelte';
+import { enterpriseLicense } from '../../../stores';
+let { groups, selectedId, onNavigate, class: className = '' } = $props();
+</script>
+
+<div class={twMerge('flex flex-col gap-6', className)}>
+	{#each groups as group (group.title)}
+		<div class="flex flex-col gap-1">
+			{#if group.title}
+				<div class="text-sm font-semibold text-emphasis px-2 mb-1">
+					{group.title}
+				</div>
+			{/if}
+			<nav class="flex flex-col gap-0.5">
+				{#each group.items as item (item.id)}
+					{#if item.showIf !== false}
+						{@const isSelected = selectedId === item.id}
+						<Button
+							variant="subtle"
+							unifiedSize="sm"
+							selected={isSelected}
+							disabled={item.disabled}
+							aiId={item.aiId}
+							aiDescription={item.aiDescription}
+							startIcon={item.icon ? { icon: item.icon } : undefined}
+							btnClasses={'!justify-start text-left !w-full'}
+							onClick={() => onNavigate(item.id)}
+						>
+							<span class="truncate">{item.label}</span>
+							<div class="ml-auto flex items-center gap-1">
+								{#if item.isEE && !$enterpriseLicense}
+									<EEOnly />
+								{/if}
+								{#if item.count !== undefined}
+									<span
+										class="text-2xs text-secondary bg-surface-secondary px-1.5 py-0.5 rounded-full"
+									>
+										{item.count}
+									</span>
+								{/if}
+							</div>
+						</Button>
+					{/if}
+				{/each}
+			</nav>
+		</div>
+	{/each}
+</div>

package/package/components/common/sidebar/SidebarNavigation.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType } from 'svelte';
+interface NavigationItem {
+    id: string;
+    label: string;
+    icon?: ComponentType;
+    disabled?: boolean;
+    count?: number;
+    aiId?: string;
+    aiDescription?: string;
+    showIf?: boolean;
+    isEE?: boolean;
+}
+interface NavigationGroup {
+    title?: string;
+    items: NavigationItem[];
+}
+interface Props {
+    groups: NavigationGroup[];
+    selectedId: string;
+    onNavigate: (id: string) => void;
+    class?: string;
+}
+declare const SidebarNavigation: import("svelte").Component<Props, {}, "">;
+type SidebarNavigation = ReturnType<typeof SidebarNavigation>;
+export default SidebarNavigation;