chore: ai, public course and other ui improvements

packages/ui/src/base/card/card.svelte

@@ -14,7 +14,7 @@
   bind:this={ref}
   data-slot="card"
   class={cn(
-    'ui:bg-card ui:text-card-foreground ui:flex ui:flex-col ui:gap-6 ui:rounded-xl ui:border ui:py-6 ui:shadow-sm',
+    'ui:bg-card ui:text-card-foreground ui:flex ui:flex-col ui:gap-6 ui:rounded-lg ui:border ui:py-6',
     className
   )}
   {...restProps}

packages/ui/src/base/number-badge/index.ts

@@ -0,0 +1 @@
+export { default as NumberBadge } from './number-badge.svelte';

packages/ui/src/base/number-badge/number-badge.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import LockIcon from '@lucide/svelte/icons/lock';
+  import { cn } from '../../tools';
+
+  interface Props {
+    /** 1-indexed value shown when not `locked`. */
+    number: number;
+    /** When true, uses primary styling (e.g. active sidebar row or current question). */
+    active?: boolean;
+    /** Locked badges show a lock icon and muted treatment. */
+    locked?: boolean;
+    class?: string;
+  }
+
+  let { number, active = false, locked = false, class: className }: Props = $props();
+
+  const badgeClass = $derived(
+    cn(
+      'ui:inline-flex ui:items-center ui:justify-center ui:shrink-0',
+      'ui:size-7 ui:rounded-md ui:text-xs ui:font-medium ui:tabular-nums ui:tracking-tight',
+      'ui:transition-colors',
+      active
+        ? 'ui:bg-primary ui:text-primary-foreground'
+        : 'ui:border ui:bg-muted ui:text-muted-foreground ui:group-hover:bg-muted-foreground/15 ui:group-hover:text-foreground',
+      className
+    )
+  );
+</script>
+
+<span class={badgeClass} aria-hidden="true">
+  {#if locked}
+    <LockIcon class="ui:size-3.5" />
+  {:else}
+    {number}
+  {/if}
+</span>

packages/ui/src/base/page/page-header.svelte

@@ -18,7 +18,7 @@
   data-slot="page-header"
   class={cn(
     'ui:flex ui:my-4 ui:py-2 ui:flex-col',
-    isSticky && 'ui:sticky ui:top-13 ui:z-10 ui:bg-background',
+    isSticky && 'ui:sticky ui:top-14 ui:z-10 ui:bg-background',
     className
   )}
   {...restProps}

packages/ui/src/base/textarea/textarea.svelte

@@ -15,7 +15,7 @@
   bind:this={ref}
   data-slot={dataSlot}
   class={cn(
-    'ui:border-input ui:placeholder:text-muted-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:aria-invalid:ring-destructive/20 ui:dark:aria-invalid:ring-destructive/40 ui:aria-invalid:border-destructive ui:dark:bg-input/30 ui:field-sizing-content ui:shadow-xs ui:flex ui:min-h-16 ui:w-full ui:rounded-md ui:border ui:bg-transparent ui:px-3 ui:py-2 ui:text-base ui:outline-none ui:transition-[color,box-shadow] ui:focus-visible:ring-[3px] ui:disabled:cursor-not-allowed ui:disabled:opacity-50 ui:md:text-sm',
+    'ui:border-input ui:placeholder:text-muted-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:aria-invalid:ring-destructive/20 ui:dark:aria-invalid:ring-destructive/40 ui:aria-invalid:border-destructive ui:dark:bg-input/30 ui:field-sizing-content ui:flex ui:min-h-16 ui:w-full ui:rounded-md ui:border ui:bg-transparent ui:px-3 ui:py-2 ui:text-base ui:outline-none ui:transition-[color,box-shadow] ui:focus-visible:ring-[3px] ui:disabled:cursor-not-allowed ui:disabled:opacity-50 ui:md:text-sm',
     className
   )}
   bind:value

packages/ui/src/base/toggle-group/toggle-group-item.svelte

@@ -2,7 +2,7 @@
   import { type VariantProps, tv } from 'tailwind-variants';
 
   export const toggleGroupItemVariants = tv({
-    base: "ui:hover:bg-muted ui:hover:text-muted-foreground ui:data-[state=on]:bg-accent ui:data-[state=on]:text-accent-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:aria-invalid:ring-destructive/20 ui:dark:aria-invalid:ring-destructive/40 ui:aria-invalid:border-destructive ui:inline-flex ui:items-center ui:justify-center ui:gap-2 ui:rounded-md ui:text-sm ui:font-medium ui:whitespace-nowrap ui:transition-[color,box-shadow] ui:outline-none ui:focus-visible:ring-[3px] ui:disabled:pointer-events-none ui:disabled:opacity-50 ui:[&_svg]:pointer-events-none ui:[&_svg]:shrink-0 ui:[&_svg:not([class*='ui:size-'])]:size-4",
+    base: "ui:hover:bg-muted ui:hover:text-muted-foreground ui:data-[state=on]:bg-primary ui:data-[state=on]:text-primary-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:aria-invalid:ring-destructive/20 ui:dark:aria-invalid:ring-destructive/40 ui:aria-invalid:border-destructive ui:inline-flex ui:items-center ui:justify-center ui:gap-2 ui:rounded-md ui:text-sm ui:font-medium ui:whitespace-nowrap ui:transition-[color,box-shadow] ui:outline-none ui:focus-visible:ring-[3px] ui:disabled:pointer-events-none ui:disabled:opacity-50 ui:[&_svg]:pointer-events-none ui:[&_svg]:shrink-0 ui:[&_svg:not([class*='ui:size-'])]:size-4",
     variants: {
       variant: {
         default: 'ui:bg-transparent',