diff --git a/src/lib/components/batch-operations/table.svelte b/src/lib/components/batch-operations/table.svelte
index d891f13097..bc4fa19d78 100644
--- a/src/lib/components/batch-operations/table.svelte
+++ b/src/lib/components/batch-operations/table.svelte
@@ -13,8 +13,12 @@
   } from '$lib/types/batch';
   import { routeForBatchOperation } from '$lib/utilities/route-for';
 
-  export let namespace: string;
-  export let operations: BatchOperationInfo[];
+  interface Props {
+    namespace: string;
+    operations: BatchOperationInfo[];
+  }
+
+  let { namespace, operations }: Props = $props();
 
   const jobStateToBadgeType: Record<BatchOperationState, BadgeType> = {
     Completed: 'success',
diff --git a/src/lib/components/lines-and-dots/svg/graph-widget.svelte b/src/lib/components/lines-and-dots/svg/graph-widget.svelte
index 42e33815c5..b2f898db0e 100644
--- a/src/lib/components/lines-and-dots/svg/graph-widget.svelte
+++ b/src/lib/components/lines-and-dots/svg/graph-widget.svelte
@@ -7,11 +7,23 @@
 
   import TimelineGraph from './timeline-graph.svelte';
 
-  export let namespace: string;
-  export let workflowId: string;
-  export let runId = '';
-  export let viewportHeight = 360;
-  export let onLoad: () => void = () => {};
+  interface Props {
+    namespace: string;
+    workflowId: string;
+    runId?: string;
+    viewportHeight?: number;
+    onLoad?: () => void;
+    class?: string;
+  }
+
+  let {
+    namespace,
+    workflowId,
+    runId = '',
+    viewportHeight = 360,
+    onLoad = () => {},
+    class: className = '',
+  }: Props = $props();
 
   const getWorkflowAndEventHistory = async () => {
     const [workflow, history] = await Promise.all([
@@ -32,7 +44,7 @@
 </script>
 
 {#await getWorkflowAndEventHistory() then { workflow, history }}
-  <div class="cursor-pointer overflow-auto {$$restProps.class}">
+  <div class="cursor-pointer overflow-auto {className}">
     <TimelineGraph
       {viewportHeight}
       {workflow}
diff --git a/src/lib/components/lines-and-dots/svg/group-details-text.svelte b/src/lib/components/lines-and-dots/svg/group-details-text.svelte
index 3684152789..9ccd66e3eb 100644
--- a/src/lib/components/lines-and-dots/svg/group-details-text.svelte
+++ b/src/lib/components/lines-and-dots/svg/group-details-text.svelte
@@ -10,15 +10,19 @@
 
   import { DetailsConfig, staticCodeBlockHeight } from '../constants';
 
-  export let key: string;
-  export let value: string | Record<string, unknown>;
-  export let attributes: CombinedAttributes;
-  export let onDecode: (decodedValue: string) => void | undefined = undefined;
+  interface Props {
+    key: string;
+    value: string | Record<string, unknown>;
+    attributes: CombinedAttributes;
+    onDecode?: (decodedValue: string) => void | undefined;
+  }
+
+  let { key, value, attributes, onDecode = undefined }: Props = $props();
 
   const { fontSizeRatio } = DetailsConfig;
 
-  $: codeBlockValue = getCodeBlockValue(value);
-  $: linkType = displayLinkType(key, attributes);
+  const codeBlockValue = $derived(getCodeBlockValue(value));
+  const linkType = $derived(displayLinkType(key, attributes));
 </script>
 
 {#if typeof value === 'object'}
diff --git a/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte b/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte
index bf8217e0ea..5d803eb203 100644
--- a/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte
+++ b/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte
@@ -23,46 +23,52 @@
   import Dot from './dot.svelte';
   import Line from './line.svelte';
 
-  export let event: WorkflowEventWithPending;
-  export let group: EventGroup;
-  export let history: WorkflowEventWithPending[];
-  export let groups: EventGroups;
-  export let index: number;
-  export let canvasWidth: number;
+  interface Props {
+    event: WorkflowEventWithPending;
+    group: EventGroup;
+    history: WorkflowEventWithPending[];
+    groups: EventGroups;
+    index: number;
+    canvasWidth: number;
+  }
+
+  let { event, group, history, groups, index, canvasWidth }: Props = $props();
 
   const { height, radius } = HistoryConfig;
   const strokeWidth = radius / 2;
 
-  $: y = index * height + height / 2;
-  $: ({ nextDistance, offset } = getNextDistanceAndOffset(
-    history,
-    event,
-    groups,
-    height,
-    $eventFilterSort,
-  ));
+  const y = $derived(index * height + height / 2);
+  const distanceAndOffset = $derived(
+    getNextDistanceAndOffset(history, event, groups, height, $eventFilterSort),
+  );
+  const nextDistance = $derived(distanceAndOffset.nextDistance);
+  const offset = $derived(distanceAndOffset.offset);
 
-  $: zoomNextDistance = offset > 0 && nextDistance;
+  const zoomNextDistance = $derived(offset > 0 && nextDistance);
 
-  $: classification =
+  const classification = $derived(
     isPendingActivity(event) || isPendingNexusOperation(event)
       ? 'pending'
-      : event?.classification;
+      : event?.classification,
+  );
 
-  $: horizontalOffset = offset * 1.75 * radius;
-  $: nextIsPending =
-    isEvent(event) && group?.lastEvent.id === event?.id && group?.isPending;
-  $: connectLine =
+  const horizontalOffset = $derived(offset * 1.75 * radius);
+  const nextIsPending = $derived(
+    isEvent(event) && group?.lastEvent.id === event?.id && group?.isPending,
+  );
+  const connectLine = $derived(
     isPendingActivity(event) || isPendingNexusOperation(event) || offset === 0
       ? false
-      : !isMiddleEvent(event, groups);
-  $: category =
+      : !isMiddleEvent(event, groups),
+  );
+  const category = $derived(
     isPendingActivity(event) || isPendingNexusOperation(event)
       ? 'pending'
       : nextIsPending
         ? event?.category
-        : (undefined as EventTypeCategory | 'pending' | undefined);
-  $: reverseSort = $eventFilterSort === 'descending';
+        : (undefined as EventTypeCategory | 'pending' | undefined),
+  );
+  const reverseSort = $derived($eventFilterSort === 'descending');
 </script>
 
 <g role="button" tabindex="0" class="relative cursor-pointer">
diff --git a/src/lib/components/lines-and-dots/svg/history-graph.svelte b/src/lib/components/lines-and-dots/svg/history-graph.svelte
index f7d61ac6c9..cffc176542 100644
--- a/src/lib/components/lines-and-dots/svg/history-graph.svelte
+++ b/src/lib/components/lines-and-dots/svg/history-graph.svelte
@@ -11,27 +11,26 @@
   import HistoryGraphRowVisual from './history-graph-row-visual.svelte';
   import Line from './line.svelte';
 
-  export let groups: EventGroups;
-  export let history: WorkflowEventWithPending[];
+  interface Props {
+    groups: EventGroups;
+    history: WorkflowEventWithPending[];
+  }
 
-  $: workflowTaskGroups = groupWorkflowTaskEvents(
-    $filteredEventHistory,
-    $eventFilterSort,
+  let { groups, history }: Props = $props();
+
+  const workflowTaskGroups = $derived(
+    groupWorkflowTaskEvents($filteredEventHistory, $eventFilterSort),
   );
-  $: allGroups = [...workflowTaskGroups, ...groups];
+  const allGroups = $derived([...workflowTaskGroups, ...groups]);
 
   const { height, radius } = HistoryConfig;
 
   const nodeBuffer = 4 * radius;
   const maxWidth = 600;
 
-  let canvasWidth = nodeBuffer;
-  let visualWidth = 0;
-
-  $: canvasHeight = history.length * height;
-
-  $: getMaxWidth = (items: WorkflowEventWithPending[]) => {
-    items.forEach((event) => {
+  const canvasWidth = $derived.by(() => {
+    let width = nodeBuffer;
+    history.forEach((event) => {
       const { offset } = getNextDistanceAndOffset(
         history,
         event,
@@ -39,12 +38,13 @@
         height,
         $eventFilterSort,
       );
-      canvasWidth = Math.max(canvasWidth, offset * 1.75 * radius + nodeBuffer);
-      visualWidth = Math.min(canvasWidth - 2 * radius, maxWidth);
+      width = Math.max(width, offset * 1.75 * radius + nodeBuffer);
     });
-  };
+    return width;
+  });
+  const visualWidth = $derived(Math.min(canvasWidth - 2 * radius, maxWidth));
 
-  $: getMaxWidth(history);
+  const canvasHeight = $derived(history.length * height);
 </script>
 
 <div
diff --git a/src/lib/components/lines-and-dots/svg/workflow-row.svelte b/src/lib/components/lines-and-dots/svg/workflow-row.svelte
index 12e3708b69..272d7d950d 100644
--- a/src/lib/components/lines-and-dots/svg/workflow-row.svelte
+++ b/src/lib/components/lines-and-dots/svg/workflow-row.svelte
@@ -8,14 +8,18 @@
   import Dot from './dot.svelte';
   import Line from './line.svelte';
 
-  export let workflow: WorkflowExecution;
-  export let length: number;
-  export let y: number;
+  interface Props {
+    workflow: WorkflowExecution;
+    length: number;
+    y: number;
+  }
+
+  let { workflow, length, y }: Props = $props();
 
   const { radius, height, gutter } = TimelineConfig;
 
-  $: start = gutter;
-  $: end = start + length - 2 * gutter;
+  const start = $derived(gutter);
+  const end = $derived(start + length - 2 * gutter);
 </script>
 
 <g role="button" tabindex="0" class="relative cursor-pointer" {height}>
diff --git a/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte b/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte
index dea28a8a6d..bcc21f1365 100644
--- a/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte
+++ b/src/lib/components/lines-and-dots/workflow-error-stack-trace.svelte
@@ -4,7 +4,13 @@
   import { translate } from '$lib/i18n/translate';
   import type { Failure } from '$lib/types';
 
-  export let failure: Failure | undefined = undefined;
+  import Self from './workflow-error-stack-trace.svelte';
+
+  interface Props {
+    failure?: Failure | undefined;
+  }
+
+  let { failure = undefined }: Props = $props();
 </script>
 
 {#if failure}
@@ -42,5 +48,5 @@
   </Accordion>
 {/if}
 {#if failure?.cause}
-  <svelte:self failure={failure.cause} />
+  <Self failure={failure.cause} />
 {/if}
diff --git a/src/lib/components/lines-and-dots/workflow-pending-task.svelte b/src/lib/components/lines-and-dots/workflow-pending-task.svelte
index 3db5a4df14..29d45798d2 100644
--- a/src/lib/components/lines-and-dots/workflow-pending-task.svelte
+++ b/src/lib/components/lines-and-dots/workflow-pending-task.svelte
@@ -5,7 +5,11 @@
   import { translate } from '$lib/i18n/translate';
   import type { PendingWorkflowTaskInfo } from '$lib/types';
 
-  export let pendingTask: PendingWorkflowTaskInfo | undefined = undefined;
+  interface Props {
+    pendingTask?: PendingWorkflowTaskInfo | undefined;
+  }
+
+  let { pendingTask = undefined }: Props = $props();
 </script>
 
 <Accordion title={translate('workflows.pending-workflow-task')}>
diff --git a/src/lib/components/page-title.svelte b/src/lib/components/page-title.svelte
index 5c9de8188e..eb03c13f9b 100644
--- a/src/lib/components/page-title.svelte
+++ b/src/lib/components/page-title.svelte
@@ -1,13 +1,20 @@
-<script>
+<script lang="ts">
   import apple from '$lib/vendor/apple-touch-icon.png';
   import banner from '$lib/vendor/banner.png';
   import favicon from '$lib/vendor/favicon.ico';
   import manifest from '$lib/vendor/site.webmanifest';
 
-  export let title = 'Temporal';
-  export let url = 'https://temporal.io';
+  interface Props {
+    title?: string;
+    url?: string;
+    image?: string;
+  }
 
-  export let image = banner;
+  let {
+    title = 'Temporal',
+    url = 'https://temporal.io',
+    image = banner,
+  }: Props = $props();
 </script>
 
 <svelte:head>
diff --git a/src/lib/components/panel.svelte b/src/lib/components/panel.svelte
index 2a72031f73..111ca4a12c 100644
--- a/src/lib/components/panel.svelte
+++ b/src/lib/components/panel.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
-  export let error = false;
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    error?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { error = false, class: className = '', children }: Props = $props();
 </script>
 
-<div class="panel surface-primary {$$props.class}" class:error>
-  <slot />
+<div class="panel surface-primary {className}" class:error>
+  {@render children?.()}
 </div>
 
 <style lang="postcss">
diff --git a/src/lib/components/payload-input.svelte b/src/lib/components/payload-input.svelte
index 390f9935fc..cd40d9da21 100644
--- a/src/lib/components/payload-input.svelte
+++ b/src/lib/components/payload-input.svelte
@@ -7,15 +7,25 @@
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { translate } from '$lib/i18n/translate';
 
-  export let id: string = crypto.randomUUID();
-  export let error = false;
-  export let input: string;
-  export let label = translate('workflows.signal-payload-input-label');
-  export let loading = false;
-  export let hintText = translate('workflows.signal-payload-input-label-hint');
-  export let editing = true;
+  interface Props {
+    id?: string;
+    error?: boolean;
+    input: string;
+    label?: string;
+    loading?: boolean;
+    hintText?: string;
+    editing?: boolean;
+  }
 
-  $: error = !isValidInput(input);
+  let {
+    id = crypto.randomUUID(),
+    error = $bindable(false),
+    input = $bindable(),
+    label = translate('workflows.signal-payload-input-label'),
+    loading = $bindable(false),
+    hintText = translate('workflows.signal-payload-input-label-hint'),
+    editing = true,
+  }: Props = $props();
 
   const isValidInput = (value: string) => {
     if (!input) return true;
@@ -27,6 +37,12 @@
     }
   };
 
+  const computedError = $derived(!isValidInput(input));
+
+  $effect(() => {
+    error = computedError;
+  });
+
   const handleInputChange = (text: string): void => {
     if (text !== input) {
       input = text;
diff --git a/src/lib/components/workflow-status.stories.svelte b/src/lib/components/workflow-status.stories.svelte
index 8d6acf60d7..cf2805ef15 100644
--- a/src/lib/components/workflow-status.stories.svelte
+++ b/src/lib/components/workflow-status.stories.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   import { Story, Template } from '@storybook/addon-svelte-csf';
   import type { Meta } from '@storybook/svelte';
+  import type { ComponentProps } from 'svelte';
 
   import WorkflowStatus from './workflow-status.svelte';
 
@@ -27,7 +28,7 @@
       },
       delayed: { name: 'Delayed', control: 'boolean' },
     },
-  } satisfies Meta<WorkflowStatus>;
+  } satisfies Meta<ComponentProps<typeof WorkflowStatus>>;
 
   const withCount = { count: 100 };
   const withNewCount = { ...withCount, newCount: 999 };
diff --git a/src/lib/components/workflow-status.svelte b/src/lib/components/workflow-status.svelte
index 5210edc209..63daa2a0af 100644
--- a/src/lib/components/workflow-status.svelte
+++ b/src/lib/components/workflow-status.svelte
@@ -21,14 +21,29 @@
     | 'Pending'
     | 'Retrying';
 
-  export let delay = 0;
-  export let status: Status = 'Running';
-  export let count: number | undefined = undefined;
-  export let loading = false;
-  export let newCount: number | undefined = undefined;
-  export let big = false;
-  export let delayed = false;
-  export let taskFailure = false;
+  interface Props {
+    delay?: number;
+    status?: Status;
+    count?: number | undefined;
+    loading?: boolean;
+    newCount?: number | undefined;
+    big?: boolean;
+    delayed?: boolean;
+    taskFailure?: boolean;
+    'test-id'?: string;
+  }
+
+  let {
+    delay = 0,
+    status = 'Running',
+    count = undefined,
+    loading = false,
+    newCount = undefined,
+    big = false,
+    delayed = false,
+    taskFailure = false,
+    'test-id': testId,
+  }: Props = $props();
 
   const label: Record<Status, string> = {
     Running: translate('workflows.running'),
@@ -83,11 +98,13 @@
     },
   );
 
-  $: tooltipText = delayed
-    ? translate('workflows.delayed')
-    : taskFailure
-      ? translate('workflows.task-failure')
-      : '';
+  const tooltipText = $derived(
+    delayed
+      ? translate('workflows.delayed')
+      : taskFailure
+        ? translate('workflows.task-failure')
+        : '',
+  );
 </script>
 
 <Tooltip
@@ -101,7 +118,7 @@
       'relative flex items-center gap-0 text-center text-xs leading-4',
       big && 'text-lg',
     )}
-    data-testid={$$props['test-id'] || 'workflow-status'}
+    data-testid={testId || 'workflow-status'}
   >
     <span
       class={merge(
diff --git a/src/lib/holocene/combobox/async-test.svelte b/src/lib/holocene/combobox/async-test.svelte
index 3d500aa2c9..6f9889020d 100644
--- a/src/lib/holocene/combobox/async-test.svelte
+++ b/src/lib/holocene/combobox/async-test.svelte
@@ -3,16 +3,20 @@
 
   import Combobox from './combobox.svelte';
 
-  let syncOptions = ['one', 'two', 'three'];
-  let asyncOptions = ['asyncone', 'asynctwo', 'asyncthree'];
-  let value = '';
-  let options = syncOptions;
-  let loading = false;
+  const syncOptions = ['one', 'two', 'three'];
+  const asyncOptions = ['asyncone', 'asynctwo', 'asyncthree'];
+  let value = $state('');
+  let options = $state<string[]>(syncOptions);
+  let loading = $state(false);
   let abortController: AbortController | null = null;
 
-  $: i = 0;
+  let i = $state(0);
 
-  export let id = '';
+  interface Props {
+    id?: string;
+  }
+
+  let { id = '' }: Props = $props();
 
   function input(v: string) {
     loading = true;
diff --git a/src/lib/holocene/error.svelte b/src/lib/holocene/error.svelte
index e4d9c77672..a5c90b63ec 100644
--- a/src/lib/holocene/error.svelte
+++ b/src/lib/holocene/error.svelte
@@ -11,14 +11,18 @@
     }
   };
 
-  export let error: App.Error | NetworkError | unknown;
-  export let status = 500;
-  export let reset = reload;
-
-  let message = has(error, 'message') ? String(error.message) : '';
-  if (has(error, 'statusCode')) {
-    status = Number(error.statusCode);
+  interface Props {
+    error: App.Error | NetworkError | unknown;
+    status?: number;
+    reset?: () => void;
   }
+
+  let { error, status: statusProp = 500, reset = reload }: Props = $props();
+
+  const message = $derived(has(error, 'message') ? String(error.message) : '');
+  const status = $derived(
+    has(error, 'statusCode') ? Number(error.statusCode) : statusProp,
+  );
 </script>
 
 <section
diff --git a/src/lib/holocene/icon/icon.stories.svelte b/src/lib/holocene/icon/icon.stories.svelte
index 97c38f3df6..178d5e85f7 100644
--- a/src/lib/holocene/icon/icon.stories.svelte
+++ b/src/lib/holocene/icon/icon.stories.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
   import type { Meta } from '@storybook/svelte';
+  import type { ComponentProps } from 'svelte';
 
   import { iconNames } from './';
 
@@ -22,7 +23,7 @@
       height: { name: 'Height', control: 'number' },
       width: { name: 'Width', control: 'number' },
     },
-  } satisfies Meta<Icon>;
+  } satisfies Meta<ComponentProps<typeof Icon>>;
 </script>
 
 <script lang="ts">
diff --git a/src/lib/holocene/icon/icon.svelte b/src/lib/holocene/icon/icon.svelte
index cf792f1841..707dadd589 100644
--- a/src/lib/holocene/icon/icon.svelte
+++ b/src/lib/holocene/icon/icon.svelte
@@ -1,21 +1,27 @@
 <script lang="ts">
   import { type IconName, icons } from './paths';
 
-  export let name: IconName;
-  export let width = 16;
-  export let height = 16;
-  export let title = '';
+  interface Props {
+    name: IconName;
+    width?: number;
+    height?: number;
+    title?: string;
+    class?: string;
+    [key: string]: unknown;
+  }
 
-  $: icon = icons[name];
+  let {
+    name,
+    width = 16,
+    height = 16,
+    title = '',
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  const Icon = $derived(icons[name]);
 </script>
 
-{#if icon}
-  <svelte:component
-    this={icon}
-    {width}
-    {height}
-    {title}
-    class="shrink-0 {$$props.class}"
-    {...$$restProps}
-  />
+{#if Icon}
+  <Icon {width} {height} {title} class="shrink-0 {className}" {...rest} />
 {/if}
diff --git a/src/lib/holocene/icon/svg.svelte b/src/lib/holocene/icon/svg.svelte
index 6ac6717aaa..c3105b7127 100644
--- a/src/lib/holocene/icon/svg.svelte
+++ b/src/lib/holocene/icon/svg.svelte
@@ -1,8 +1,20 @@
 <script lang="ts">
-  export let title = '';
+  import type { SVGAttributes } from 'svelte/elements';
 
-  export let width = 16;
-  export let height = 16;
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    title?: string;
+    width?: number;
+    height?: number;
+  }
+
+  let {
+    title = '',
+    width = 16,
+    height = 16,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
 </script>
 
 <svg
@@ -11,11 +23,11 @@
   viewBox="0 0 24 24"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  class={$$props.class}
+  class={className}
   role="img"
   aria-hidden={!title}
-  {...$$restProps}
+  {...rest}
 >
   <title>{title}</title>
-  <slot />
+  {@render children?.()}
 </svg>
diff --git a/src/lib/holocene/keyboard-shortcut/arrow-down.svelte b/src/lib/holocene/keyboard-shortcut/arrow-down.svelte
index a9683d068f..3d9e556eac 100644
--- a/src/lib/holocene/keyboard-shortcut/arrow-down.svelte
+++ b/src/lib/holocene/keyboard-shortcut/arrow-down.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let title: string;
+  interface Props {
+    title: string;
+  }
+
+  let { title }: Props = $props();
 </script>
 
 <svg
diff --git a/src/lib/holocene/keyboard-shortcut/arrow-left.svelte b/src/lib/holocene/keyboard-shortcut/arrow-left.svelte
index a4237eda61..59c6fe46ce 100644
--- a/src/lib/holocene/keyboard-shortcut/arrow-left.svelte
+++ b/src/lib/holocene/keyboard-shortcut/arrow-left.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let title: string;
+  interface Props {
+    title: string;
+  }
+
+  let { title }: Props = $props();
 </script>
 
 <svg
diff --git a/src/lib/holocene/keyboard-shortcut/arrow-right.svelte b/src/lib/holocene/keyboard-shortcut/arrow-right.svelte
index 9710abe9ff..9d86736c99 100644
--- a/src/lib/holocene/keyboard-shortcut/arrow-right.svelte
+++ b/src/lib/holocene/keyboard-shortcut/arrow-right.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let title: string;
+  interface Props {
+    title: string;
+  }
+
+  let { title }: Props = $props();
 </script>
 
 <svg
diff --git a/src/lib/holocene/keyboard-shortcut/arrow-up.svelte b/src/lib/holocene/keyboard-shortcut/arrow-up.svelte
index 217568e624..bd0aa479ae 100644
--- a/src/lib/holocene/keyboard-shortcut/arrow-up.svelte
+++ b/src/lib/holocene/keyboard-shortcut/arrow-up.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let title: string;
+  interface Props {
+    title: string;
+  }
+
+  let { title }: Props = $props();
 </script>
 
 <svg
diff --git a/src/lib/holocene/keyboard-shortcut/shortcut.svelte b/src/lib/holocene/keyboard-shortcut/shortcut.svelte
index a1b9004b4b..b440f4a08b 100644
--- a/src/lib/holocene/keyboard-shortcut/shortcut.svelte
+++ b/src/lib/holocene/keyboard-shortcut/shortcut.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Tooltip from '$lib/holocene/tooltip.svelte';
 
   import ArrowDown from './arrow-down.svelte';
@@ -6,9 +8,14 @@
   import ArrowRight from './arrow-right.svelte';
   import ArrowUp from './arrow-up.svelte';
 
-  export let tooltipText = '';
-  export let arrow: 'up' | 'down' | 'left' | 'right' | undefined = undefined;
-  export let title: string;
+  interface Props {
+    tooltipText?: string;
+    arrow?: 'up' | 'down' | 'left' | 'right';
+    title: string;
+    children?: Snippet;
+  }
+
+  let { tooltipText = '', arrow, title, children }: Props = $props();
 
   const ArrowComponents = {
     up: ArrowUp,
@@ -16,14 +23,16 @@
     left: ArrowLeft,
     right: ArrowRight,
   };
+
+  const ArrowComponent = $derived(arrow ? ArrowComponents[arrow] : null);
 </script>
 
 <Tooltip text={tooltipText} hide={!tooltipText} top>
   <kbd class="shortcut">
-    {#if arrow}
-      <svelte:component this={ArrowComponents[arrow]} {title} />
+    {#if ArrowComponent}
+      <ArrowComponent {title} />
     {:else}
-      <slot />
+      {@render children?.()}
     {/if}
   </kbd>
 </Tooltip>
diff --git a/src/lib/holocene/label.stories.svelte b/src/lib/holocene/label.stories.svelte
index dcb1ad3d57..9e6ec02be4 100644
--- a/src/lib/holocene/label.stories.svelte
+++ b/src/lib/holocene/label.stories.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   import { Story, Template } from '@storybook/addon-svelte-csf';
   import type { Meta } from '@storybook/svelte';
+  import type { ComponentProps } from 'svelte';
 
   import Label from '$lib/holocene/label.svelte';
 
@@ -23,7 +24,7 @@
         table: { category: 'Accessibility' },
       },
     },
-  } satisfies Meta<Label>;
+  } satisfies Meta<ComponentProps<typeof Label>>;
 </script>
 
 <Template let:args>
diff --git a/src/lib/holocene/label.svelte b/src/lib/holocene/label.svelte
index 96ae0c1723..12f6b0cf3c 100644
--- a/src/lib/holocene/label.svelte
+++ b/src/lib/holocene/label.svelte
@@ -1,24 +1,28 @@
 <script lang="ts">
   import type { HTMLLabelAttributes } from 'svelte/elements';
 
+  import type { Snippet } from 'svelte';
   import { twMerge as merge } from 'tailwind-merge';
 
-  type $$Props = HTMLLabelAttributes & {
+  interface Props extends HTMLLabelAttributes {
     label?: string;
     hidden?: boolean;
     required?: boolean;
     disabled?: boolean;
     'data-testid'?: string;
     class?: string;
-  };
+    children?: Snippet;
+  }
 
-  export let label = '';
-  export let hidden = false;
-  export let required = false;
-  export let disabled = false;
-
-  let className = '';
-  export { className as class };
+  let {
+    label = '',
+    hidden = false,
+    required = false,
+    disabled = false,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
 </script>
 
 <label
@@ -38,9 +42,13 @@
     className,
   )}
   data-required={required}
-  {...$$restProps}
+  {...rest}
 >
-  <slot><span>{label}</span></slot>
+  {#if children}
+    {@render children()}
+  {:else}
+    <span>{label}</span>
+  {/if}
   {#if required}
     <span class="h-1.5 w-1.5 rounded-full bg-interactive-error"></span>
   {/if}
diff --git a/src/lib/holocene/logo.svelte b/src/lib/holocene/logo.svelte
index a3ac70b269..5969d31a42 100644
--- a/src/lib/holocene/logo.svelte
+++ b/src/lib/holocene/logo.svelte
@@ -3,13 +3,18 @@
 
   import { twMerge as merge } from 'tailwind-merge';
 
-  interface $$Props extends SVGAttributes<SVGElement> {
+  interface Props extends SVGAttributes<SVGElement> {
     width?: number;
     height?: number;
+    class?: string;
   }
 
-  export let width = 100;
-  export let height = 100;
+  let {
+    width = 100,
+    height = 100,
+    class: className = '',
+    ...rest
+  }: Props = $props();
 </script>
 
 <svg
@@ -18,7 +23,8 @@
   viewBox="0 0 100 100"
   {width}
   {height}
-  class={merge('fill-current', $$restProps.class)}
+  class={merge('fill-current', className)}
+  {...rest}
 >
   <path
     fill-rule="evenodd"
diff --git a/src/lib/holocene/tab/tab-panel.svelte b/src/lib/holocene/tab/tab-panel.svelte
index ae3d659078..b145ff3601 100644
--- a/src/lib/holocene/tab/tab-panel.svelte
+++ b/src/lib/holocene/tab/tab-panel.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
+  import type { Snippet } from 'svelte';
   import { getContext } from 'svelte';
 
   import { type TabContext, TABS } from './tabs.svelte';
 
-  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+  interface Props extends HTMLAttributes<HTMLDivElement> {
     id: string;
     tabId: string;
+    children?: Snippet;
   }
 
-  export let id: string;
-  export let tabId: string;
+  let { id, tabId, children, ...rest }: Props = $props();
   const { registerPanel, activePanel } = getContext<TabContext>(TABS);
-  $: active = $activePanel === id;
-  registerPanel(id);
+  const initialId = id;
+  const active = $derived($activePanel === initialId);
+  registerPanel(initialId);
 </script>
 
 <div
@@ -24,7 +26,7 @@
   aria-labelledby={tabId}
   tabindex="0"
   role="tabpanel"
-  {...$$restProps}
+  {...rest}
 >
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/src/lib/holocene/user-menu-mobile.svelte b/src/lib/holocene/user-menu-mobile.svelte
index a6fa6887d4..64994e0934 100644
--- a/src/lib/holocene/user-menu-mobile.svelte
+++ b/src/lib/holocene/user-menu-mobile.svelte
@@ -3,7 +3,11 @@
   import { translate } from '$lib/i18n/translate';
   import { authUser } from '$lib/stores/auth-user';
 
-  export let logout: () => void;
+  interface Props {
+    logout: () => void;
+  }
+
+  let { logout }: Props = $props();
 </script>
 
 {#if $authUser.accessToken}
diff --git a/src/lib/i18n/translate.svelte b/src/lib/i18n/translate.svelte
index 819425c4c6..c49f013f46 100644
--- a/src/lib/i18n/translate.svelte
+++ b/src/lib/i18n/translate.svelte
@@ -1,22 +1,28 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import type { I18nKey, I18nReplace } from '.';
   import { translate } from './translate';
 
-  interface $$Props {
+  interface Props {
     key: I18nKey;
     count?: number;
     replace?: I18nReplace;
+    children?: Snippet;
   }
 
-  export let key: I18nKey;
-  export let count: number = undefined;
-  export let replace: I18nReplace = undefined;
+  let {
+    key,
+    count = undefined,
+    replace = undefined,
+    children,
+  }: Props = $props();
 
-  $: translated = translate(key, { ...replace, count });
+  let translated = $derived(translate(key, { ...replace, count }));
 </script>
 
 {#if translated !== key}
   {translated}
 {:else}
-  <slot />
+  {@render children?.()}
 {/if}
diff --git a/src/lib/pages/batch-operations.svelte b/src/lib/pages/batch-operations.svelte
index da7fa60c80..880da486fd 100644
--- a/src/lib/pages/batch-operations.svelte
+++ b/src/lib/pages/batch-operations.svelte
@@ -6,7 +6,11 @@
   import { listBatchOperations } from '$lib/services/batch-service';
   import { inProgressBatchOperation } from '$lib/stores/batch-operations';
 
-  export let namespace: string;
+  interface Props {
+    namespace: string;
+  }
+
+  let { namespace }: Props = $props();
 </script>
 
 <h1>{translate('batch.list-page-title')}</h1>
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 0d2a07bc2a..64ab5ddec3 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -13,16 +13,18 @@
     routeForWorkflows,
   } from '$lib/utilities/route-for';
 
-  export let data: PageData;
+  interface Props {
+    data: PageData;
+  }
 
-  let { defaultNamespace } = data;
-
-  const namespaceToRedirect =
-    $lastUsedNamespace && $lastUsedNamespace !== 'default'
-      ? $lastUsedNamespace
-      : defaultNamespace;
+  let { data }: Props = $props();
 
   onMount(async () => {
+    const namespaceToRedirect =
+      $lastUsedNamespace && $lastUsedNamespace !== 'default'
+        ? $lastUsedNamespace
+        : data.defaultNamespace;
+
     try {
       const { authorized } =
         await fetchWorkflowForAuthorization(namespaceToRedirect);
diff --git a/src/routes/(app)/namespaces/[namespace]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/+page.svelte
index 68e742106e..2ac0d30881 100644
--- a/src/routes/(app)/namespaces/[namespace]/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/+page.svelte
@@ -18,7 +18,11 @@
   import { temporalVersion, uiVersion } from '$lib/stores/versions';
   import { fromSecondsToDaysOrHours } from '$lib/utilities/format-time';
 
-  export let data: PageData;
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
 
   enum ArchivalState {
     ARCHIVAL_STATE_UNSPECIFIED = 0,
@@ -47,9 +51,11 @@
     return bool ? translate('common.disabled') : translate('common.enabled');
   };
 
-  $: ({ namespace, clusters } = data);
-  $: pauseEnabled =
-    !!page.data.namespace.namespaceInfo?.capabilities?.workflowPause;
+  const namespace = $derived(data.namespace);
+  const clusters = $derived(data.clusters);
+  const pauseEnabled = $derived(
+    !!page.data.namespace.namespaceInfo?.capabilities?.workflowPause,
+  );
 
   onMount(() => {
     $lastUsedNamespace = namespace?.namespaceInfo?.name;