feat: migrate dashboard to svelte 5 (#577)

* chore: migration to SvelteKit 2

* stage 1: migrate to svelte 5 and fix rerendering issues

* stage 2: fix more $: reactivity across dashboard

* fix merge conflicts

* chore: migrate code in main to svelte 5

* chore: update preventDefault

* chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte

* chore: enforce .ts across dashboard

* rename from classroomio-com to website

* stage-3: Replace carbon icon svelte with lucide icon

* update lock file

* chore: finish icon replacement

* fix: settings and setup page multiple rerender

* stage 3: More icon and rerendering fixes

* feat: checkpoint

* feat: update editor

* [not working] connect everything with ui build

* storybook + ui + dashboard all working independently

* add bg-black to +page.svelte

* feat: add editor to storybook

* chore: animate lucid icons (#590)

* v1 animations

* feat: change some course navigation icons & animate org navigation icons

* chore: change settings icon

* chore: use css instead of js for hover

* rename animations

---------

Co-authored-by: tunny17 <[email protected]>

* chore: update path to node_modules types in api tsconfig

* fix: update import path for DropdownMenu component

* fix: add rollupOptions to build configuration in vite.config.ts

* fix: remove rollupOptions from build configuration and add @floating-ui/dom dependency

* install

---------

Co-authored-by: tunny17 <[email protected]>

packages/storybook/src/atoms/tooltip/tooltip-demo.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { Tooltip, Button } from '@cio/ui';
+</script>
+
+<Tooltip.Provider>
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      <Button.Root variant="outline">Hover me</Button.Root>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      <p>Add to library</p>
+    </Tooltip.Content>
+  </Tooltip.Root>
+</Tooltip.Provider>

packages/storybook/src/atoms/tooltip/tooltip.stories.svelte

@@ -0,0 +1,130 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Tooltip, Provider, Trigger, Content } from '@cio/ui/base/tooltip';
+  import { Button } from '@cio/ui/base/button';
+  // import { Arro}
+
+  const { Story } = defineMeta({
+    title: 'Atom/Tooltip',
+    component: Provider,
+    parameters: {
+      layout: 'centered'
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Provider>
+      <Tooltip>
+        <Trigger>
+          <Button variant="outline">Hover me</Button>
+        </Trigger>
+        <Content>
+          <p>Add to library</p>
+        </Content>
+      </Tooltip>
+    </Provider>
+  {/snippet}
+</Story>
+
+<Story name="With Arrow">
+  {#snippet template()}
+    <Provider>
+      <Tooltip>
+        <Trigger>
+          <Button>Hover for tooltip</Button>
+        </Trigger>
+        <Content>
+          <p>This tooltip has an arrow pointing to the trigger</p>
+          <!-- <Arrow /> -->
+          =>
+        </Content>
+      </Tooltip>
+    </Provider>
+  {/snippet}
+</Story>
+
+<Story name="Simple Text">
+  {#snippet template()}
+    <Provider>
+      <Tooltip>
+        <Trigger>
+          <Button variant="ghost" size="sm">❓</Button>
+        </Trigger>
+        <Content>
+          <p>Help information</p>
+        </Content>
+      </Tooltip>
+    </Provider>
+  {/snippet}
+</Story>
+
+<Story name="Multiple Tooltips">
+  {#snippet template()}
+    <Provider>
+      <div class="flex gap-4">
+        <Tooltip>
+          <Trigger>
+            <Button variant="outline">Save</Button>
+          </Trigger>
+          <Content>
+            <p>Save your work (Ctrl+S)</p>
+          </Content>
+        </Tooltip>
+
+        <Tooltip>
+          <Trigger>
+            <Button variant="outline">Edit</Button>
+          </Trigger>
+          <Content>
+            <p>Edit this item</p>
+          </Content>
+        </Tooltip>
+
+        <Tooltip>
+          <Trigger>
+            <Button variant="destructive">Delete</Button>
+          </Trigger>
+          <Content>
+            <p>Permanently delete this item</p>
+          </Content>
+        </Tooltip>
+      </div>
+    </Provider>
+  {/snippet}
+</Story>
+
+<Story name="Icon Button">
+  {#snippet template()}
+    <Provider>
+      <Tooltip>
+        <Trigger>
+          <Button variant="ghost" size="sm">🔧</Button>
+        </Trigger>
+        <Content>
+          <p>Settings</p>
+        </Content>
+      </Tooltip>
+    </Provider>
+  {/snippet}
+</Story>
+
+<Story name="Long Content">
+  {#snippet template()}
+    <Provider>
+      <Tooltip>
+        <Trigger>
+          <Button variant="outline">Info</Button>
+        </Trigger>
+        <Content class="max-w-xs">
+          <p>
+            This is a longer tooltip with more detailed information that might span multiple lines to provide
+            comprehensive context about the feature or action.
+          </p>
+        </Content>
+      </Tooltip>
+    </Provider>
+  {/snippet}
+</Story>