App: Add TS type information

src/lib/components/Button.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { popup, type PopupSettings } from "@skeletonlabs/skeleton";
 
   const is_at_path = (path: string): boolean => {
     const pathname: string = $page.url.pathname;
@@ -7,40 +10,66 @@
     return pathname === path;
   };
 
+  interface ButtonProps extends HTMLButtonAttributes {
+    children: Snippet;
+
+    /** The main color variant, e.g. "primary" or "secondary". */
+    color?: string | undefined;
+
+    /** Set the button type to "submit" (otherwise "button"). Only if "href" is undefined. */
+    submit?: boolean;
+
+    /** Make the button act as a link. */
+    href?: string | undefined;
+
+    /** Add the "w-full" class to the button. */
+    fullwidth?: boolean;
+
+    /** Enable the button's ":hover" state manually. */
+    activate?: boolean;
+
+    /** Enable the button's ":hover" state if the current URL matches the "href". Only if "href" is defined. */
+    activate_href?: boolean;
+
+    /** The PopupSettings to trigger on click. Only if "href" is undefined. */
+    trigger_popup?: PopupSettings;
+  }
+
   let {
     children,
     color = undefined,
     submit = false,
     href = undefined,
     fullwidth = false,
+    activate = false,
     activate_href = false,
-    activate_button = false,
+    trigger_popup = { event: "click", target: "invalid" },
     ...restProps
-  } = $props();
+  }: ButtonProps = $props();
 </script>
 
 {#if href}
-  <a
-    {href}
-    class="select-none {color ? `btn px-2 variant-filled-${color}` : ''} {fullwidth
-      ? 'w-full'
-      : 'w-auto'}
-    {activate_href && is_at_path(href) ? 'btn-hover' : ''}"
-    draggable="false"
-    {...restProps}
-  >
-    {@render children()}
-  </a>
+  <!-- HACK: Make the button act as a link using a form -->
+  <form action={href} class="contents">
+    <button
+      type="submit"
+      class="btn m-0 select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {fullwidth
+        ? 'w-full'
+        : 'w-auto'} {activate ? 'btn-hover' : ''} {activate_href && is_at_path(href)
+        ? 'btn-hover'
+        : ''}"
+      draggable="false"
+      {...restProps}>{@render children()}</button
+    >
+  </form>
 {:else}
   <button
     type={submit ? "submit" : "button"}
-    class="select-none {color ? `btn px-2 variant-filled-${color}` : ''} {fullwidth
+    class="btn select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {fullwidth
       ? 'w-full'
-      : 'w-auto'}
-    {activate_button ? 'btn-hover' : ''}"
+      : 'w-auto'} {activate ? 'btn-hover' : ''}"
     draggable="false"
-    {...restProps}
+    use:popup={trigger_popup}
+    {...restProps}>{@render children()}</button
   >
-    {@render children()}
-  </button>
 {/if}

src/lib/components/Card.svelte

@@ -1,7 +1,45 @@
 <script lang="ts">
-  let { children, fullwidth = false, ...restProps } = $props();
+  import type { Snippet } from "svelte";
+
+  interface CardProps {
+    children: Snippet;
+
+    /** The URL for a possible header image. Leave undefined for no header image. Set to empty string for an image not yet loaded. */
+    imgsrc?: string | undefined;
+
+    /** The id of the header image element for JS access. */
+    imgid?: string | undefined;
+
+    /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
+    imghidden?: boolean;
+
+    /** Enable to give the card the "w-full" class. */
+    fullwidth?: boolean;
+  }
+
+  let {
+    children,
+    imgsrc = undefined,
+    imgid = undefined,
+    imghidden = false,
+    fullwidth = false,
+    ...restProps
+  }: CardProps = $props();
 </script>
 
-<div class="card bg-white p-2 shadow {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
-  {@render children()}
+<div class="card overflow-hidden bg-white shadow {fullwidth ? 'w-full' : 'w-auto'}">
+  <!-- Allow empty strings for images that only appear after user action -->
+  {#if imgsrc !== undefined}
+    <img
+      id={imgid}
+      src={imgsrc}
+      alt="Card header"
+      draggable="false"
+      class="select-none shadow"
+      hidden={imghidden}
+    />
+  {/if}
+  <div class="p-2" {...restProps}>
+    {@render children()}
+  </div>
 </div>

src/lib/components/Input.svelte

@@ -1,9 +1,25 @@
 <script lang="ts">
-  let { children, type = "text", ...restProps } = $props();
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface InputProps extends HTMLInputAttributes {
+    children: Snippet;
+
+    /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
+    labelwidth?: string;
+
+    /** The type of the input element, e.g. "text". */
+    type?: string;
+  }
+
+  let { children, labelwidth = "auto", type = "text", ...restProps }: InputProps = $props();
 </script>
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
-  <div class="input-group-shim select-none text-nowrap text-neutral-900">
+  <div
+    class="input-group-shim select-none text-nowrap text-neutral-900"
+    style="width: {labelwidth};"
+  >
     {@render children()}
   </div>
   <input {type} {...restProps} />