windmill-components 1.623.2 → 1.655.0

package/package/components/ScriptPicker.svelte

@@ -20,7 +20,7 @@ let drawerFlowViewer = $state();
 let code = $state('');
 let lang = $state();
 let options = [['Script', 'script', Code2, undefined]];
-allowFlow && options.push(['Flow', 'flow', FlowIcon, '#14b8a6']);
+untrack(() => allowFlow) && options.push(['Flow', 'flow', FlowIcon, '#14b8a6']);
 const dispatch = createEventDispatcher();
 async function loadItems() {
     if (itemKind == 'flow') {

package/package/components/ScriptWrapper.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import ScriptBuilder from './ScriptBuilder.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import ScriptBuilder from './ScriptBuilder.svelte';
 import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
 let { script: oldScript, disableAi, ...props } = $props();
-let script = $state(oldScript);
+let script = $state(untrack(() => oldScript));
 </script>
 
 <AiChatLayout noPadding {disableAi}>

package/package/components/Scrollable.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">import { onMount, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let isAtBottom = false;
-let isScrollable = false;
-export let id = undefined;
-export let scrollableClass = '';
-export let shiftedShadow = false;
+let isAtBottom = $state(false);
+let isScrollable = $state(false);
+let { id = undefined, scrollableClass = '', shiftedShadow = false, children } = $props();
 let mutationObserver;
-let el;
+let el = $state();
 function handleScroll(event) {
     const scrollableElement = event.target;
     isAtBottom =
@@ -14,7 +12,9 @@ function handleScroll(event) {
             scrollableElement.scrollHeight - 2;
 }
 function checkIfScrollable(el) {
-    return el.scrollHeight > el.clientHeight;
+    if (!el)
+        return false;
+    return el?.scrollHeight > el?.clientHeight;
 }
 function observeScrollability(el) {
     isScrollable = checkIfScrollable(el);
@@ -24,7 +24,7 @@ function observeScrollability(el) {
     mutationObserver?.observe(el, { childList: true, subtree: true, characterData: true });
 }
 export function scrollIntoView(top) {
-    el.scrollTo({ top, behavior: 'smooth' });
+    el?.scrollTo({ top, behavior: 'smooth' });
 }
 onMount(() => {
     observeScrollability(el);
@@ -35,8 +35,8 @@ onDestroy(() => {
 </script>
 
 <div {id} class={twMerge('relative pb-1', scrollableClass)}>
-	<div bind:this={el} on:scroll={handleScroll} class="w-full h-full overflow-y-auto">
-		<slot />
+	<div bind:this={el} onscroll={handleScroll} class="w-full h-full overflow-y-auto">
+		{@render children?.()}
 	</div>
 	{#if !isAtBottom && isScrollable}
 		<div

package/package/components/Scrollable.svelte.d.ts

@@ -1,34 +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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Scrollable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     id?: string | null | undefined;
     scrollableClass?: string;
     shiftedShadow?: boolean;
-    scrollIntoView?: (top: number) => void;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+    children?: import('svelte').Snippet;
+}
+declare const Scrollable: import("svelte").Component<Props, {
     scrollIntoView: (top: number) => void;
-}, string>;
-type Scrollable = InstanceType<typeof Scrollable>;
+}, "">;
+type Scrollable = ReturnType<typeof Scrollable>;
 export default Scrollable;

package/package/components/SearchItems.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import uFuzzy from '@leeoniya/ufuzzy';
 import { untrack } from 'svelte';
 let { filter = '', items, f, filteredItems = $bindable(), opts = {} } = $props();
-let uf = new uFuzzy(opts);
+let uf = new uFuzzy(untrack(() => opts));
 function filterItems() {
     let trimmed = filter.trim();
     if (items == undefined || trimmed.length == 0) {

package/package/components/Section.svelte

@@ -56,9 +56,9 @@ let { label = undefined, tooltip = undefined, documentationLink = undefined, eeO
 			transition:slide={animate || collapsable ? { duration: 200 } : { duration: 0 }}
 		>
 			{#if description}
-				<div class="text-xs text-primary mt-1">{@html description}</div>
+				<div class="text-xs text-primary mt-1 mb-2">{@html description}</div>
 			{/if}
-			<div class="flex flex-col gap-6 grow min-h-0 mt-6">
+			<div class="flex flex-col gap-6 grow min-h-0 mt-4">
 				<div class={twMerge('grow min-h-0', clazz)}>
 					{@render children?.()}
 				</div>

package/package/components/ServiceLogsInner.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import { createBubbler, preventDefault } from 'svelte/legacy';
 const bubble = createBubbler();
 import { IndexSearchService, ServiceLogsService } from '../gen';
-import ManuelDatePicker from './runs/ManuelDatePicker.svelte';
+import TimeframeSelect, { serviceLogsTimeframes, useUrlSyncedTimeframe } from './runs/TimeframeSelect.svelte';
 import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte';
 import LogViewer from './LogViewer.svelte';
 import Toggle from './Toggle.svelte';
 import { sendUserToast } from '../toast';
-import { onDestroy, tick, untrack } from 'svelte';
+import { onDestroy, tick } from 'svelte';
 import { Loader2 } from 'lucide-svelte';
 import { copyToClipboard, scroll_into_view_if_needed_polyfill, truncateRev } from '../utils';
 import LogSnippetViewer from './LogSnippetViewer.svelte';
@@ -16,12 +16,11 @@ import { AnsiUp } from 'ansi_up';
 import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte';
 import Select from './select/Select.svelte';
 import { goto } from '../navigation';
-import { page } from '$app/stores';
+import { page } from '$app/state';
+import { watch } from 'runed';
 let { searchTerm, queryParseErrors = $bindable(), tagLabel } = $props();
 let minTs = $state(undefined);
 let maxTs = $state(undefined);
-let minTsManual = $state($page.url.searchParams.get('minTs') ?? undefined);
-let maxTsManual = $state($page.url.searchParams.get('maxTs') ?? undefined);
 let max_lines = $state(undefined);
 // let lastSeen: undefined | string = undefined
 let withError = $state(false);
@@ -29,12 +28,11 @@ let autoRefresh = $state(true);
 let loading = $state(false);
 let timeout = $state(undefined);
 let allLogs = $state(undefined);
-let manualPicker = $state(undefined);
+let _timeframe = useUrlSyncedTimeframe(serviceLogsTimeframes);
+let timeframe = $derived(_timeframe.timeframe);
+let [minTsManual, maxTsManual] = $derived(timeframe.type === 'manual' ? [timeframe.minTs ?? undefined, timeframe.maxTs ?? undefined] : []);
 let upTo = $state(undefined);
 let upToIsLatest = $state(true);
-function onManualChanges() {
-    getAllLogs(minTsManual ?? maxTs, maxTsManual);
-}
 function getAllLogs(queryMinTs, queryMaxTs) {
     timeout && clearTimeout(timeout);
     loading = true;
@@ -110,11 +108,6 @@ function getAllLogs(queryMinTs, queryMaxTs) {
             timeout = setTimeout(() => {
                 if (searchTerm !== '')
                     return;
-                let minMax = manualPicker?.computeMinMax();
-                if (minMax) {
-                    maxTsManual = minMax?.maxTs ?? undefined;
-                    minTsManual = minMax?.minTs ?? undefined;
-                }
                 let maxTsPlus1 = maxTs ? new Date(new Date(maxTs).getTime() + 1000) : undefined;
                 getAllLogs(maxTsPlus1?.toISOString(), undefined);
             }, 5000);
@@ -127,13 +120,13 @@ function getAllLogs(queryMinTs, queryMaxTs) {
         autoRefresh = false;
     });
 }
-let initialSelected = $page.url.searchParams.get('mode') &&
-    $page.url.searchParams.get('workerGroup') &&
-    $page.url.searchParams.get('hostname')
+let initialSelected = page.url.searchParams.get('mode') &&
+    page.url.searchParams.get('workerGroup') &&
+    page.url.searchParams.get('hostname')
     ? {
-        mode: $page.url.searchParams.get('mode'),
-        workerGroup: $page.url.searchParams.get('workerGroup'),
-        hostname: $page.url.searchParams.get('hostname')
+        mode: page.url.searchParams.get('mode'),
+        workerGroup: page.url.searchParams.get('workerGroup'),
+        hostname: page.url.searchParams.get('hostname')
     }
     : undefined;
 let selected = $state(initialSelected);
@@ -253,10 +246,6 @@ async function searchLogs(searchTerm, selected, minTs, maxTs, allLogs) {
     const params = new URLSearchParams();
     if (searchTerm)
         params.set('searchTerm', searchTerm);
-    if (minTs)
-        params.set('minTs', minTs);
-    if (maxTs)
-        params.set('maxTs', maxTs);
     if (selected?.mode)
         params.set('mode', selected.mode);
     if (selected?.workerGroup)
@@ -350,13 +339,15 @@ function getSelectItems(allLogs, countsPerHost) {
         value: { mode, workerGroup: wg, hostname: hn }
     }))));
 }
-$effect(() => {
-    minTsManual || maxTsManual || untrack(() => onManualChanges());
+watch(() => timeframe, () => {
+    const ts = timeframe.computeMinMax();
+    minTs = undefined;
+    maxTs = undefined;
+    allLogs = undefined;
+    getAllLogs(ts.minTs ?? undefined, ts.maxTs ?? undefined);
 });
-$effect(() => {
-    ;
-    [searchTerm, selected, minTsManual, maxTsManual, allLogs];
-    untrack(() => searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs));
+watch(() => [searchTerm, selected, timeframe, allLogs], () => {
+    searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs);
 });
 </script>
 
@@ -393,71 +384,19 @@ $effect(() => {
 				class="flex flex-col lg:flex-row gap-y-1 justify-between w-full relative pb-4 gap-x-0.5"
 				id="service-logs-date-pickers"
 			>
-				<div class="flex relative">
-					<input
-						type="text"
-						value={minTsManual
-							? new Date(minTsManual).toLocaleTimeString([], {
-									day: '2-digit',
-									month: '2-digit',
-									hour: '2-digit',
-									minute: '2-digit'
-								})
-							: 'min datetime'}
-						disabled
-					/>
-					<CalendarPicker
-						label="min datetime"
-						date={minTsManual}
-						on:change={({ detail }) => {
-							minTs = undefined
-							maxTs = undefined
-							allLogs = undefined
-							minTsManual = detail
-							getAllLogs(minTsManual, maxTsManual)
-						}}
-						placement="top-start"
-					/>
-				</div>
-				<ManuelDatePicker
-					bind:minTs={() => minTsManual ?? null, (v) => (minTsManual = v ?? undefined)}
-					bind:maxTs={() => maxTsManual ?? null, (v) => (maxTsManual = v ?? undefined)}
-					bind:this={manualPicker}
+				<TimeframeSelect
+					items={serviceLogsTimeframes}
+					bind:value={timeframe}
 					{loading}
-					on:loadJobs={() => {
+					wrapperClasses="w-full"
+					onClick={() => {
 						minTs = undefined
 						maxTs = undefined
 						allLogs = undefined
-						getAllLogs(minTsManual, maxTsManual)
+						const ts = timeframe.computeMinMax()
+						getAllLogs(ts.minTs ?? undefined, ts.maxTs ?? undefined)
 					}}
-					serviceLogsChoices
-					loadText={searchTerm === '' ? 'Last 1000 logfiles' : 'All time'}
 				/>
-				<div class="flex relative">
-					<input
-						type="text"
-						value={maxTsManual
-							? new Date(maxTsManual).toLocaleTimeString([], {
-									day: '2-digit',
-									month: '2-digit',
-									hour: '2-digit',
-									minute: '2-digit'
-								})
-							: 'max datetime'}
-						disabled
-					/>
-					<CalendarPicker
-						label="max datetime"
-						date={maxTsManual}
-						on:change={({ detail }) => {
-							minTs = undefined
-							maxTs = undefined
-							allLogs = undefined
-							maxTsManual = detail
-							getAllLogs(minTsManual, maxTsManual)
-						}}
-					/>
-				</div>
 			</div>
 			<div class="flex w-full flex-row-reverse pb-4 -mt-2 gap-2"
 				><Toggle
@@ -486,7 +425,13 @@ $effect(() => {
 			{#if allLogs == undefined}
 				<div class="text-center pb-2"><Loader2 class="animate-spin" /></div>
 			{:else if Object.keys(allLogs).length == 0}
-				<div class="flex justify-center items-center h-full">No logs</div>
+				<div class="flex flex-col justify-center items-center h-full gap-2">
+					<span>No logs</span>
+					<span class="text-2xs text-tertiary"
+						>Search only covers a recent time window, configurable in instance settings
+						under Indexer.</span
+					>
+				</div>
 			{:else if minTs && maxTs}
 				{@const minTsN = new Date(minTs).getTime()}
 				{@const maxTsN = new Date(maxTs).getTime()}
@@ -626,7 +571,7 @@ $effect(() => {
 								<LogSnippetViewer
 									content={snippet_fragment || document.logs[0]}
 									highlighted={snippet_highlighted}
-									on:click={() => {
+									onClick={() => {
 										let logLineNumber = document.line_number[0]
 										let logFile = document.file_name[0]
 										let host = document.host[0]

package/package/components/ShareModal.svelte

@@ -24,13 +24,18 @@ let groups = $state([]);
 let usernames = $state([]);
 let drawer = $state();
 let own = $state(false);
-export async function openDrawer(newPath, kind_l) {
+export async function openDrawer(newPath, kind_l, isOwnerOverride) {
     path = newPath;
     kind = kind_l;
     loadAcls();
     loadGroups();
     loadUsernames();
-    loadOwner();
+    if (isOwnerOverride !== undefined) {
+        own = isOwnerOverride;
+    }
+    else {
+        loadOwner();
+    }
     drawer?.openDrawer();
 }
 async function loadOwner() {
@@ -118,12 +123,14 @@ async function addAcl(owner, write) {
 				{/if}
 				{#if acls?.length > 0}
 					<TableCustom>
-						<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-						<tr slot="header-row">
-							<th>owner</th>
-							<th></th>
-							<th></th>
-						</tr>
+
+						{#snippet headerRow()}
+												<tr >
+								<th>owner</th>
+								<th></th>
+								<th></th>
+							</tr>
+											{/snippet}
 						{#snippet body()}
 							<tbody>
 								{#each acls as [owner, write]}

package/package/components/ShareModal.svelte.d.ts

@@ -16,7 +16,7 @@ declare const ShareModal: $$__sveltets_2_IsomorphicComponent<Record<string, neve
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app" | "group_" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger") => Promise<void>;
+    openDrawer: (newPath: string, kind_l: "resource" | "volume" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app" | "group_" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger", isOwnerOverride?: boolean) => Promise<void>;
 }, "">;
 type ShareModal = InstanceType<typeof ShareModal>;
 export default ShareModal;

package/package/components/SimpleEditor.svelte

@@ -50,7 +50,7 @@ let valueAfterDispose = undefined;
 let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key, disabled = false, minHeight = 1000, renderLineHighlight = 'none', suggestion } = $props();
 let yPadding = MONACO_Y_PADDING;
 const dispatch = createEventDispatcher();
-const uri = `file:///${hash}.${langToExt(lang)}`;
+const uri = `file:///${untrack(() => hash)}.${langToExt(untrack(() => lang))}`;
 export function getCode() {
     if (valueAfterDispose != undefined) {
         return valueAfterDispose;

package/package/components/Slider.svelte

@@ -3,10 +3,7 @@ import { slide } from 'svelte/transition';
 import Button from './common/button/Button.svelte';
 import Tooltip from './Tooltip.svelte';
 import { twMerge } from 'tailwind-merge';
-export let text;
-export let tooltip = undefined;
-export let view = false;
-export let size = 'md';
+let { text, tooltip = undefined, view = $bindable(false), size = 'md', children } = $props();
 </script>
 
 <Button
@@ -24,5 +21,5 @@ export let size = 'md';
 	{/if}
 </Button>
 {#if view}
-	<div class="my-4 px-2" transition:slide|local><slot /></div>
+	<div class="my-4 px-2" transition:slide|local>{@render children?.()}</div>
 {/if}

package/package/components/Slider.svelte.d.ts

@@ -1,32 +1,10 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Slider: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     text: string;
     tooltip?: string | undefined;
     view?: boolean;
-    size?: "xs" | "sm" | "md" | "lg";
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Slider = InstanceType<typeof Slider>;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: import('svelte').Snippet;
+}
+declare const Slider: import("svelte").Component<Props, {}, "view">;
+type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/package/components/Star.svelte

@@ -1,29 +1,15 @@
 <script lang="ts">import { preventDefault } from 'svelte/legacy';
-import { FavoriteService } from '../gen';
-import { starStore } from '../stores';
-import { sendUserToast } from '../toast';
 import { Star, StarOff } from 'lucide-svelte';
-let { path, kind, starred = false, workspace_id, onStarred } = $props();
+import { favoriteManager } from './sidebar/FavoriteMenu.svelte';
+let { path, kind, workspaceId, summary } = $props();
 let buttonHover = $state(false);
+let starred = $derived(favoriteManager.isStarred(path, kind));
 async function onClick() {
     buttonHover = false;
-    if (starred) {
-        await FavoriteService.unstar({
-            workspace: workspace_id,
-            requestBody: { path, favorite_kind: kind }
-        });
-        sendUserToast('Unstarred');
-        $starStore = $starStore + 1;
-    }
-    else {
-        await FavoriteService.star({
-            workspace: workspace_id,
-            requestBody: { path, favorite_kind: kind }
-        });
-        sendUserToast('Marked as favorite, it will appear first');
-        $starStore = $starStore + 1;
-    }
-    onStarred?.(!starred);
+    if (starred)
+        favoriteManager.unstar(path, kind, workspaceId);
+    else
+        favoriteManager.star(path, kind, workspaceId, summary);
 }
 </script>
 
@@ -31,7 +17,7 @@ async function onClick() {
 	onclick={preventDefault(onClick)}
 	onmouseenter={() => (buttonHover = true)}
 	onmouseleave={() => (buttonHover = false)}
-	class="p-2"
+	class="p-1"
 >
 	{#if starred}
 		{#if buttonHover}

package/package/components/Star.svelte.d.ts

@@ -1,10 +1,10 @@
 import { Star } from 'lucide-svelte';
+import { type FavoriteKind } from './sidebar/FavoriteMenu.svelte';
 interface Props {
     path: string;
-    kind: 'flow' | 'app' | 'script' | 'raw_app';
-    starred?: boolean;
-    workspace_id: string;
-    onStarred?: (starred: boolean) => void;
+    kind: FavoriteKind;
+    summary?: string;
+    workspaceId?: string;
 }
 declare const Star: import("svelte").Component<Props, {}, "">;
 type Star = ReturnType<typeof Star>;

package/package/components/StringTypeNarrowing.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { computeKind } from '../utils';
+<script lang="ts">import { untrack } from 'svelte';
+import { computeKind } from '../utils';
 import Label from './Label.svelte';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
 import Toggle from './Toggle.svelte';
@@ -12,7 +13,7 @@ import RegexGen from './copilot/RegexGen.svelte';
 import TextInput from './text_input/TextInput.svelte';
 let { pattern = $bindable(), enum_ = $bindable(), format = $bindable(), contentEncoding = $bindable(), customErrorMessage = $bindable(), minRows = $bindable(undefined), disableCreate = $bindable(undefined), disableVariablePicker = $bindable(undefined), password = $bindable(undefined), noExtra = false, dateFormat = $bindable(), enumLabels = $bindable(undefined), overrideAllowKindChange = true, originalType = undefined } = $props();
 let kind = $state(computeKind(enum_, contentEncoding, pattern, format));
-const allowKindChange = overrideAllowKindChange || originalType === 'string';
+const allowKindChange = untrack(() => overrideAllowKindChange) || untrack(() => originalType) === 'string';
 let patternStr = $state(pattern ?? '');
 let resource = $state();
 const FORMATS = [
@@ -292,6 +293,7 @@ function onEnumKeyChange(oldKey, newKey) {
 		{/if}
 	{:else if kind == 'none'}
 		{#if !noExtra}
+			<div class="mt-2"></div>
 			<Label label="Min textarea rows">
 				<TextInput
 					inputProps={{ type: 'number' }}

package/package/components/Subsection.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">import { enterpriseLicense } from '../stores';
+<script lang="ts">import { untrack } from 'svelte';
+import { enterpriseLicense } from '../stores';
 import { ChevronDown, ChevronRight } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import { twMerge } from 'tailwind-merge';
 import EEOnly from './EEOnly.svelte';
 let { label = undefined, tooltip = undefined, eeOnly = false, collapsable = false, collapsed = $bindable(true), openInitially = false, headless = false, class: clazz = undefined, header, action, badge, children } = $props();
-if (openInitially && collapsable && collapsed) {
+if (untrack(() => openInitially) && untrack(() => collapsable) && collapsed) {
     collapsed = false;
 }
 </script>

package/package/components/Summary.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { Pen } from 'lucide-svelte';
 import TextInput from './text_input/TextInput.svelte';
-export let value;
-export let disabled = false;
+let { value = $bindable(), disabled = false } = $props();
 function blur(e) {
     e.key === 'Enter' && e?.target?.blur();
 }

package/package/components/Summary.svelte.d.ts

@@ -1,21 +1,7 @@
-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 Summary: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: string;
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Summary = InstanceType<typeof Summary>;
+}
+declare const Summary: import("svelte").Component<Props, {}, "value">;
+type Summary = ReturnType<typeof Summary>;
 export default Summary;