🛠️ Refactor svgr endpoint, disable optimization with `optimize` property

📦 Add Kilo Code logo

Dockerfile

@@ -15,7 +15,6 @@ RUN pnpm install --frozen-lockfile
 FROM base AS builder
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ENV PUBLIC_SVGL_VERSION=beta
 RUN pnpm run check:size
 RUN pnpm run build:prod
 
@@ -30,7 +29,6 @@ COPY package.json ./
 
 # Set production environment
 ENV NODE_ENV=production
-ENV PUBLIC_SVGL_VERSION=beta
 
 # Expose port
 EXPOSE 3000

README.md

@@ -1,6 +1,6 @@
 <div align="center">
 <a href="https://svgl.app">
-<img src="static/images/readme.png">
+<img src="static/images/screenshot_dark.png">
 </a>
 <p></p>
 </div>

content-collections.ts

@@ -48,6 +48,8 @@ const docs = defineCollection({
       createdAt: new Date(birthtimeMs),
       updatedAt: new Date(mtimeMs),
       tableOfContents,
+      rawUrl: `https://svgl.app/api/docs/${document._meta.path}`,
+      documentUrl: `https://svgl.app/docs/${document._meta.path}`,
     };
   },
 });

src/app.html

@@ -19,7 +19,7 @@
       href="%sveltekit.assets%/images/svgl_ico.ico"
     />
 
-    <!-- OG -->
+    <!-- OG Images -->
     <meta property="og:type" content="website" />
     <meta property="og:title" content="SVGL" />
     <meta
@@ -29,7 +29,7 @@
     <meta property="og:url" content="https://svgl.app" />
     <meta
       property="og:image"
-      content="https://svgl.app/images/screenshot.png"
+      content="https://svgl.app/images/screenshot_dark.png"
     />
 
     <!-- Twitter -->
@@ -42,9 +42,32 @@
     <meta name="twitter:creator" content="@pheralb_" />
     <meta
       name="twitter:image"
-      content="https://svgl.app/images/screenshot.png"
+      content="https://svgl.app/images/screenshot_dark.png"
     />
 
+    <!-- Preload Fonts -->
+    <link
+      rel="preload"
+      href="%sveltekit.assets%/fonts/Geist.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="%sveltekit.assets%/fonts/GeistMono.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
+    <!-- Analytics -->
+    <script
+      defer
+      src="https://umami.pheralb.dev/script.js"
+      data-website-id="c0310f77-a87c-4c80-ba04-c6767cf94507"
+    ></script>
+
     <!-- Title -->
     <title>A beautiful library with SVG logos - SVGL</title>
     %sveltekit.head%

src/components/container.svelte

@@ -6,6 +6,6 @@
     $props();
 </script>
 
-<div class={cn("container mx-auto px-4", className)}>
+<div class={cn("container mx-auto px-6 lg:px-4", className)}>
   {@render children?.()}
 </div>

src/components/documentSettings.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+
+  import { cn } from "@/utils/cn";
+  import { clipboard } from "@/utils/clipboard";
+
+  import * as DropdownMenu from "@/components/ui/dropdown-menu";
+  import { Button, buttonVariants } from "@/components/ui/button";
+
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import Openai from "@/components/logos/openai.svelte";
+  import Claude from "@/components/logos/claude.svelte";
+  import CheckCheck from "@lucide/svelte/icons/check-check";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
+  import Markdown from "./logos/markdown.svelte";
+
+  interface DocumentSettingsProps {
+    documentContent: string;
+    documentUrl: string;
+    rawUrl: string;
+  }
+
+  let isCopied = $state<boolean>(false);
+  let settingsOpen = $state<boolean>(false);
+  let { documentContent, documentUrl, rawUrl }: DocumentSettingsProps =
+    $props();
+
+  const handleCopyPage = () => {
+    clipboard(documentContent);
+    isCopied = true;
+    setTimeout(() => {
+      isCopied = false;
+    }, 2000);
+  };
+
+  interface AiOption {
+    name: string;
+    href: string;
+    icon: Component;
+  }
+
+  const aiPrompt = `The following is a documentation page from SVGL, a web app with SVG logos: ${documentUrl}. Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
+
+  const aiOptions: AiOption[] = [
+    {
+      name: "ChatGPT",
+      href: `https://chatgpt.com/?q=${encodeURIComponent(aiPrompt)}`,
+      icon: Openai,
+    },
+    {
+      name: "Claude",
+      href: `https://claude.ai/new?q=${encodeURIComponent(aiPrompt)}`,
+      icon: Claude,
+    },
+  ];
+</script>
+
+{#snippet LinkItem({ href, icon, name }: AiOption)}
+  <DropdownMenu.Item>
+    {#snippet child({ props })}
+      {@const Icon = icon}
+      <a {href} target="_blank" {...props}>
+        <div class="flex items-center space-x-2">
+          <Icon size={14} />
+          <span>{name}</span>
+          <ArrowUpRight size={12} class="opacity-50" />
+        </div>
+      </a>
+    {/snippet}
+  </DropdownMenu.Item>
+{/snippet}
+
+<div class="flex items-center">
+  <Button
+    size="sm"
+    variant="outline"
+    class="rounded-r-none border-r-0 px-2 md:px-3"
+    onclick={handleCopyPage}
+  >
+    {#if isCopied}
+      <CheckCheck size={14} />
+    {:else}
+      <CopyIcon size={14} />
+    {/if}
+    <span class="hidden md:block">Copy Page</span>
+  </Button>
+  <DropdownMenu.Root bind:open={settingsOpen}>
+    <DropdownMenu.Trigger
+      class={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "rounded-l-none px-2",
+      )}
+    >
+      <ChevronDown
+        size={14}
+        class={cn(
+          "transition-transform duration-200",
+          settingsOpen ? "rotate-180" : "rotate-0",
+        )}
+      />
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content side="bottom" align="end" sideOffset={6}>
+      <DropdownMenu.Group>
+        {@render LinkItem({
+          href: rawUrl,
+          icon: Markdown,
+          name: "View as Markdown",
+        })}
+        {#each aiOptions as option (option.name)}
+          {@render LinkItem(option)}
+        {/each}
+      </DropdownMenu.Group>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+</div>

src/components/extension.svelte

@@ -26,7 +26,6 @@
       <img
         src={data.image}
         alt={data.name}
-        loading="lazy"
         class="h-8 w-8 rounded-md object-contain"
       />
       <a

src/components/githubLink.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { cn } from "@/utils/cn";
+  import { globals } from "@/globals";
+  import { buttonVariants } from "@/components/ui/button";
+  import Github from "@/components/logos/github.svelte";
+
+  async function getGithubStarCount() {
+    try {
+      const res = await fetch(globals.apiGithub.url);
+      const data = await res.json();
+      return data.repo?.stars ?? globals.apiGithub.fallback;
+    } catch (error) {
+      console.error(error);
+      return globals.apiGithub.fallback;
+    }
+  }
+
+  let stars = $state(globals.apiGithub.fallback);
+
+  onMount(async () => {
+    stars = await getGithubStarCount();
+  });
+</script>
+
+<a
+  target="_blank"
+  title="pheralb/svgl Repository"
+  href={globals.githubUrl}
+  class={cn(
+    buttonVariants({ variant: "ghost" }),
+    "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
+  )}
+>
+  <Github size={20} />
+  <span class="text-neutral-600 dark:text-neutral-400">
+    {stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : stars.toLocaleString()}
+  </span>
+</a>

src/components/grid.svelte

@@ -13,7 +13,7 @@
 
 <div
   class={cn(
-    "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5",
+    "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
     columns === "4" && "lg:grid-cols-3 xl:grid-cols-4",
     columns === "3" && "lg:grid-cols-2 xl:grid-cols-3",
     columns === "2" && "md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2",

src/components/layout/header.svelte

@@ -5,36 +5,29 @@
   import ModeToggle from "@/components/modeToggle.svelte";
 
   import Svgl from "@/components/logos/svgl.svelte";
-  import Github from "@/components/logos/github.svelte";
   import Twitter from "@/components/logos/twitter.svelte";
 
   import { Separator } from "@/components/ui/separator";
   import { buttonVariants } from "@/components/ui/button";
-  import SvglVersion from "@/components/svglVersion.svelte";
   import SendIcon from "@/components/ui/moving-icons/send-icon.svelte";
   import SidebarMobileMenu from "@/components/layout/sidebarMobileMenu.svelte";
-
+  import SettingsMenu from "@/components/settings/settingsMenu.svelte";
-  interface HeaderProps {
+  import GithubLink from "@/components/githubLink.svelte";
-    githubStars?: number;
-  }
-
-  let { githubStars }: HeaderProps = $props();
 </script>
 
 <header
-  class="sticky top-0 w-full bg-neutral-100 px-4 py-4 dark:bg-neutral-950"
+  class="sticky top-0 z-50 w-full bg-neutral-100 px-2 py-3 md:px-4 md:py-4 dark:bg-neutral-950"
 >
   <nav class="flex w-full items-center justify-between">
-    <div class="flex items-center space-x-3">
+    <div class="flex items-center space-x-2">
       <SidebarMobileMenu className="md:hidden" />
       <a
         href="/"
-        class="flex items-center space-x-2.5 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
+        class="flex items-center space-x-2 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
       >
         <Svgl size={28} />
-        <h2 class="font-onest text-xl font-medium tracking-tight">svgl</h2>
+        <h2 class="text-xl font-medium tracking-tight">svgl</h2>
       </a>
-      <SvglVersion className="hidden md:block" />
     </div>
     <div class="flex h-5 items-center space-x-2.5">
       <div class="flex items-center space-x-1.5">
@@ -55,39 +48,11 @@
             "hover:bg-neutral-200 dark:hover:bg-neutral-800",
           )}
         />
+        <SettingsMenu />
       </div>
       <div class="hidden h-5 items-center space-x-2 md:flex">
         <Separator orientation="vertical" />
-        {#if githubStars !== undefined}
+        <GithubLink />
-          <a
-            target="_blank"
-            title="GitHub Repository"
-            href={globals.githubUrl}
-            class={cn(
-              buttonVariants({ variant: "ghost" }),
-              "w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
-            )}
-          >
-            <Github size={20} />
-            <span class="text-neutral-600 dark:text-neutral-400">
-              {githubStars >= 1000
-                ? `${(githubStars / 1000).toFixed(1)}k`
-                : githubStars.toLocaleString()}
-            </span>
-          </a>
-        {:else}
-          <a
-            target="_blank"
-            title="GitHub Repository"
-            href={globals.githubUrl}
-            class={cn(
-              buttonVariants({ variant: "ghost", size: "icon" }),
-              "hover:bg-neutral-200 dark:hover:bg-neutral-800",
-            )}
-          >
-            <Github size={20} />
-          </a>
-        {/if}
         <Separator orientation="vertical" />
         <a
           target="_blank"

src/components/layout/showSidebarLinks.svelte

@@ -14,6 +14,7 @@
   import Cloud from "@lucide/svelte/icons/cloud";
   import Submit from "@lucide/svelte/icons/send";
   import Github from "@/components/logos/github.svelte";
+  import Shadcn from "@/components/logos/shadcn.svelte";
 
   let favorites = $derived($favoritesStore);
   let favoritesCount = $derived(favoritesStore.getCount(favorites));
@@ -53,7 +54,7 @@
   {/if}
 </a>
 <a
-  href="/api"
+  href="/docs/api"
   data-sveltekit-preload-data
   class={cn(
     sidebarItemClasses.base,
@@ -64,6 +65,19 @@
   <Cloud size={16} />
   <p class="truncate">API</p>
 </a>
+<a
+  href="/docs/shadcn-ui"
+  data-sveltekit-preload-data
+  class={cn(
+    sidebarItemClasses.base,
+    "justify-start space-x-3",
+    String(page.url.pathname) === "/docs/shadcn-ui" &&
+      sidebarItemClasses.active,
+  )}
+>
+  <Shadcn size={14} />
+  <p class="truncate">shadcn/ui</p>
+</a>
 <a
   href="/extensions"
   data-sveltekit-preload-data

src/components/layout/sidebar.svelte

@@ -9,9 +9,9 @@
 <section>
   <aside
     class={cn(
-      "md:fixed md:left-0 md:h-[calc(100vh-5rem)]",
+      "md:fixed md:left-1 md:h-[calc(100vh-4.5rem)]",
       "overflow-x-hidden",
-      "w-54 pr-2 pl-3",
+      "w-54 pr-2 pl-2",
       "hidden flex-col space-y-3 md:flex",
       "bg-neutral-100 dark:bg-neutral-950",
     )}
@@ -24,7 +24,7 @@
       <ShowCategories />
     </nav>
   </aside>
-  <main class={cn("mb-4 px-4 md:mr-4 md:ml-56 md:px-0", "overflow-hidden")}>
+  <main class={cn("px-2 md:mr-4 md:ml-56 md:px-0", "overflow-hidden")}>
     <slot />
   </main>
 </section>

src/components/layout/sidebarBadgeClasses.ts

@@ -2,5 +2,5 @@ import { cn } from "@/utils/cn";
 
 export const sidebarBadgeClasses = cn(
   "animate-in zoom-in-20 fade-in",
-  "dark:bg-dark rounded-lg border border-neutral-200 bg-white px-2 py-0.5 font-mono text-xs font-medium text-neutral-600 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400",
+  "rounded-lg border border-neutral-300 bg-white px-2 py-0.5 font-mono text-xs font-medium text-neutral-600 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400 drop-shadow",
 );

src/components/layout/sidebarMobileMenu.svelte

@@ -30,7 +30,7 @@
     <Sheet.Header>
       <Sheet.Title class="flex items-center space-x-2">
         <Svgl size={28} />
-        <h2 class="font-onest text-xl font-medium tracking-tight">svgl</h2>
+        <h2 class="text-xl font-medium tracking-tight">svgl</h2>
       </Sheet.Title>
     </Sheet.Header>
     <nav class="flex flex-col space-y-0.5 overflow-y-auto px-3 pb-3">

src/components/logos/claude.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { IconProps } from "@/types/icon";
+
+  let props: IconProps = $props();
+</script>
+
+<svg
+  preserveAspectRatio="xMidYMid"
+  viewBox="0 0 256 257"
+  width={props.size}
+  height={props.size}
+>
+  <path
+    fill="currentColor"
+    d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"
+  />
+</svg>

src/components/logos/markdown.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { IconProps } from "@/types/icon";
+
+  let props: IconProps = $props();
+</script>
+
+<svg viewBox="0 0 208 128" fill="none" width={props.size} height={props.size}>
+  <g fill="currentColor">
+    <path
+      fill-rule="evenodd"
+      d="M15 10a5 5 0 0 0-5 5v98a5 5 0 0 0 5 5h178a5 5 0 0 0 5-5V15a5 5 0 0 0-5-5zM0 15A15 15 0 0 1 15 0h178a15 15 0 0 1 15 15v98a15 15 0 0 1-15 15H15a15 15 0 0 1-15-15z"
+      clip-rule="evenodd"
+    />
+    <path
+      d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0-30-33h20V30h20v35h20z"
+    />
+  </g>
+</svg>

src/components/logos/openai.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { IconProps } from "@/types/icon";
+
+  let props: IconProps = $props();
+</script>
+
+<svg
+  preserveAspectRatio="xMidYMid"
+  viewBox="0 0 256 260"
+  width={props.size}
+  height={props.size}
+  fill="none"
+>
+  <path
+    fill="currentColor"
+    d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
+  />
+</svg>

src/components/logos/v0.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { IconProps } from "@/types/icon";
+
+  let props: IconProps = $props();
+</script>
+
+<svg
+  stroke-linejoin="round"
+  viewBox="0 0 16 16"
+  width={props.size}
+  height={props.size}
+>
+  <path
+    clip-rule="evenodd"
+    d="M9.50321 5.5H13.2532C13.3123 5.5 13.3704 5.5041 13.4273 5.51203L9.51242 9.42692C9.50424 9.36912 9.5 9.31006 9.5 9.25L9.5 5.5L8 5.5L8 9.25C8 10.7688 9.23122 12 10.75 12H14.5V10.5L10.75 10.5C10.6899 10.5 10.6309 10.4958 10.5731 10.4876L14.4904 6.57028C14.4988 6.62897 14.5032 6.68897 14.5032 6.75V10.5H16.0032V6.75C16.0032 5.23122 14.772 4 13.2532 4H9.50321V5.5ZM0 5V5.00405L5.12525 11.5307C5.74119 12.3151 7.00106 11.8795 7.00106 10.8822V5H5.50106V9.58056L1.90404 5H0Z"
+    fill="currentColor"
+    fill-rule="evenodd"
+  />
+</svg>

src/components/pageCard.svelte

@@ -11,20 +11,24 @@
   let { children, contentCardClass, containerClass }: PageCardProps = $props();
 </script>
 
-<div
+<div class="p-[1px]">
-  class={cn(
-    "mt-2.5 overflow-hidden",
-    "rounded-md border border-neutral-200 dark:border-neutral-800",
-    "bg-white dark:bg-neutral-900/40",
-    containerClass,
-  )}
->
   <div
     class={cn(
-      "max-h-[calc(100vh-8.2rem)] min-h-[calc(100vh-8.2rem)] overflow-y-auto",
+      "overflow-hidden",
-      contentCardClass,
+      "rounded-md border border-neutral-200 dark:border-neutral-800",
+      "bg-white dark:bg-neutral-900/40",
+      "shadow-xs",
+      containerClass,
     )}
   >
-    {@render children?.()}
+    <div
+      class={cn(
+        "max-h-[calc(100vh-4.5rem)] min-h-[calc(100vh-4.5rem)]",
+        "overflow-hidden overflow-y-auto",
+        contentCardClass,
+      )}
+    >
+      {@render children?.()}
+    </div>
   </div>
 </div>

src/components/search.svelte

@@ -60,6 +60,7 @@
     autocomplete="off"
     placeholder={placeholder || "Search..."}
     oninput={onInput}
+    name="search"
     value={searchValue}
     class={cn(
       "overflow-hidden shadow-sm",

src/components/settings/options/optimizeSvgs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Switch } from "@/components/ui/switch";
+  import { settingsStore } from "@/stores/settings.store";
+
+  let optimize = $derived($settingsStore.optimizeSvgs);
+
+  const handleOptimizeChange = (checked: boolean) => {
+    settingsStore.setOptimizeSvgs(checked);
+  };
+</script>
+
+<div class="flex items-center gap-3">
+  <Switch
+    id="optimize"
+    checked={optimize}
+    onCheckedChange={handleOptimizeChange}
+  />
+  <label for="optimize">Optimize SVGs</label>
+</div>

src/components/settings/options/selectPkgManager.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
+  import type { Component } from "svelte";
   import * as Select from "@/components/ui/select";
-  import { pkgManager, type PackageManager } from "@/stores/pkgManager.store";
+  import { buttonVariants } from "@/components/ui/button";
+
+  import { settingsStore, type PackageManager } from "@/stores/settings.store";
 
   import Npm from "@/components/logos/npm.svelte";
   import Pnpm from "@/components/logos/pnpm.svelte";
   import Yarn from "@/components/logos/yarn.svelte";
   import Bun from "@/components/logos/bun.svelte";
-  import { buttonVariants } from "./ui/button";
 
-  let pkg = $derived($pkgManager);
+  let pkg = $derived($settingsStore.packageManager);
 
-  const managers = {
+  const managers: Record<PackageManager, { label: string; Icon: Component }> = {
     npm: { label: "npm", Icon: Npm },
     pnpm: { label: "pnpm", Icon: Pnpm },
     yarn: { label: "yarn", Icon: Yarn },
@@ -19,18 +21,22 @@
 </script>
 
 <Select.Root type="single" bind:value={pkg}>
-  <Select.Trigger class={buttonVariants({ variant: "outline", size: "sm" })}>
+  <Select.Trigger
+    class={buttonVariants({ variant: "outline", class: "justify-between" })}
+  >
     {#if managers[pkg]}
       {@const { Icon, label } = managers[pkg]}
-      <Icon size={14} />
+      <div class="flex items-center space-x-2.5">
-      <span>{label}</span>
+        <Icon size={16} />
+        <span>{label}</span>
+      </div>
     {/if}
   </Select.Trigger>
   <Select.Content sideOffset={1.5}>
     {#each Object.entries(managers) as [value, { Icon, label }] (value)}
       <Select.Item
         {value}
-        onclick={() => pkgManager.set(value as PackageManager)}
+        onclick={() => settingsStore.setPackageManager(value as PackageManager)}
       >
         <Icon size={16} />
         <span>{label}</span>

src/components/settings/settingsCard.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface SettingsCardProps {
+    title: string;
+    description: string;
+    children: Snippet;
+  }
+
+  let { title, description, children }: SettingsCardProps = $props();
+</script>
+
+<div class="flex flex-col">
+  <h3 class="mb-0.5 font-medium">{title}</h3>
+  <p class="mb-3 text-sm text-neutral-600 dark:text-neutral-400">
+    {description}
+  </p>
+  {@render children?.()}
+</div>

src/components/settings/settingsMenu.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { toast } from "svelte-sonner";
+
+  import { settingsStore } from "@/stores/settings.store";
+  import SettingsCard from "@/components/settings/settingsCard.svelte";
+  import SettingsIcon from "@lucide/svelte/icons/settings";
+
+  import * as Dialog from "@/components/ui/dialog";
+  import { Button, buttonVariants } from "@/components/ui/button";
+  import Separator from "@/components/ui/separator/separator.svelte";
+
+  import OptimizeSvgs from "@/components/settings/options/optimizeSvgs.svelte";
+  import SelectPkgManager from "@/components/settings/options/selectPkgManager.svelte";
+
+  const handleResetSettings = () => {
+    settingsStore.reset();
+    toast.success("Settings have been reset to default");
+  };
+</script>
+
+<Dialog.Root>
+  <Dialog.Trigger
+    title="Settings"
+    class={cn(
+      buttonVariants({ variant: "ghost", size: "icon" }),
+      "hover:bg-neutral-200 dark:hover:bg-neutral-800",
+    )}
+  >
+    <SettingsIcon size={20} strokeWidth={1.5} />
+  </Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Settings</Dialog.Title>
+      <Dialog.Description>Customize your preferences.</Dialog.Description>
+    </Dialog.Header>
+    <Separator />
+    <div class="my-3 flex flex-col space-y-8">
+      <SettingsCard
+        title="Package Manager"
+        description="Select your preferred package manager for all installations commands"
+      >
+        <SelectPkgManager />
+      </SettingsCard>
+      <SettingsCard
+        title="Copy SVGs"
+        description="Use SVGO to optimize your SVGs when you copy source code (including all frameworks)"
+      >
+        <OptimizeSvgs />
+      </SettingsCard>
+    </div>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={handleResetSettings}>
+        <span>Reset</span>
+      </Button>
+      <Dialog.Close class={buttonVariants({ variant: "default" })}>
+        <span>Save</span>
+      </Dialog.Close>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

src/components/svglVersion.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { PUBLIC_SVGL_VERSION } from "$env/static/public";
-  import Badge from "@/components/ui/badge/badge.svelte";
-
-  interface Props {
-    className?: string;
-  }
-
-  let { className }: Props = $props();
-</script>
-
-{#if PUBLIC_SVGL_VERSION}
-  <Badge variant="outline" class={className}>{PUBLIC_SVGL_VERSION}</Badge>
-{/if}

src/components/svgs/copyShadcnCommand.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-  import { buttonVariants } from "@/components/ui/button";
+  import { globals } from "@/globals";
-  import Shadcn from "@/components/logos/shadcn.svelte";
-  import SelectPkgManager from "@/components/selectPkgManager.svelte";
 
-  import { pkgManager, type PackageManager } from "@/stores/pkgManager.store";
+  import { buttonVariants } from "@/components/ui/button";
   import CodeBlock from "@/components/codeBlock.svelte";
   import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
 
+  import { settingsStore, type PackageManager } from "@/stores/settings.store";
+
+  import V0 from "@/components/logos/v0.svelte";
+  import Shadcn from "@/components/logos/shadcn.svelte";
+
   interface Props {
     svgTitle: string;
   }
@@ -20,7 +23,7 @@
     bun: "bunx shadcn@latest add",
   };
 
-  let pkg = $derived($pkgManager);
+  let pkg = $derived($settingsStore.packageManager);
   let shadcnCommand = $derived(shadcnCommands[pkg]);
   const svgFormatTitle = svgTitle
     .toLowerCase()
@@ -28,11 +31,11 @@
     .replace(/[^a-z0-9-]/g, "");
 </script>
 
-<div class="flex items-center justify-between space-x-2">
+<div class="flex w-full items-center space-x-2">
   <a
-    href="/docs/shadcn-ui"
     target="_blank"
-    class={buttonVariants({ variant: "outline", size: "sm" })}
+    href="/docs/shadcn-ui"
+    class={buttonVariants({ variant: "outline", class: "w-full" })}
   >
     <span>Setup Registry</span>
     <ArrowUpRightIcon
@@ -40,6 +43,17 @@
       class="text-neutral-500 dark:text-neutral-400"
     />
   </a>
-  <SelectPkgManager />
+  <a
+    target="_blank"
+    href={`${globals.v0Url}${globals.registryUrl}${svgFormatTitle}.json`}
+    class={buttonVariants({ variant: "outline", class: "w-full" })}
+  >
+    <span>Open with</span>
+    <V0 size={20} />
+    <ArrowUpRightIcon
+      size={14}
+      class="text-neutral-500 dark:text-neutral-400"
+    />
+  </a>
 </div>
 <CodeBlock code={`${shadcnCommand} @svgl/${svgFormatTitle}`} Icon={Shadcn} />

src/components/svgs/copySvg.svelte

@@ -6,6 +6,7 @@
   import { clipboard } from "@/utils/clipboard";
   import { getPrefixFromSvgUrl, prefixSvgIds } from "@/utils/prefixSvgIds";
   import { copyToClipboard as figmaCopyToClipboard } from "@/figma/copy-to-clipboard";
+  import { settingsStore } from "@/stores/settings.store";
 
   // Icons:
   import XIcon from "@lucide/svelte/icons/x";
@@ -15,6 +16,7 @@
 
   // UI Components:
   import { toast } from "svelte-sonner";
+  import { Separator } from "@/components/ui/separator";
   import * as Tabs from "@/components/ui/tabs";
   import { Button, buttonVariants } from "@/components/ui/button";
   import * as Popover from "@/components/ui/popover";
@@ -36,6 +38,7 @@
   import React from "@/components/logos/react.svelte";
   import Astro from "@/components/logos/astro.svelte";
   import Svelte from "@/components/logos/svelte.svelte";
+  import Shadcn from "@/components/logos/shadcn.svelte";
   import Angular from "@/components/logos/angular.svelte";
   import WebComponents from "@/components/logos/webComponents.svelte";
 
@@ -59,6 +62,7 @@
   // States:
   let optionsOpen = $state<boolean>(false);
   let isLoading = $state<boolean>(false);
+  let optimize = $derived($settingsStore.optimizeSvgs);
 
   const getSvgUrl = () => {
     let svgUrlToCopy;
@@ -105,6 +109,7 @@
 
     let content = await getSource({
       url: svgUrlToCopy,
+      optimize,
     });
 
     if (svgUrlToCopy) {
@@ -150,6 +155,7 @@
     const title = svgInfo.title.split(" ").join("");
     let content = await getSource({
       url: svgUrlToCopy,
+      optimize,
     });
 
     if (svgUrlToCopy) {
@@ -186,6 +192,7 @@
 
       let content = await getSource({
         url: svgUrlToCopy,
+        optimize,
       });
 
       if (svgUrlToCopy) {
@@ -223,6 +230,7 @@
 
       let content = await getSource({
         url: svgUrlToCopy,
+        optimize,
       });
 
       if (svgUrlToCopy) {
@@ -260,6 +268,7 @@
     const svgUrlToCopy = getSvgUrl();
     let content = await getSource({
       url: svgUrlToCopy,
+      optimize,
     });
 
     if (svgUrlToCopy) {
@@ -297,6 +306,7 @@
     const svgUrlToCopy = getSvgUrl();
     let content = await getSource({
       url: svgUrlToCopy,
+      optimize,
     });
 
     if (svgUrlToCopy) {
@@ -333,6 +343,7 @@
     const svgUrlToCopy = getSvgUrl();
     let content = await getSource({
       url: svgUrlToCopy,
+      optimize,
     });
 
     if (svgUrlToCopy) {
@@ -380,42 +391,43 @@
       <CopyIcon {size} strokeWidth={iconStroke} />
     {/if}
   </Popover.Trigger>
-  <Popover.Content class="flex w-fit flex-col space-y-2 p-4" sideOffset={2}>
+  <Popover.Content class="flex flex-col space-y-2 p-4" sideOffset={2}>
     <Tabs.Root value="source" class="flex w-full flex-col space-y-1">
-      <Tabs.List class="w-fit border-none bg-transparent">
+      <Tabs.List
-        <Tabs.Trigger value="source">Source</Tabs.Trigger>
+        class="flex h-auto w-auto flex-col space-y-2 space-x-0 border-0 md:h-9 md:flex-row md:space-y-0 md:space-x-1"
-        <Tabs.Trigger value="shadcn">shadcn/ui</Tabs.Trigger>
+      >
-        <div
+        <div class="flex items-center space-x-1">
-          class="ml-3 flex flex-row space-x-1 border-l border-neutral-200 pl-3 dark:border-neutral-800"
+          <Tabs.Trigger value="source">Source</Tabs.Trigger>
-        >
+          <Tabs.Trigger value="shadcn" title="shadcn/ui">
-          <Tabs.Trigger
+            <Shadcn size={18} />
-            class="px-2.5"
+          </Tabs.Trigger>
-            value="web-component"
+        </div>
-            title="Web Component"
+        <div class="flex items-center space-x-1">
-          >
+          <Tabs.Trigger value="web-component" title="Web Component">
             <WebComponents size={21} />
           </Tabs.Trigger>
-          <Tabs.Trigger class="px-2.5" value="react" title="React">
+          <Tabs.Trigger value="react" title="React">
             <React size={20} />
           </Tabs.Trigger>
-          <Tabs.Trigger class="px-2.5" value="vue" title="Vue">
+          <Tabs.Trigger value="vue" title="Vue">
             <Vue size={20} />
           </Tabs.Trigger>
-          <Tabs.Trigger class="px-2.5" value="svelte" title="Svelte">
+          <Tabs.Trigger value="svelte" title="Svelte">
             <Svelte size={20} />
           </Tabs.Trigger>
-          <Tabs.Trigger class="px-2.5" value="angular" title="Angular">
+          <Tabs.Trigger value="angular" title="Angular">
             <Angular size={20} />
           </Tabs.Trigger>
           <Tabs.Trigger
             value="astro"
             title="Astro"
-            class="px-2.5 text-black dark:text-white"
+            class="text-black dark:text-white"
           >
             <Astro size={21} />
           </Tabs.Trigger>
         </div>
       </Tabs.List>
+      <Separator class="block md:hidden" />
       <!-- Source -->
       <Tabs.Content value="source">
         <section class="flex flex-col space-y-2">

src/components/svgs/svgCard.svelte

@@ -46,9 +46,9 @@
 
 <div
   class={cn(
-    "group flex flex-col items-center justify-center px-3.5 py-3",
+    "flex flex-col items-center justify-center px-3.5 py-3",
     "rounded-md border border-neutral-200 dark:border-neutral-800",
-    "transition-colors duration-100 hover:bg-neutral-100/80 dark:hover:bg-neutral-800/20",
+    "hover:bg-neutral-100/80 dark:hover:bg-neutral-800/20",
   )}
 >
   <!-- Image Options -->
@@ -72,33 +72,41 @@
   <!-- Image -->
   {#if wordmarkSvg && svgInfo.wordmark !== undefined}
     <img
+      loading="lazy"
       class={cn("hidden dark:block", globalImageStyles)}
       src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: true })}
       alt={svgInfo.title}
       title={svgInfo.title}
-      loading="lazy"
+      width="140"
+      height="40"
     />
     <img
+      loading="lazy"
       class={cn("block dark:hidden", globalImageStyles)}
       src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: false })}
       alt={svgInfo.title}
       title={svgInfo.title}
-      loading="lazy"
+      width="140"
+      height="40"
     />
   {:else}
     <img
+      loading="lazy"
       class={cn("hidden dark:block", globalImageStyles)}
       src={getSvgImgUrl({ url: svgInfo.route, isDark: true })}
       alt={svgInfo.title}
       title={svgInfo.title}
-      loading="lazy"
+      width="140"
+      height="40"
     />
     <img
+      loading="lazy"
       class={cn("block dark:hidden", globalImageStyles)}
       src={getSvgImgUrl({ url: svgInfo.route, isDark: false })}
       alt={svgInfo.title}
       title={svgInfo.title}
-      loading="lazy"
+      width="140"
+      height="40"
     />
   {/if}
   <!-- Title -->
@@ -123,7 +131,6 @@
             {c}
           </a>
         {/each}
-
         {#if svgInfo.category.length > maxVisibleCategories}
           <Popover.Root
             open={moreTagsOptions}
@@ -144,11 +151,14 @@
               {/if}
             </Popover.Trigger>
             <Popover.Content class="flex w-auto flex-col space-y-2">
-              <p class="font-medium">More tags:</p>
+              <p class="font-medium">More tags</p>
               {#each svgInfo.category.slice(maxVisibleCategories) as c (c)}
                 <a
                   href={`/directory/${c.toLowerCase()}`}
-                  class={cn(buttonVariants({ variant: "outline" }), "w-full")}
+                  class={cn(
+                    buttonVariants({ variant: "outline" }),
+                    "w-full justify-start",
+                  )}
                 >
                   <TagIcon size={15} strokeWidth={1.5} />
                   <span>{c}</span>

src/components/svgs/svgNotFound.svelte

@@ -2,20 +2,41 @@
   import { globals } from "@/globals";
 
   import { buttonVariants } from "@/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
   import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
   import BoxesIcon from "@/components/ui/moving-icons/boxes-icon.svelte";
 
   interface Props {
     svgTitle: string;
+    category?: string;
+    searchGlobally?: boolean;
   }
 
-  let { svgTitle }: Props = $props();
+  let { svgTitle, category, searchGlobally }: Props = $props();
 </script>
 
-<div class="flex w-full flex-col items-center justify-center space-y-4">
+<div class="flex w-full flex-col items-center justify-center space-y-4 py-6">
   <BoxesIcon size={48} strokeWidth={1} />
-  <p>"{svgTitle}" not found</p>
+  <h2 class="text-xl font-semibold">SVG not found</h2>
+  {#if category}
+    <p class="text-neutral-600 dark:text-neutral-400">
+      "{svgTitle}" not found in "{category}" category
+    </p>
+  {:else}
+    <p class="text-neutral-600 dark:text-neutral-400">
+      "{svgTitle}" not found
+    </p>
+  {/if}
   <div class="flex items-center justify-center space-x-2">
+    {#if category || searchGlobally}
+      <a
+        href={`/?search=${svgTitle}`}
+        class={buttonVariants({ variant: "outline" })}
+      >
+        <SearchIcon size={14} strokeWidth={1.5} />
+        <span>Search globally</span>
+      </a>
+    {/if}
     <a
       target="_blank"
       href={globals.requestSvgUrl}

src/components/ui/button/button.variants.ts

@@ -7,7 +7,7 @@ const buttonVariants = tv({
       default:
         "bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/70",
       radial:
-        "bg-radial-[at_52%_-52%] **:[text-shadow:0_1px_0_var(--color-neutral-950)] border-neutral-950 from-neutral-950/70 to-neutral-950/95 text-white inset-shadow-2xs inset-shadow-white/25 border text-sm shadow-md shadow-neutral-950/30 ring-0 transition-[filter] duration-200 hover:brightness-125 active:brightness-95 dark:border-0 dark:from-neutral-950/70 dark:to-neutral-900/90",
+        "bg-radial-[at_52%_-52%] **:[text-shadow:0_1px_0_var(--color-neutral-950)] border-neutral-950 from-neutral-950/70 to-neutral-950/95 text-white inset-shadow-2xs inset-shadow-white/25 border text-sm shadow-md shadow-neutral-950/30 ring-0 transition-[filter] duration-200 hover:brightness-125 active:brightness-95 dark:bg-white dark:text-neutral-50 dark:shadow-none dark:border-0",
       destructive:
         "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
       outline:

src/components/ui/dialog/dialog-content.svelte

@@ -36,6 +36,7 @@
     {@render children?.()}
     {#if showCloseButton}
       <DialogPrimitive.Close
+        title="Close"
         class={cn(
           "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-hidden disabled:pointer-events-none  [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           "ring-offset-white focus:ring-neutral-400 focus:ring-offset-2 data-[state=open]:bg-white data-[state=open]:text-neutral-500 dark:ring-offset-neutral-300 dark:focus:ring-neutral-700 dark:data-[state=open]:bg-neutral-900 dark:data-[state=open]:text-neutral-400",

src/components/ui/dialog/dialog-title.svelte

@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
   bind:ref
   data-slot="dialog-title"
-  class={cn("text-lg leading-none font-semibold", className)}
+  class={cn("text-xl leading-none font-semibold", className)}
   {...restProps}
 />

src/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    portalProps,
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.ContentProps & {
+    portalProps?: DropdownMenuPrimitive.PortalProps;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+  <DropdownMenuPrimitive.Content
+    bind:ref
+    data-slot="dropdown-menu-content"
+    {sideOffset}
+    class={cn(
+      "z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-neutral-200 bg-neutral-50 p-1 text-neutral-950 shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
+      className,
+    )}
+    {...restProps}
+  />
+</DropdownMenuPrimitive.Portal>

src/components/ui/dropdown-menu/dropdown-menu-group.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group
+  bind:ref
+  data-slot="dropdown-menu-group"
+  {...restProps}
+/>

src/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = "default",
+    ...restProps
+  }: DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+  bind:ref
+  data-slot="dropdown-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-neutral-200 data-highlighted:text-neutral-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 dark:data-highlighted:bg-neutral-800 dark:data-highlighted:text-neutral-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className,
+  )}
+  {...restProps}
+/>

src/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "@/types/components";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dropdown-menu-label"
+  data-inset={inset}
+  class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

src/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+  bind:ref
+  data-slot="dropdown-menu-separator"
+  class={cn("-mx-1 my-1 h-px bg-neutral-200 dark:bg-neutral-800", className)}
+  {...restProps}
+/>

src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "@/types/components";
+  import { cn } from "@/utils/cn";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="dropdown-menu-shortcut"
+  class={cn(
+    "ml-auto text-xs tracking-widest text-neutral-700 dark:text-neutral-300",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger
+  bind:ref
+  data-slot="dropdown-menu-trigger"
+  {...restProps}
+/>

src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,33 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+
+export {
+  Content,
+  Root as DropdownMenu,
+  Content as DropdownMenuContent,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Label as DropdownMenuLabel,
+  Sub as DropdownMenuSub,
+  Trigger as DropdownMenuTrigger,
+  Group,
+  Item,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  Trigger,
+  Label,
+};

src/components/ui/popover/popover-content.svelte

@@ -21,7 +21,7 @@
     {sideOffset}
     {align}
     class={cn(
-      "z-50 w-fit max-w-[480px] origin-(--bits-popover-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-900 shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
+      "z-50 w-auto max-w-96 origin-(--bits-popover-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-900 shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 md:max-w-[480px] dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
       className,
     )}
     {...restProps}

src/components/ui/sonner/sonner.svelte

@@ -3,6 +3,8 @@
     Toaster as Sonner,
     type ToasterProps as SonnerProps,
   } from "svelte-sonner";
+
+  import { cn } from "@/utils/cn";
   import { mode } from "mode-watcher";
 
   let { ...restProps }: SonnerProps = $props();
@@ -10,12 +12,19 @@
 
 <Sonner
   theme={mode.current}
-  class="toaster group"
+  position="bottom-center"
   toastOptions={{
+    unstyled: true,
     classes: {
-      toast:
+      toast: cn(
-        "group toast dark:group-[.toaster]:bg-neutral-900 group-[.toaster]:font-sans",
+        "w-full max-w-md",
-      description: "group-[.toast]:text-xs font-mono",
+        "flex items-center gap-3 p-4 rounded-lg shadow-md font-sans",
+        "bg-neutral-50 dark:bg-neutral-900",
+        "border border-neutral-200 dark:border-neutral-800",
+        "text-neutral-900 dark:text-neutral-100",
+      ),
+      title: "font-medium",
+      description: "text-sm text-pretty text-neutral-600 dark:text-neutral-400",
     },
   }}
   {...restProps}

src/components/ui/switch/index.ts

@@ -0,0 +1,3 @@
+import Root from "./switch.svelte";
+
+export { Root, Root as Switch };

src/components/ui/switch/switch.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { WithoutChildrenOrChild } from "@/types/components";
+
+  import { cn } from "@/utils/cn";
+  import { Switch as SwitchPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    checked = $bindable(false),
+    ...restProps
+  }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+  bind:ref
+  bind:checked
+  data-slot="switch"
+  class={cn(
+    "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-neutral-500 focus-visible:ring-[3px] focus-visible:ring-neutral-300/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-500/50 dark:data-[state=checked]:bg-neutral-100 dark:data-[state=unchecked]:bg-neutral-700",
+    className,
+  )}
+  {...restProps}
+>
+  <SwitchPrimitive.Thumb
+    data-slot="switch-thumb"
+    class={cn(
+      "pointer-events-none block size-4 rounded-full bg-white ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=checked]:bg-white data-[state=unchecked]:translate-x-0 dark:bg-neutral-900 dark:data-[state=checked]:bg-neutral-900",
+    )}
+  />
+</SwitchPrimitive.Root>

src/components/ui/tabs/tabs-list.svelte

@@ -13,7 +13,7 @@
   bind:ref
   data-slot="tabs-list"
   class={cn(
-    "inline-flex h-9 items-center justify-center rounded-md border border-neutral-200 bg-white p-1 text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400",
+    "inline-flex h-9 items-center justify-center rounded-md border border-neutral-200 bg-white text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400",
     className,
   )}
   {...restProps}

src/components/ui/tabs/tabs-trigger.svelte

@@ -13,7 +13,7 @@
   bind:ref
   data-slot="tabs-trigger"
   class={cn(
-    "inline-flex cursor-pointer items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all hover:text-black focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none  disabled:opacity-50 data-[state=active]:bg-neutral-200 data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:hover:text-white dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-neutral-50",
+    "inline-flex cursor-pointer items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all hover:bg-neutral-200 hover:text-black focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50  data-[state=active]:bg-neutral-200 data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-white dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-neutral-50",
     className,
   )}
   {...restProps}

src/components/warningMessage.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from "@/utils/cn";
+  import Button from "@/components/ui/button/button.svelte";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import AlertTriangleIcon from "@lucide/svelte/icons/alert-triangle";
+
+  import { warningStore, acceptWarning } from "@/stores/warning.store";
+</script>
+
+{#if !$warningStore}
+  <div
+    class={cn(
+      "flex w-full flex-col items-center justify-between space-y-2 px-3 py-4 text-sm md:flex-row md:space-y-0 md:space-x-2 md:py-2",
+      "bg-white dark:bg-neutral-900",
+      "border-b border-neutral-200 dark:border-neutral-800",
+    )}
+  >
+    <div class="flex flex-col items-center gap-2 md:flex-row">
+      <AlertTriangleIcon
+        size={18}
+        strokeWidth={2}
+        class="flex-shrink-0 animate-pulse text-yellow-600 dark:text-yellow-500"
+      />
+      <p>
+        Each SVG includes a link to its respective product. Permission must be
+        obtained before using a logo. For removal requests,
+        <a
+          href="https://github.com/pheralb/svgl/issues/new"
+          target="_blank"
+          class="underline decoration-neutral-500 underline-offset-4"
+        >
+          please open an issue on GitHub
+        </a>.
+      </p>
+    </div>
+    <Button size="sm" onclick={acceptWarning}>
+      <CheckIcon size={14} strokeWidth={2} />
+      <span>Accept</span>
+    </Button>
+  </div>
+{/if}

src/data/svgs.ts

@@ -109,7 +109,6 @@ export const svgs: iSVG[] = [
     },
     url: "https://milanote.com",
   },
-
   {
     title: "Together AI",
     category: "AI",
@@ -3655,19 +3654,6 @@ export const svgs: iSVG[] = [
     brandUrl:
       "https://www.figma.com/file/YYn36CxVpcT6aPKDXIH9JG/CurseForge-Brandbook?type=design&node-id=0-1&t=dvC0gPtyP36PQdsi-0",
   },
-  {
-    title: "Cursor",
-    category: ["Software"],
-    route: {
-      light: "/library/cursor_light.svg",
-      dark: "/library/cursor_dark.svg",
-    },
-    wordmark: {
-      light: "/library/cursor_wordmark_light.svg",
-      dark: "/library/cursor_wordmark_dark.svg",
-    },
-    url: "https://www.cursor.com",
-  },
   {
     title: "Ghostty",
     category: ["Software"],
@@ -3718,6 +3704,12 @@ export const svgs: iSVG[] = [
     route: "/library/firebase-studio.svg",
     url: "https://firebase.studio/",
   },
+  {
+    title: "Dingocoin",
+    category: "Crypto",
+    route: "/library/dingocoin.svg",
+    url: "https://dingocoin.com/",
+  },
   {
     title: "HeroUI",
     category: "Library",
@@ -3950,4 +3942,49 @@ export const svgs: iSVG[] = [
     route: "/library/googleMaps.svg",
     url: "https://www.google.com/maps/",
   },
+  {
+    title: "WebGL",
+    category: "Library",
+    route: {
+      light: "/library/webgl.svg",
+      dark: "/library/webgl_dark.svg",
+    },
+    url: "https://www.khronos.org/webgl/",
+    brandUrl: "https://www.khronos.org/legal/trademarks/",
+  },
+  {
+    title: "Intello",
+    category: "Platform",
+    route: {
+      light: "/library/intello-dark.svg",
+      dark: "/library/intello-light.svg",
+    },
+    wordmark: {
+      light: "/library/intello_wordmark_dark.svg",
+      dark: "/library/intello_wordmark_light.svg",
+    },
+    url: "https://intelloai.com/",
+  },
+  {
+    title: "Kilo Code",
+    category: ["AI", "Devtool"],
+    route: {
+      light: "/library/kilocode-light.svg",
+      dark: "/library/kilocode-dark.svg",
+    },
+    url: "https://kilocode.ai/",
+  },
+  {
+    title: "Cursor",
+    category: ["Software"],
+    route: {
+      light: "/library/cursor_light.svg",
+      dark: "/library/cursor_dark.svg",
+    },
+    wordmark: {
+      light: "/library/cursor_wordmark_light.svg",
+      dark: "/library/cursor_wordmark_dark.svg",
+    },
+    url: "https://www.cursor.com",
+  },
 ];

src/docs/shadcn-ui.md

@@ -1,11 +1,11 @@
 ---
-title: shadcn/ui Registry
+title: shadcn/ui
 description: How to use shadcn/ui to add SVGs to your project.
 ---
 
-## shadcn/ui Registry
+## shadcn/ui
 
-SVGL v5 support [shadcn/ui](https://ui.shadcn.com/) registry, so you can easily add SVGs to your project using their CLI. Add the registry config once and you will be able to install any SVG in `.tsx` using `npm`, `yarn`, `bun` or `pnpm`.
+SVGL v5 support [shadcn/ui](https://ui.shadcn.com/) registry 🎉, so you can easily add SVGs to your project using [their CLI](https://ui.shadcn.com/docs/cli). Add the registry config once and you will be able to install any SVG in **`.tsx`** using `npm`, `yarn`, `bun` or `pnpm`.
 
 ## Add registry
 
@@ -40,3 +40,57 @@ Add multiple SVGs at once:
 ```bash
 pnpm dlx shadcn@latest add @svgl/sanity @svgl/github @svgl/supabase @svgl/vercel
 ```
+
+## MCP Server
+
+You can use the [shadcn MCP server](https://ui.shadcn.com/docs/mcp) to browse, search, and add React SVGs from SVGL registry:
+
+### Prerequisites
+
+You need to have `@svgl` in your `components.json` file:
+
+```json
+{
+  "registries": {
+    "@svgl": "https://svgl.app/r/{name}.json"
+  }
+}
+```
+
+### Quick Start
+
+**With Claude Code**:
+
+```bash
+pnpm dlx shadcn@latest mcp init --client claude
+```
+
+Then, restart Claude Code. You can use `/mcp` command in Claude Code to debug the MCP server.
+
+**With Cursor**:
+
+```bash
+pnpm dlx shadcn@latest mcp init --client cursor
+```
+
+Then, open Cursor Settings and Enable the MCP server for shadcn.
+
+**With VSCode**:
+
+```bash
+pnpm dlx shadcn@latest mcp init --client vscode
+```
+
+Then, open `.vscode/mcp.json` and click Start next to the shadcn server.
+
+### Example Prompts
+
+Here are some example prompts you can use to add SVGs from SVGL registry:
+
+```
+Can you add the "GitHub" SVG from SVGL registry?
+```
+
+```
+Please add React, Svelte and Vue SVGs from SVGL registry.
+```

src/globals.ts

@@ -1,9 +1,14 @@
 export const globals = {
   githubUrl: "https://github.com/pheralb/svgl",
-  apiGithubUrl: "https://api.github.com/repos/pheralb/svgl",
+  apiGithub: {
+    url: "https://ungh.cc/repos/pheralb/svgl",
+    fallback: 5000,
+  },
   twitterUrl: "https://x.com/pheralb_",
   submitUrl:
     "https://github.com/pheralb/svgl?tab=readme-ov-file#-getting-started",
   requestSvgUrl:
     "https://github.com/pheralb/svgl/issues/new?template=request-svg.yml",
+  registryUrl: "https://svgl.app/r/",
+  v0Url: "https://v0.dev/chat/api/open?url=",
 };

src/routes/+layout.server.ts

@@ -1,25 +0,0 @@
-import type { LayoutServerLoad } from "./$types";
-import { globals } from "@/globals";
-
-export const load: LayoutServerLoad = async ({ fetch, setHeaders }) => {
-  try {
-    const response = await fetch(globals.apiGithubUrl);
-
-    const data = await response.json();
-
-    // 1 day cache:
-    setHeaders({
-      "cache-control": "public, max-age=86400",
-    });
-
-    return {
-      stars: data.stargazers_count,
-    };
-  } catch (error) {
-    console.error("Error fetching GitHub data:", error);
-    return {
-      stars: null,
-      error: "Failed to fetch repository data",
-    };
-  }
-};

src/routes/+layout.svelte

@@ -12,13 +12,12 @@
   import Sidebar from "@/components/layout/sidebar.svelte";
   import Sonner from "@/components/ui/sonner/sonner.svelte";
 
-  // SSR Data:
+  let { children }: LayoutProps = $props();
-  let { data, children }: LayoutProps = $props();
 </script>
 
 <ModeWatcher />
 <Sonner />
-<Header githubStars={data?.stars} />
+<Header />
 <Sidebar>
   {@render children?.()}
 </Sidebar>

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { iSVG } from "@/types/svg";
   import type { PageProps } from "./$types";
+  import { browser } from "$app/environment";
 
   import { cn } from "@/utils/cn";
   import { deleteParam } from "@/utils/searchParams";
@@ -18,9 +19,11 @@
   import PageCard from "@/components/pageCard.svelte";
   import FolderIcon from "@lucide/svelte/icons/folder";
   import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
   import PageHeader from "@/components/pageHeader.svelte";
   import Button from "@/components/ui/button/button.svelte";
   import SvgNotFound from "@/components/svgs/svgNotFound.svelte";
+  import WarningMessage from "@/components/warningMessage.svelte";
 
   // SSR Data:
   let { data }: PageProps = $props();
@@ -79,7 +82,10 @@
   placeholder="Search..."
 />
 
-<PageCard>
+<PageCard
+  containerClass="mt-2"
+  contentCardClass="max-h-[calc(100vh-7.6rem)] min-h-[calc(100vh-7.6rem)]"
+>
   <PageHeader>
     <div
       class="flex items-center space-x-2 text-neutral-500 dark:text-neutral-400"
@@ -105,26 +111,46 @@
         </p>
       {/if}
     </div>
-    <SortSvgs
+    <div class="flex items-center space-x-2">
-      className={cn(filteredSvgs.length === 0 && "hidden")}
+      <SortSvgs
-      isSorted={sorted}
+        className={cn(filteredSvgs.length === 0 && "hidden")}
-      onSortedChange={(value) => {
+        isSorted={sorted}
-        sorted = value;
+        onSortedChange={(value) => {
-        searchSvgs();
+          sorted = value;
-      }}
+          searchSvgs();
-    />
+        }}
+      />
+      {#if showAll && filteredSvgs.length > maxDisplay}
+        <Button
+          variant="ghost"
+          class="px-2.5"
+          onclick={() => (showAll = false)}
+        >
+          <span>Show Less</span>
+          <ChevronUpIcon size={16} strokeWidth={2} />
+        </Button>
+      {/if}
+    </div>
   </PageHeader>
+  {#if browser}
+    <WarningMessage />
+  {/if}
   <Container className="my-6">
     <Grid>
       {#each displaySvgs as svg (svg.id)}
         <SvgCard svgInfo={svg} />
       {/each}
     </Grid>
-    {#if showAll === false && filteredSvgs.length > maxDisplay}
+    {#if !showAll && filteredSvgs.length > maxDisplay}
       <div class="mt-6 flex justify-center">
-        <Button variant="outline" size="lg" onclick={() => (showAll = true)}>
+        <Button
+          variant="outline"
+          size="lg"
+          class="px-2.5"
+          onclick={() => (showAll = true)}
+        >
           <span>Show All</span>
-          <span class="text-neutral-500 dark:text-neutral-500">
+          <span class="text-neutral-600 dark:text-neutral-400">
             (+ {filteredSvgs.length - maxDisplay} SVGs)
           </span>
           <ChevronDownIcon size={16} strokeWidth={2} />

src/routes/api/docs/[...slug]/+server.ts

@@ -0,0 +1,15 @@
+import type { RequestEvent } from "@sveltejs/kit";
+import { error } from "@sveltejs/kit";
+import { allDocs } from "content-collections";
+
+export const GET = async ({ params }: RequestEvent) => {
+  const document = allDocs.find((doc) => doc._meta.path === params.slug);
+  if (!document) {
+    throw error(404, `Could not find ${params.slug}`);
+  }
+  return new Response(document.content, {
+    headers: {
+      "Content-Type": "text/markdown; charset=utf-8",
+    },
+  });
+};

src/routes/api/svgs/svgr/+server.ts

@@ -12,14 +12,18 @@ export const POST = async ({ request }: RequestEvent) => {
   try {
     const body = await request.json();
 
-    const svgCode = body.code;
+    let svgCode = body.code;
     const typescript = body.typescript;
     const name = body.name.replace(/[^a-zA-Z0-9]/g, "");
-    const optimizedSvg = optimizeSvg({ svgCode });
+    const shouldOptimize = body.optimize !== false;
+
+    if (shouldOptimize) {
+      svgCode = optimizeSvg({ svgCode });
+    }
 
     const code = await parseReactSvgContent({
       componentName: name,
-      svgCode: optimizedSvg,
+      svgCode: svgCode,
       typescript,
     });
 

src/routes/directory/[category]/+page.svelte

@@ -73,10 +73,13 @@
 <Search
   searchValue={searchTerm}
   onSearch={handleSearch}
-  placeholder="Search..."
+  placeholder={`Search ${directoryData.category}'s SVGs...`}
 />
 
-<PageCard>
+<PageCard
+  containerClass="mt-2"
+  contentCardClass="max-h-[calc(100vh-7.6rem)] min-h-[calc(100vh-7.6rem)]"
+>
   <PageHeader>
     <div
       class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"
@@ -130,7 +133,7 @@
       {/each}
     </Grid>
     {#if filteredSvgs.length === 0}
-      <SvgNotFound svgTitle={searchTerm} />
+      <SvgNotFound svgTitle={searchTerm} category={directoryData.category} />
     {/if}
   </Container>
 </PageCard>

src/routes/docs/[...slug]/+page.svelte

@@ -5,15 +5,16 @@
   import PageCard from "@/components/pageCard.svelte";
   import Container from "@/components/container.svelte";
   import PageHeader from "@/components/pageHeader.svelte";
-  import TableOfContents from "@/components/tableOfContents/tableOfContents.svelte";
+  import { buttonVariants } from "@/components/ui/button";
   import * as Collapsible from "@/components/ui/collapsible";
+  import DocumentSettings from "@/components/documentSettings.svelte";
+  import TableOfContents from "@/components/tableOfContents/tableOfContents.svelte";
 
   import FileText from "@lucide/svelte/icons/file-text";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
 
   // Markdown:
   import "@/styles/markdown.css";
-  import { buttonVariants } from "@/components/ui/button";
-  import ChevronDown from "@lucide/svelte/icons/chevron-down";
 
   let { data }: PageProps = $props();
   let tocOpen = $state(false);
@@ -25,10 +26,7 @@
   <meta name="description" content={data.document.description} />
 </svelte:head>
 
-<PageCard
+<PageCard>
-  containerClass="mt-0"
-  contentCardClass="min-h-[calc(100vh-5.4rem)] md:min-h-[calc(100vh-5rem)]"
->
   <PageHeader>
     <div
       class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"
@@ -38,6 +36,11 @@
         {document.title}
       </p>
     </div>
+    <DocumentSettings
+      rawUrl={document.rawUrl}
+      documentContent={document.content}
+      documentUrl={document.documentUrl}
+    />
   </PageHeader>
   <Collapsible.Root class="block lg:hidden" bind:open={tocOpen}>
     <Collapsible.Trigger

src/routes/extensions/+page.svelte

@@ -53,10 +53,7 @@
   />
 </svelte:head>
 
-<PageCard
+<PageCard>
-  containerClass="mt-0"
-  contentCardClass="max-h-[calc(100vh-5.2rem)] min-h-[calc(100vh-5.2rem)]"
->
   <PageHeader>
     <div
       class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"
@@ -69,7 +66,7 @@
     <h2
       class={cn(
         "mb-4 text-center",
-        "font-onest text-4xl font-semibold",
+        "text-4xl font-semibold",
         "animate-in delay-100 duration-500 fill-mode-backwards fade-in slide-in-from-bottom-4",
       )}
     >

src/routes/favorites/+page.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import type { iSVG } from "@/types/svg";
+
+  import { searchSvgsWithFuse } from "@/utils/searchWithFuse";
+  import { deleteParam, getParamValue } from "@/utils/searchParams";
+
+  // Store:
+  import favoritesStore from "@/stores/favorites.store";
+
+  // Components:
+  import { buttonVariants } from "@/components/ui/button";
+  import { Button } from "@/components/ui/button";
+  import PageCard from "@/components/pageCard.svelte";
+  import PageHeader from "@/components/pageHeader.svelte";
+  import Grid from "@/components/grid.svelte";
+  import Container from "@/components/container.svelte";
+
+  // Svgs:
+  import Search from "@/components/search.svelte";
+  import SvgCard from "@/components/svgs/svgCard.svelte";
+  import SvgNotFound from "@/components/svgs/svgNotFound.svelte";
+
+  import SearchIcon from "@lucide/svelte/icons/search";
+  import SearchXIcon from "@lucide/svelte/icons/search-x";
+  import TrashIcon from "@lucide/svelte/icons/trash";
+  import FolderHeart from "@lucide/svelte/icons/folder-heart";
+
+  // States:
+  let searchTerm = $state<string>(getParamValue("search") || "");
+
+  let allFavorites = $derived($favoritesStore);
+  let filteredFavorites = $state<Array<iSVG>>([]);
+  let favoritesCount = $derived(favoritesStore.getCount(allFavorites));
+
+  const searchFavorites = () => {
+    if (!searchTerm) {
+      filteredFavorites = allFavorites;
+      return;
+    }
+    filteredFavorites = searchSvgsWithFuse(allFavorites)
+      .search(searchTerm)
+      .map((result) => result.item);
+  };
+
+  const handleSearch = (value: string) => {
+    searchTerm = value;
+    searchFavorites();
+  };
+
+  const handleClearSearch = () => {
+    searchTerm = "";
+    deleteParam("search");
+    filteredFavorites = allFavorites;
+  };
+
+  const handleClearFavorites = () => {
+    favoritesStore.clearFavorites();
+  };
+
+  $effect(() => {
+    searchFavorites();
+  });
+</script>
+
+<svelte:head>
+  <title>Favorites - Svgl</title>
+  <meta name="description" content="Your favorite SVGs." />
+</svelte:head>
+
+<Search
+  searchValue={searchTerm}
+  onSearch={handleSearch}
+  placeholder="Search..."
+/>
+
+<PageCard
+  containerClass="mt-2"
+  contentCardClass="max-h-[calc(100vh-7.6rem)] min-h-[calc(100vh-7.6rem)]"
+>
+  <PageHeader>
+    <div
+      class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"
+    >
+      {#if searchTerm}
+        <Button
+          title="Clear Search"
+          onclick={handleClearSearch}
+          variant="ghost"
+          size="icon"
+        >
+          <SearchXIcon size={18} strokeWidth={1.5} />
+        </Button>
+      {:else}
+        <FolderHeart size={18} strokeWidth={1.5} />
+      {/if}
+      <p>Favorites</p>
+      {#if favoritesCount > 0}
+        <span>-</span>
+        {#if !searchTerm}
+          <span>{favoritesCount} SVGs</span>
+        {:else}
+          <p>
+            <span class="font-mono">{filteredFavorites.length}</span>
+            <span>search results</span>
+          </p>
+        {/if}
+      {/if}
+    </div>
+    {#if favoritesCount > 0}
+      <Button variant="ghost" onclick={handleClearFavorites}>
+        <TrashIcon size={14} strokeWidth={1.5} />
+        <span>Clear All</span>
+      </Button>
+    {/if}
+  </PageHeader>
+  <Container className="my-6">
+    <Grid>
+      {#each filteredFavorites as svg (svg.id)}
+        <SvgCard svgInfo={svg} />
+      {/each}
+    </Grid>
+    {#if filteredFavorites.length === 0 && searchTerm}
+      <SvgNotFound svgTitle={searchTerm} searchGlobally={true} />
+    {/if}
+    {#if filteredFavorites.length === 0 && !searchTerm && favoritesCount === 0}
+      <div
+        class="flex w-full flex-col items-center justify-center space-y-4 py-6"
+      >
+        <FolderHeart size={48} strokeWidth={1} />
+        <h2 class="text-xl font-semibold">No favorites yet</h2>
+        <p class="text-center text-neutral-600 dark:text-neutral-400">
+          Start adding SVGs to your favorites by clicking the heart icon on any
+          SVG.
+        </p>
+        <a href="/" class={buttonVariants({ variant: "outline" })}>
+          <SearchIcon size={14} strokeWidth={1.5} />
+          <span>Browse SVGs</span>
+        </a>
+      </div>
+    {/if}
+  </Container>
+</PageCard>

src/stores/favorites.store.ts

@@ -7,7 +7,6 @@ import { browser } from "$app/environment";
 const localStorageKey = "svgl_favorites";
 
 function createFavoritesStore() {
-  // Check if the favorites exist in the SVGs array:
   const validateFavorites = (favorites: iSVG[]): iSVG[] => {
     return favorites.filter((favorite) => {
       const existsInSvgs = svgs.some((svg) => {
@@ -62,10 +61,10 @@ function createFavoritesStore() {
     // Add SVG to favorites:
     addToFavorites: (item: iSVG) =>
       update((favorites) => {
-        const exists = favorites.some((fav) =>
+        const exists = favorites.some(
-          typeof item === "object" && item.id
+          (fav) =>
-            ? fav.id === item.id
+            fav.title === item.title &&
-            : fav === item,
+            JSON.stringify(fav.route) === JSON.stringify(item.route),
         );
         if (!exists) {
           const newFavorites = [...favorites, item];
@@ -78,10 +77,12 @@ function createFavoritesStore() {
     // Delete SVG from favorites:
     removeFromFavorites: (item: iSVG) =>
       update((favorites) => {
-        const newFavorites = favorites.filter((fav) =>
+        const newFavorites = favorites.filter(
-          typeof item === "object" && item.id
+          (fav) =>
-            ? fav.id !== item.id
+            !(
-            : fav !== item,
+              fav.title === item.title &&
+              JSON.stringify(fav.route) === JSON.stringify(item.route)
+            ),
         );
         saveFavorites(newFavorites);
         return newFavorites;
@@ -90,18 +91,20 @@ function createFavoritesStore() {
     // Toggle (add/remove) SVG from favorites:
     toggleFavorite: (item: iSVG) =>
       update((favorites) => {
-        const exists = favorites.some((fav) =>
+        const exists = favorites.some(
-          typeof item === "object" && item.id
+          (fav) =>
-            ? fav.id === item.id
+            fav.title === item.title &&
-            : fav === item,
+            JSON.stringify(fav.route) === JSON.stringify(item.route),
         );
 
         let newFavorites;
         if (exists) {
-          newFavorites = favorites.filter((fav) =>
+          newFavorites = favorites.filter(
-            typeof item === "object" && item.id
+            (fav) =>
-              ? fav.id !== item.id
+              !(
-              : fav !== item,
+                fav.title === item.title &&
+                JSON.stringify(fav.route) === JSON.stringify(item.route)
+              ),
           );
         } else {
           newFavorites = [...favorites, item];
@@ -113,18 +116,19 @@ function createFavoritesStore() {
 
     // Check if SVG is in favorites:
     isFavorite: (item: iSVG, currentFavorites: iSVG[]) => {
-      return currentFavorites.some((fav) =>
+      return currentFavorites.some(
-        typeof item === "object" && item.id ? fav.id === item.id : fav === item,
+        (fav) =>
+          fav.title === item.title &&
+          JSON.stringify(fav.route) === JSON.stringify(item.route),
       );
     },
 
-    // Delete all favorites:
+    // Clear favorites:
     clearFavorites: () => {
       set([]);
       saveFavorites([]);
     },
 
-    // Get count of favorites:
     getCount: (currentFavorites: iSVG[]) => currentFavorites.length,
 
     validateAndCleanup: () => {

src/stores/pkgManager.store.ts

@@ -1,32 +0,0 @@
-import { writable } from "svelte/store";
-import { browser } from "$app/environment";
-
-type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
-
-const localStorageKey = "svgl_package_manager";
-const defaultValue: PackageManager = "npm";
-
-function getInitialValue(): PackageManager {
-  if (browser) {
-    const stored = localStorage.getItem(localStorageKey);
-    if (
-      stored === "npm" ||
-      stored === "pnpm" ||
-      stored === "yarn" ||
-      stored === "bun"
-    ) {
-      return stored;
-    }
-  }
-  return defaultValue;
-}
-
-const pkgManager = writable<PackageManager>(getInitialValue());
-
-pkgManager.subscribe((value) => {
-  if (browser) {
-    localStorage.setItem(localStorageKey, value);
-  }
-});
-
-export { pkgManager, type PackageManager };

src/stores/settings.store.ts

@@ -0,0 +1,94 @@
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+
+type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
+
+interface Settings {
+  packageManager: PackageManager;
+  optimizeSvgs: boolean;
+}
+
+const localStorageKey = "svgl_settings";
+const defaultSettings: Settings = {
+  packageManager: "pnpm",
+  optimizeSvgs: true,
+};
+
+function getInitialSettings(): Settings {
+  if (browser) {
+    try {
+      const stored = localStorage.getItem(localStorageKey);
+      if (stored) {
+        const parsedSettings = JSON.parse(stored) as Partial<Settings>;
+        return {
+          packageManager: parsedSettings.packageManager
+            ? parsedSettings.packageManager
+            : defaultSettings.packageManager,
+          optimizeSvgs:
+            typeof parsedSettings.optimizeSvgs === "boolean"
+              ? parsedSettings.optimizeSvgs
+              : defaultSettings.optimizeSvgs,
+        };
+      }
+    } catch (error) {
+      console.error("Error parsing settings from localStorage:", error);
+    }
+  }
+  return defaultSettings;
+}
+
+function createSettingsStore() {
+  const { subscribe, set, update } = writable<Settings>(getInitialSettings());
+
+  return {
+    subscribe,
+
+    // Update package manager
+    setPackageManager: (packageManager: PackageManager) => {
+      update((settings) => {
+        const newSettings = { ...settings, packageManager };
+        if (browser) {
+          localStorage.setItem(localStorageKey, JSON.stringify(newSettings));
+        }
+        return newSettings;
+      });
+    },
+
+    // Update optimize SVGs setting
+    setOptimizeSvgs: (optimizeSvgs: boolean) => {
+      update((settings) => {
+        const newSettings = { ...settings, optimizeSvgs };
+        if (browser) {
+          localStorage.setItem(localStorageKey, JSON.stringify(newSettings));
+        }
+        return newSettings;
+      });
+    },
+
+    // Update multiple settings at once
+    updateSettings: (newSettings: Partial<Settings>) => {
+      update((settings) => {
+        const updatedSettings = { ...settings, ...newSettings };
+        if (browser) {
+          localStorage.setItem(
+            localStorageKey,
+            JSON.stringify(updatedSettings),
+          );
+        }
+        return updatedSettings;
+      });
+    },
+
+    // Reset to default settings
+    reset: () => {
+      set(defaultSettings);
+      if (browser) {
+        localStorage.setItem(localStorageKey, JSON.stringify(defaultSettings));
+      }
+    },
+  };
+}
+
+const settingsStore = createSettingsStore();
+
+export { settingsStore, type PackageManager, type Settings };

src/stores/warning.store.ts

@@ -0,0 +1,23 @@
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+
+const localStorageKey = "svgl_warning";
+
+function getInitialWarningState(): boolean {
+  if (browser) {
+    const stored = localStorage.getItem(localStorageKey);
+    return stored === "true";
+  }
+  return false;
+}
+
+const warningStore = writable<boolean>(getInitialWarningState());
+
+function acceptWarning() {
+  warningStore.set(true);
+  if (browser) {
+    localStorage.setItem(localStorageKey, "true");
+  }
+}
+
+export { warningStore, acceptWarning };

src/styles/globals.css

@@ -23,13 +23,6 @@
   font-style: normal;
 }
 
-@font-face {
-  font-family: "OnestMedium";
-  src: url("/fonts/OnestMedium.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-}
-
 @theme {
   --font-sans:
     "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
@@ -37,9 +30,6 @@
   --font-mono:
     "GeistMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace, "Apple Color Emoji";
-  --font-onest:
-    "OnestMedium", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 /* Shiki light/dark mode */

src/templates/getSource.ts

@@ -2,11 +2,13 @@ import { optimizeSvg } from "@/utils/optimizeSvg";
 
 interface SourceParams {
   url: string | undefined;
+  optimize?: boolean;
 }
 
 export const getSource = async (params: SourceParams) => {
   const response = await fetch(params.url || "");
   const content = await response.text();
+  if (!params.optimize) return content;
   const optimizedContent = optimizeSvg({ svgCode: content });
   return optimizedContent;
 };

src/utils/parseReactSvgContent.ts

@@ -1,4 +1,4 @@
-import prettier from "prettier";
+import { format } from "prettier";
 
 interface ParseReactSvgOptions {
   componentName: string;
@@ -35,7 +35,7 @@ export const parseReactSvgContent = async ({
     structuredCode = `const ${componentName} = (props) => (\n  ${reactifiedSvg}\n);\n\nexport { ${componentName} };`;
   }
 
-  const formatted = await prettier.format(structuredCode, {
+  const formatted = await format(structuredCode, {
     parser: typescript ? "typescript" : "babel",
     semi: true,
     singleQuote: false,

static/images/hero-pattern_dark.svg

@@ -1,271 +0,0 @@
-<svg width="1440" height="462" viewBox="0 0 1440 462" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.3" clip-path="url(#clip0_302_24807)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 58.7206H48V0H47V57.4972H0V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48 58.7206H96V0H95V57.4972H48V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 58.7206H144V0H143V57.4972H96V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144 58.7206H192V0H191V57.4972H144V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M192 58.7206H240V0H239V57.4972H192V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M240 58.7206H288V0H287V57.4972H240V58.7206Z" fill="#262626"/>
-<path d="M288 0H336V58.7206H288V0Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M288 58.7206H336V0H335V57.4972H288V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M336 58.7206H384V0H383V57.4972H336V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M384 58.7206H432V0H431V57.4972H384V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M432 58.7206H480V0H479V57.4972H432V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M480 58.7206H528V0H527V57.4972H480V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M528 58.7206H576V0H575V57.4972H528V58.7206Z" fill="#262626"/>
-<path d="M576 0H624V58.7206H576V0Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M576 58.7206H624V0H623V57.4972H576V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M624 58.7206H672V0H671V57.4972H624V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M672 58.7206H720V0H719V57.4972H672V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M720 58.7206H768V0H767V57.4972H720V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M768 58.7206H816V0H815V57.4972H768V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M816 58.7206H864V0H863V57.4972H816V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M864 58.7206H912V0H911V57.4972H864V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M912 58.7206H960V0H959V57.4972H912V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M960 58.7206H1008V0H1007V57.4972H960V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1008 58.7206H1056V0H1055V57.4972H1008V58.7206Z" fill="#262626"/>
-<path d="M1056 0H1104V58.7206H1056V0Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1056 58.7206H1104V0H1103V57.4972H1056V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1104 58.7206H1152V0H1151V57.4972H1104V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1152 58.7206H1200V0H1199V57.4972H1152V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1200 58.7206H1248V0H1247V57.4972H1200V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1248 58.7206H1296V0H1295V57.4972H1248V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1296 58.7206H1344V0H1343V57.4972H1296V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1344 58.7206H1392V0H1391V57.4972H1344V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1392 58.7206H1440V0H1439V57.4972H1392V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 117.441H48V58.7206L47 58.7206V116.218H0V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48 117.441H96V58.7206L95 58.7206V116.218H48V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 117.441H144V58.7206L143 58.7206V116.218H96V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144 117.441H192V58.7206L191 58.7206V116.218H144V117.441Z" fill="#262626"/>
-<path d="M192 58.7206H240V117.441H192V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M192 117.441H240V58.7206L239 58.7206V116.218H192V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M240 117.441H288V58.7206L287 58.7206V116.218H240V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M288 117.441H336V58.7206L335 58.7206V116.218H288V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M336 117.441H384V58.7206L383 58.7206V116.218H336V117.441Z" fill="#262626"/>
-<path d="M384 58.7206H432V117.441H384V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M384 117.441H432V58.7206L431 58.7206V116.218H384V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M432 117.441H480V58.7206L479 58.7206V116.218H432V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M480 117.441H528V58.7206L527 58.7206V116.218H480V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M528 117.441H576V58.7206L575 58.7206V116.218H528V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M576 117.441H624V58.7206L623 58.7206V116.218H576V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M624 117.441H672V58.7206L671 58.7206V116.218H624V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M672 117.441H720V58.7206L719 58.7206V116.218H672V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M720 117.441H768V58.7206L767 58.7206V116.218H720V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M768 117.441H816V58.7206L815 58.7206V116.218H768V117.441Z" fill="#262626"/>
-<path d="M816 58.7206H864V117.441H816V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M816 117.441H864V58.7206L863 58.7206V116.218H816V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M864 117.441H912V58.7206L911 58.7206V116.218H864V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M912 117.441H960V58.7206L959 58.7206V116.218H912V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M960 117.441H1008V58.7206L1007 58.7206V116.218H960V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1008 117.441H1056V58.7206L1055 58.7206V116.218H1008V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1056 117.441H1104V58.7206L1103 58.7206V116.218H1056V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1104 117.441H1152V58.7206L1151 58.7206V116.218H1104V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1152 117.441H1200V58.7206L1199 58.7206V116.218H1152V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1200 117.441H1248V58.7206L1247 58.7206V116.218H1200V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1248 117.441H1296V58.7206L1295 58.7206V116.218H1248V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1296 117.441H1344V58.7206L1343 58.7206V116.218H1296V117.441Z" fill="#262626"/>
-<path d="M1344 58.7206H1392V117.441H1344V58.7206Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1344 117.441H1392V58.7206L1391 58.7206V116.218H1344V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1392 117.441H1440V58.7206L1439 58.7206V116.218H1392V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 168.397H48V117.441H47V167.335H0V168.397Z" fill="#262626"/>
-<path d="M48 117.441H96V168.397H48V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48 168.397H96V117.441H95V167.335H48V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 168.397H144V117.441H143V167.335H96V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144 168.397H192V117.441H191V167.335H144V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M192 168.397H240V117.441H239V167.335H192V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M240 168.397H288V117.441H287V167.335H240V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M288 168.397H336V117.441H335V167.335H288V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M336 168.397H384V117.441H383V167.335H336V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M384 168.397H432V117.441H431V167.335H384V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M432 168.397H480V117.441H479V167.335H432V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M480 168.397H528V117.441H527V167.335H480V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M528 168.397H576V117.441H575V167.335H528V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M576 168.397H624V117.441H623V167.335H576V168.397Z" fill="#262626"/>
-<path d="M624 117.441H672V168.397H624V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M624 168.397H672V117.441H671V167.335H624V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M672 168.397H720V117.441H719V167.335H672V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M720 168.397H768V117.441H767V167.335H720V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M768 168.397H816V117.441H815V167.335H768V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M816 168.397H864V117.441H863V167.335H816V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M864 168.397H912V117.441H911V167.335H864V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M912 168.397H960V117.441H959V167.335H912V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M960 168.397H1008V117.441H1007V167.335H960V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1008 168.397H1056V117.441H1055V167.335H1008V168.397Z" fill="#262626"/>
-<path d="M1056 117.441H1104V168.397H1056V117.441Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1056 168.397H1104V117.441H1103V167.335H1056V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1104 168.397H1152V117.441H1151V167.335H1104V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1152 168.397H1200V117.441H1199V167.335H1152V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1200 168.397H1248V117.441H1247V167.335H1200V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1248 168.397H1296V117.441H1295V167.335H1248V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1296 168.397H1344V117.441H1343V167.335H1296V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1344 168.397H1392V117.441H1391V167.335H1344V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1392 168.397H1440V117.441H1439V167.335H1392V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 227.118H48V168.397H47V225.894H0V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48 227.118H96V168.397H95V225.894H48V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 227.118H144V168.397H143V225.894H96V227.118Z" fill="#262626"/>
-<path d="M144 168.397H192V227.118H144V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144 227.118H192V168.397H191V225.894H144V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M192 227.118H240V168.397H239V225.894H192V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M240 227.118H288V168.397H287V225.894H240V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M288 227.118H336V168.397H335V225.894H288V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M336 227.118H384V168.397H383V225.894H336V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M384 227.118H432V168.397H431V225.894H384V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M432 227.118H480V168.397H479V225.894H432V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M480 227.118H528V168.397H527V225.894H480V227.118Z" fill="#262626"/>
-<path d="M528 168.397H576V227.118H528V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M528 227.118H576V168.397H575V225.894H528V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M576 227.118H624V168.397H623V225.894H576V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M624 227.118H672V168.397H671V225.894H624V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M672 227.118H720V168.397H719V225.894H672V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M720 227.118H768V168.397H767V225.894H720V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M768 227.118H816V168.397H815V225.894H768V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M816 227.118H864V168.397H863V225.894H816V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M864 227.118H912V168.397H911V225.894H864V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M912 227.118H960V168.397H959V225.894H912V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M960 227.118H1008V168.397H1007V225.894H960V227.118Z" fill="#262626"/>
-<path d="M1008 168.397H1056V227.118H1008V168.397Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1008 227.118H1056V168.397H1055V225.894H1008V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1056 227.118H1104V168.397H1103V225.894H1056V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1104 227.118H1152V168.397H1151V225.894H1104V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1152 227.118H1200V168.397H1199V225.894H1152V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1200 227.118H1248V168.397H1247V225.894H1200V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1248 227.118H1296V168.397H1295V225.894H1248V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1296 227.118H1344V168.397H1343V225.894H1296V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1344 227.118H1392V168.397H1391V225.894H1344V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1392 227.118H1440V168.397H1439V225.894H1392V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 285.838H48V227.118H47V284.615H0V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48 285.838H96V227.118H95V284.615H48V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 285.838H144V227.118H143V284.615H96V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144 285.838H192V227.118H191V284.615H144V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M192 285.838H240V227.118H239V284.615H192V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M240 285.838H288V227.118H287V284.615H240V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M288 285.838H336V227.118H335V284.615H288V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M336 285.838H384V227.118H383V284.615H336V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M384 285.838H432V227.118H431V284.615H384V285.838Z" fill="#262626"/>
-<path d="M432 227.118H480V285.838H432V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M432 285.838H480V227.118H479V284.615H432V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M480 285.838H528V227.118H527V284.615H480V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M528 285.838H576V227.118H575V284.615H528V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M576 285.838H624V227.118H623V284.615H576V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M624 285.838H672V227.118H671V284.615H624V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M672 285.838H720V227.118H719V284.615H672V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M720 285.838H768V227.118H767V284.615H720V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M768 285.838H816V227.118H815V284.615H768V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M816 285.838H864V227.118H863V284.615H816V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M864 285.838H912V227.118H911V284.615H864V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M912 285.838H960V227.118H959V284.615H912V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M960 285.838H1008V227.118H1007V284.615H960V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1008 285.838H1056V227.118H1055V284.615H1008V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1056 285.838H1104V227.118H1103V284.615H1056V285.838Z" fill="#262626"/>
-<path d="M1104 227.118H1152V285.838H1104V227.118Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1104 285.838H1152V227.118H1151V284.615H1104V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1152 285.838H1200V227.118H1199V284.615H1152V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1200 285.838H1248V227.118H1247V284.615H1200V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1248 285.838H1296V227.118H1295V284.615H1248V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1296 285.838H1344V227.118H1343V284.615H1296V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1344 285.838H1392V227.118H1391V284.615H1344V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1392 285.838H1440V227.118H1439V284.615H1392V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 344.559H48V285.838H47V343.335H0V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48 344.559H96V285.838H95V343.335H48V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 344.559H144V285.838H143V343.335H96V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144 344.559H192V285.838H191V343.335H144V344.559Z" fill="#262626"/>
-<path d="M192 285.838H240V344.559H192V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M192 344.559H240V285.838H239V343.335H192V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M240 344.559H288V285.838H287V343.335H240V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M288 344.559H336V285.838H335V343.335H288V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M336 344.559H384V285.838H383V343.335H336V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M384 344.559H432V285.838H431V343.335H384V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M432 344.559H480V285.838H479V343.335H432V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M480 344.559H528V285.838H527V343.335H480V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M528 344.559H576V285.838H575V343.335H528V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M576 344.559H624V285.838H623V343.335H576V344.559Z" fill="#262626"/>
-<path d="M624 285.838H672V344.559H624V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M624 344.559H672V285.838H671V343.335H624V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M672 344.559H720V285.838H719V343.335H672V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M720 344.559H768V285.838H767V343.335H720V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M768 344.559H816V285.838H815V343.335H768V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M816 344.559H864V285.838H863V343.335H816V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M864 344.559H912V285.838H911V343.335H864V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M912 344.559H960V285.838H959V343.335H912V344.559Z" fill="#262626"/>
-<path d="M960 285.838H1008V344.559H960V285.838Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M960 344.559H1008V285.838H1007V343.335H960V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1008 344.559H1056V285.838H1055V343.335H1008V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1056 344.559H1104V285.838H1103V343.335H1056V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1104 344.559H1152V285.838H1151V343.335H1104V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1152 344.559H1200V285.838H1199V343.335H1152V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1200 344.559H1248V285.838H1247V343.335H1200V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1248 344.559H1296V285.838H1295V343.335H1248V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1296 344.559H1344V285.838H1343V343.335H1296V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1344 344.559H1392V285.838H1391V343.335H1344V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1392 344.559H1440V285.838H1439V343.335H1392V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 403.279H48V344.559H47V402.056H0V403.279Z" fill="#262626"/>
-<path d="M48 344.559H96V403.279H48V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48 403.279H96V344.559H95V402.056H48V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 403.279H144V344.559H143V402.056H96V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144 403.279H192V344.559H191V402.056H144V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M192 403.279H240V344.559H239V402.056H192V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M240 403.279H288V344.559H287V402.056H240V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M288 403.279H336V344.559H335V402.056H288V403.279Z" fill="#262626"/>
-<path d="M336 344.559H384V403.279H336V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M336 403.279H384V344.559H383V402.056H336V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M384 403.279H432V344.559H431V402.056H384V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M432 403.279H480V344.559H479V402.056H432V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M480 403.279H528V344.559H527V402.056H480V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M528 403.279H576V344.559H575V402.056H528V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M576 403.279H624V344.559H623V402.056H576V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M624 403.279H672V344.559H671V402.056H624V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M672 403.279H720V344.559H719V402.056H672V403.279Z" fill="#262626"/>
-<path d="M720 344.559H768V403.279H720V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M720 403.279H768V344.559H767V402.056H720V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M768 403.279H816V344.559H815V402.056H768V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M816 403.279H864V344.559H863V402.056H816V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M864 403.279H912V344.559H911V402.056H864V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M912 403.279H960V344.559H959V402.056H912V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M960 403.279H1008V344.559H1007V402.056H960V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1008 403.279H1056V344.559H1055V402.056H1008V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1056 403.279H1104V344.559H1103V402.056H1056V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1104 403.279H1152V344.559H1151V402.056H1104V403.279Z" fill="#262626"/>
-<path d="M1152 344.559H1200V403.279H1152V344.559Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1152 403.279H1200V344.559H1199V402.056H1152V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1200 403.279H1248V344.559H1247V402.056H1200V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1248 403.279H1296V344.559H1295V402.056H1248V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1296 403.279H1344V344.559H1343V402.056H1296V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1344 403.279H1392V344.559H1391V402.056H1344V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1392 403.279H1440V344.559H1439V402.056H1392V403.279Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 462H48V403.279H47V460.777H0V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48 462H96V403.279H95V460.777H48V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M96 462H144V403.279H143V460.777H96V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M144 462H192V403.279H191V460.777H144V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M192 462H240V403.279H239V460.777H192V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M240 462H288V403.279H287V460.777H240V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M288 462H336V403.279H335V460.777H288V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M336 462H384V403.279H383V460.777H336V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M384 462H432V403.279H431V460.777H384V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M432 462H480V403.279H479V460.777H432V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M480 462H528V403.279H527V460.777H480V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M528 462H576V403.279H575V460.777H528V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M576 462H624V403.279H623V460.777H576V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M624 462H672V403.279H671V460.777H624V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M672 462H720V403.279H719V460.777H672V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M720 462H768V403.279H767V460.777H720V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M768 462H816V403.279H815V460.777H768V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M816 462H864V403.279H863V460.777H816V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M864 462H912V403.279H911V460.777H864V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M912 462H960V403.279H959V460.777H912V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M960 462H1008V403.279H1007V460.777H960V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1008 462H1056V403.279H1055V460.777H1008V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1056 462H1104V403.279H1103V460.777H1056V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1104 462H1152V403.279H1151V460.777H1104V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1152 462H1200V403.279H1199V460.777H1152V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1200 462H1248V403.279H1247V460.777H1200V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1248 462H1296V403.279H1295V460.777H1248V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1296 462H1344V403.279H1343V460.777H1296V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1344 462H1392V403.279H1391V460.777H1344V462Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1392 462H1440V403.279H1439V460.777H1392V462Z" fill="#262626"/>
-</g>
-<defs>
-<clipPath id="clip0_302_24807">
-<rect width="1440" height="462" fill="white"/>
-</clipPath>
-</defs>
-</svg>

static/library/cursor_dark.svg

@@ -1 +1,12 @@
-<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M11.925 24l10.425-6-10.425-6L1.5 18l10.425 6z" fill="url(#lobe-icons-cursorundefined-fill-0)"></path><path d="M22.35 18V6L11.925 0v12l10.425 6z" fill="url(#lobe-icons-cursorundefined-fill-1)"></path><path d="M11.925 0L1.5 6v12l10.425-6V0z" fill="url(#lobe-icons-cursorundefined-fill-2)"></path><path d="M22.35 6L11.925 24V12L22.35 6z" fill="#555"></path><path d="M22.35 6l-10.425 6L1.5 6h20.85z" fill="#ffff"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-0" x1="11.925" x2="11.925" y1="12" y2="24"><stop offset=".16" stop-color="#ffff" stop-opacity=".39"></stop><stop offset=".658" stop-color="#ffff" stop-opacity=".8"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-1" x1="22.35" x2="11.925" y1="6.037" y2="12.15"><stop offset=".182" stop-color="#ffff" stop-opacity=".31"></stop><stop offset=".715" stop-color="#ffff" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-2" x1="11.925" x2="1.5" y1="0" y2="18"><stop stop-color="#ffff" stop-opacity=".6"></stop><stop offset=".667" stop-color="#ffff" stop-opacity=".22"></stop></linearGradient></defs></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 466.73 532.09">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #edecec;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"/>
+</svg>

static/library/cursor_light.svg

@@ -1 +1,12 @@
-<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M11.925 24l10.425-6-10.425-6L1.5 18l10.425 6z" fill="url(#lobe-icons-cursorundefined-fill-0)"></path><path d="M22.35 18V6L11.925 0v12l10.425 6z" fill="url(#lobe-icons-cursorundefined-fill-1)"></path><path d="M11.925 0L1.5 6v12l10.425-6V0z" fill="url(#lobe-icons-cursorundefined-fill-2)"></path><path d="M22.35 6L11.925 24V12L22.35 6z" fill="#555"></path><path d="M22.35 6l-10.425 6L1.5 6h20.85z" fill="#000"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-0" x1="11.925" x2="11.925" y1="12" y2="24"><stop offset=".16" stop-color="#000" stop-opacity=".39"></stop><stop offset=".658" stop-color="#000" stop-opacity=".8"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-1" x1="22.35" x2="11.925" y1="6.037" y2="12.15"><stop offset=".182" stop-color="#000" stop-opacity=".31"></stop><stop offset=".715" stop-color="#000" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-2" x1="11.925" x2="1.5" y1="0" y2="18"><stop stop-color="#000" stop-opacity=".6"></stop><stop offset=".667" stop-color="#000" stop-opacity=".22"></stop></linearGradient></defs></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 466.73 532.09">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #26251e;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"/>
+</svg>

static/library/cursor_wordmark_dark.svg

@@ -1 +1,17 @@
-<svg fill="#ffff" fill-rule="evenodd" style="flex:none;line-height:1" viewBox="0 0 125 24" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M2 12C2 5.8 5.94 2.329 11.699 2.329h6.914v3.693H11.92c-3.526 0-5.923 2.012-5.923 5.978 0 3.966 2.397 5.978 5.923 5.978h6.694v3.693H11.7C5.94 21.67 2 18.145 2 12zm20.194 3.5V2.331h3.857v12.37c0 2.396 1.24 3.25 3.278 3.25h2.313c2.012 0 3.278-.854 3.278-3.25V2.33h3.83v13.197c0 4.16-2.754 6.143-6.475 6.143h-3.581c-3.746 0-6.502-1.984-6.502-6.17h.002zM42.909 2.331h11.433c3.913 0 5.87 2.094 5.87 5.455 0 2.149-1.02 3.885-2.646 4.353 1.681.192 2.48 1.405 2.48 2.865v6.667h-3.884v-5.758c0-1.02-.304-1.736-1.68-1.736h-7.688v7.494H42.91V2.33zM53.82 10.57c1.764 0 2.48-.937 2.48-2.314 0-1.488-.715-2.285-2.533-2.285h-6.97v4.601h7.026l-.003-.002zm9.834 7.436h10.663c1.296 0 2.121-.716 2.121-2.012 0-1.35-.853-1.873-2.204-1.985l-5.374-.412c-3.388-.248-5.702-1.957-5.702-5.594 0-3.609 2.561-5.674 5.923-5.674h10.551v3.665H69.301c-1.488 0-2.26.716-2.26 1.984 0 1.321.827 1.873 2.288 2.012l5.454.385c3.333.248 5.538 2.012 5.538 5.565 0 3.417-2.341 5.73-5.73 5.73H63.65v-3.664h.003zm18.623-6.034c0-5.87 4.242-9.972 9.918-9.972h.056c5.675 0 9.947 4.105 9.947 9.972 0 5.895-4.27 10.028-9.947 10.028h-.056c-5.674 0-9.918-4.133-9.918-10.028zm9.946 6.282c3.498 0 6.062-2.48 6.062-6.254 0-3.746-2.561-6.254-6.062-6.254-3.472 0-6.034 2.508-6.034 6.254 0 3.774 2.562 6.254 6.034 6.254zm13.03-15.923h11.432c3.913 0 5.87 2.094 5.87 5.455 0 2.149-1.02 3.885-2.645 4.353 1.68.192 2.48 1.405 2.48 2.865v6.667h-3.885v-5.758c0-1.02-.304-1.736-1.681-1.736h-7.686v7.494h-3.885V2.33zm10.911 8.239c1.764 0 2.48-.937 2.48-2.314 0-1.488-.716-2.285-2.534-2.285h-6.97v4.601h7.026l-.002-.002z"></path></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1655.29 278.83">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #edecec;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M139.03,4.61h90.64v49.93h-87.57c-47.24,0-84.11,27.27-84.11,84.88s36.87,84.88,84.11,84.88h87.57v49.93h-94.48c-79.12,0-135.19-46.48-135.19-134.82S59.91,4.61,139.03,4.61Z"/>
+  <path class="st0" d="M275.75,4.61h56.07v164.76c0,41.09,18.82,60.3,62.99,60.3s62.99-19.2,62.99-60.3V4.61h56.07v176.28c0,59.91-38.02,97.94-119.06,97.94s-119.06-38.41-119.06-98.32V4.61Z"/>
+  <path class="st0" d="M806.9,81.04c0,29.96-17.28,53-40.33,62.99v.77c24.2,3.46,36.49,20.74,36.87,44.17l1.15,85.26h-56.07l-1.15-76.04c-.38-16.9-10.37-27.27-30.34-27.27h-93.33v103.31h-56.07V4.61h154.78c50.7,0,84.49,25.73,84.49,76.43h0ZM750.45,88.72c0-23.04-12.29-35.72-35.33-35.72h-91.41v71.43h92.17c21.12,0,34.57-12.67,34.57-35.72h0Z"/>
+  <path class="st0" d="M1018.9,195.49c0-19.2-12.29-27.27-30.72-28.8l-62.22-5.76c-53.77-4.99-81.81-26.12-81.81-77.2S878.72,4.61,928.26,4.61h137.49v48.39h-133.65c-19.2,0-31.49,9.99-31.49,29.19s12.67,28.42,31.88,29.96l63.37,5.38c48.01,4.22,79.5,26.12,79.5,77.58s-33.41,79.12-80.65,79.12h-143.64v-48.39h138.26c18.05,0,29.57-12.29,29.57-30.34h0Z"/>
+  <path class="st0" d="M1239.35,0c84.49,0,137.88,54.15,137.88,139.03s-55.69,139.8-140.18,139.8-137.88-54.92-137.88-139.8S1154.86,0,1239.35,0ZM1319.24,139.41c0-56.84-33.03-90.25-81.04-90.25s-81.04,33.41-81.04,90.25,33.03,90.25,81.04,90.25,81.04-33.41,81.04-90.25Z"/>
+  <path class="st0" d="M1655.29,81.04c0,29.96-17.28,53-40.33,62.99v.77c24.2,3.46,36.49,20.74,36.87,44.17l1.15,85.26h-56.07l-1.15-76.04c-.38-16.9-10.37-27.27-30.34-27.27h-93.33v103.31h-56.07V4.61h154.78c50.7,0,84.49,25.73,84.49,76.43h0ZM1598.83,88.72c0-23.04-12.29-35.72-35.33-35.72h-91.41v71.43h92.17c21.12,0,34.57-12.67,34.57-35.72h0Z"/>
+</svg>

static/library/cursor_wordmark_light.svg

@@ -1 +1,17 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 125 24" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M2 12C2 5.8 5.94 2.329 11.699 2.329h6.914v3.693H11.92c-3.526 0-5.923 2.012-5.923 5.978 0 3.966 2.397 5.978 5.923 5.978h6.694v3.693H11.7C5.94 21.67 2 18.145 2 12zm20.194 3.5V2.331h3.857v12.37c0 2.396 1.24 3.25 3.278 3.25h2.313c2.012 0 3.278-.854 3.278-3.25V2.33h3.83v13.197c0 4.16-2.754 6.143-6.475 6.143h-3.581c-3.746 0-6.502-1.984-6.502-6.17h.002zM42.909 2.331h11.433c3.913 0 5.87 2.094 5.87 5.455 0 2.149-1.02 3.885-2.646 4.353 1.681.192 2.48 1.405 2.48 2.865v6.667h-3.884v-5.758c0-1.02-.304-1.736-1.68-1.736h-7.688v7.494H42.91V2.33zM53.82 10.57c1.764 0 2.48-.937 2.48-2.314 0-1.488-.715-2.285-2.533-2.285h-6.97v4.601h7.026l-.003-.002zm9.834 7.436h10.663c1.296 0 2.121-.716 2.121-2.012 0-1.35-.853-1.873-2.204-1.985l-5.374-.412c-3.388-.248-5.702-1.957-5.702-5.594 0-3.609 2.561-5.674 5.923-5.674h10.551v3.665H69.301c-1.488 0-2.26.716-2.26 1.984 0 1.321.827 1.873 2.288 2.012l5.454.385c3.333.248 5.538 2.012 5.538 5.565 0 3.417-2.341 5.73-5.73 5.73H63.65v-3.664h.003zm18.623-6.034c0-5.87 4.242-9.972 9.918-9.972h.056c5.675 0 9.947 4.105 9.947 9.972 0 5.895-4.27 10.028-9.947 10.028h-.056c-5.674 0-9.918-4.133-9.918-10.028zm9.946 6.282c3.498 0 6.062-2.48 6.062-6.254 0-3.746-2.561-6.254-6.062-6.254-3.472 0-6.034 2.508-6.034 6.254 0 3.774 2.562 6.254 6.034 6.254zm13.03-15.923h11.432c3.913 0 5.87 2.094 5.87 5.455 0 2.149-1.02 3.885-2.645 4.353 1.68.192 2.48 1.405 2.48 2.865v6.667h-3.885v-5.758c0-1.02-.304-1.736-1.681-1.736h-7.686v7.494h-3.885V2.33zm10.911 8.239c1.764 0 2.48-.937 2.48-2.314 0-1.488-.716-2.285-2.534-2.285h-6.97v4.601h7.026l-.002-.002z"></path></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1655.29 278.83">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #26251e;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M139.03,4.61h90.64v49.93h-87.57c-47.24,0-84.11,27.27-84.11,84.88s36.87,84.88,84.11,84.88h87.57v49.93h-94.48c-79.12,0-135.19-46.48-135.19-134.82S59.91,4.61,139.03,4.61Z"/>
+  <path class="st0" d="M275.75,4.61h56.07v164.76c0,41.09,18.82,60.3,62.99,60.3s62.99-19.2,62.99-60.3V4.61h56.07v176.28c0,59.91-38.02,97.94-119.06,97.94s-119.06-38.41-119.06-98.32V4.61Z"/>
+  <path class="st0" d="M806.9,81.04c0,29.96-17.28,53-40.33,62.99v.77c24.2,3.46,36.49,20.74,36.87,44.17l1.15,85.26h-56.07l-1.15-76.04c-.38-16.9-10.37-27.27-30.34-27.27h-93.33v103.31h-56.07V4.61h154.78c50.7,0,84.49,25.73,84.49,76.43h0ZM750.45,88.72c0-23.04-12.29-35.72-35.33-35.72h-91.41v71.43h92.17c21.12,0,34.57-12.67,34.57-35.72h0Z"/>
+  <path class="st0" d="M1018.9,195.49c0-19.2-12.29-27.27-30.72-28.8l-62.22-5.76c-53.77-4.99-81.81-26.12-81.81-77.2S878.72,4.61,928.26,4.61h137.49v48.39h-133.65c-19.2,0-31.49,9.99-31.49,29.19s12.67,28.42,31.88,29.96l63.37,5.38c48.01,4.22,79.5,26.12,79.5,77.58s-33.41,79.12-80.65,79.12h-143.64v-48.39h138.26c18.05,0,29.57-12.29,29.57-30.34h0Z"/>
+  <path class="st0" d="M1239.35,0c84.49,0,137.88,54.15,137.88,139.03s-55.69,139.8-140.18,139.8-137.88-54.92-137.88-139.8S1154.86,0,1239.35,0ZM1319.24,139.41c0-56.84-33.03-90.25-81.04-90.25s-81.04,33.41-81.04,90.25,33.03,90.25,81.04,90.25,81.04-33.41,81.04-90.25Z"/>
+  <path class="st0" d="M1655.29,81.04c0,29.96-17.28,53-40.33,62.99v.77c24.2,3.46,36.49,20.74,36.87,44.17l1.15,85.26h-56.07l-1.15-76.04c-.38-16.9-10.37-27.27-30.34-27.27h-93.33v103.31h-56.07V4.61h154.78c50.7,0,84.49,25.73,84.49,76.43h0ZM1598.83,88.72c0-23.04-12.29-35.72-35.33-35.72h-91.41v71.43h92.17c21.12,0,34.57-12.67,34.57-35.72h0Z"/>
+</svg>

static/library/intello-dark.svg

@@ -0,0 +1,5 @@
+<svg width="1452" height="1811" viewBox="0 0 1452 1811" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.674316 0.604492C292.385 195.871 484.449 528.4 484.449 905.793C484.449 1283.14 292.324 1615.47 0.674316 1810.75V1496.81C149.708 1344.34 241.617 1135.84 241.617 905.793C241.617 675.683 149.778 467.016 0.674316 314.539V0.604492Z" fill="#0A0A0A"/>
+<path d="M484.449 0.604492C776.16 195.871 968.224 528.4 968.224 905.793C968.224 1283.14 776.099 1615.47 484.449 1810.75V1496.81C633.483 1344.34 725.392 1135.84 725.392 905.793C725.392 675.683 633.553 467.016 484.449 314.539V0.604492Z" fill="#0A0A0A"/>
+<path d="M968.224 0.604492C1259.94 195.871 1452 528.4 1452 905.793C1452 1283.14 1259.87 1615.47 968.224 1810.75V1496.81C1117.26 1344.34 1209.17 1135.84 1209.17 905.793C1209.17 675.683 1117.33 467.016 968.224 314.539V0.604492Z" fill="#0A0A0A"/>
+</svg>

static/library/intello-light.svg

@@ -0,0 +1,5 @@
+<svg width="1452" height="1811" viewBox="0 0 1452 1811" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.674316 0.604492C292.385 195.871 484.449 528.4 484.449 905.793C484.449 1283.14 292.324 1615.47 0.674316 1810.75V1496.81C149.708 1344.34 241.617 1135.84 241.617 905.793C241.617 675.683 149.778 467.016 0.674316 314.539V0.604492Z" fill="#EDEDED"/>
+<path d="M484.449 0.604492C776.16 195.871 968.224 528.4 968.224 905.793C968.224 1283.14 776.099 1615.47 484.449 1810.75V1496.81C633.483 1344.34 725.392 1135.84 725.392 905.793C725.392 675.683 633.553 467.016 484.449 314.539V0.604492Z" fill="#EDEDED"/>
+<path d="M968.224 0.604492C1259.94 195.871 1452 528.4 1452 905.793C1452 1283.14 1259.87 1615.47 968.224 1810.75V1496.81C1117.26 1344.34 1209.17 1135.84 1209.17 905.793C1209.17 675.683 1117.33 467.016 968.224 314.539V0.604492Z" fill="#EDEDED"/>
+</svg>

static/library/intello_wordmark_dark.svg

@@ -0,0 +1,12 @@
+<svg width="441" height="113" viewBox="0 0 441 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M121.443 7.40522H134.492V105.483H121.443V7.40522Z" fill="#0A0A0A"/>
+<path d="M149.024 34.466H160.013V45.7298H160.288C165.141 37.1217 172.834 32.8176 183.365 32.8176C188.035 32.8176 191.927 33.4586 195.041 34.7407C198.155 36.0227 200.673 37.8085 202.596 40.0979C204.519 42.3873 205.847 45.1346 206.58 48.3397C207.404 51.4533 207.816 54.9332 207.816 58.7794V105.483H196.14V57.4058C196.14 53.0101 194.858 49.5302 192.294 46.9661C189.73 44.402 186.204 43.1199 181.717 43.1199C178.145 43.1199 175.032 43.6693 172.376 44.7683C169.812 45.8672 167.66 47.424 165.92 49.4386C164.18 51.4533 162.852 53.8343 161.936 56.5816C161.112 59.2373 160.7 62.1677 160.7 65.3729V105.483H149.024V34.466Z" fill="#0A0A0A"/>
+<path d="M236.067 34.466H250.215V44.7683H236.067V88.8621C236.067 90.2358 236.158 91.3347 236.341 92.1589C236.616 92.9831 237.074 93.6241 237.715 94.082C238.356 94.5399 239.226 94.8604 240.325 95.0435C241.515 95.1351 243.026 95.1809 244.858 95.1809H250.215V105.483H241.287C238.264 105.483 235.655 105.3 233.457 104.934C231.351 104.476 229.611 103.697 228.237 102.599C226.955 101.5 225.993 99.9428 225.352 97.9282C224.711 95.9135 224.391 93.2578 224.391 89.9611V44.7683H212.303V34.466H224.391V13.1745H236.067V34.466Z" fill="#0A0A0A"/>
+<path d="M307.006 63.175C306.822 60.4278 306.181 57.8179 305.082 55.3453C304.075 52.8727 302.656 50.7665 300.824 49.0266C299.084 47.195 296.978 45.7756 294.505 44.7683C292.124 43.6693 289.469 43.1199 286.538 43.1199C283.516 43.1199 280.769 43.6693 278.296 44.7683C275.915 45.7756 273.855 47.195 272.115 49.0266C270.375 50.8581 269.002 53.0101 267.994 55.4827C266.987 57.8636 266.392 60.4278 266.208 63.175H307.006ZM318.269 82.9555C316.713 90.9226 313.279 96.9208 307.967 100.95C302.656 104.98 295.971 106.994 287.912 106.994C282.234 106.994 277.289 106.078 273.077 104.247C268.956 102.415 265.476 99.8513 262.637 96.5545C259.798 93.2578 257.646 89.32 256.181 84.7412C254.807 80.1624 254.029 75.1715 253.846 69.7685C253.846 64.3655 254.67 59.4204 256.318 54.9332C257.967 50.446 260.256 46.554 263.186 43.2573C266.208 39.9605 269.734 37.3964 273.763 35.5649C277.884 33.7333 282.372 32.8176 287.225 32.8176C293.544 32.8176 298.764 34.1454 302.885 36.8011C307.097 39.3653 310.44 42.662 312.912 46.6914C315.476 50.7207 317.216 55.1164 318.132 59.8783C319.139 64.6403 319.552 69.1733 319.368 73.4774H266.208C266.117 76.5909 266.483 79.5672 267.307 82.406C268.132 85.1533 269.459 87.6259 271.291 89.8237C273.122 91.9299 275.458 93.6241 278.296 94.9062C281.135 96.1882 284.478 96.8293 288.324 96.8293C293.269 96.8293 297.299 95.6846 300.412 93.3952C303.617 91.1058 305.724 87.6259 306.731 82.9555H318.269Z" fill="#0A0A0A"/>
+<path d="M326.664 7.40522H338.34V105.483H326.664V7.40522Z" fill="#0A0A0A"/>
+<path d="M351.62 7.40522H363.296V105.483H351.62V7.40522Z" fill="#0A0A0A"/>
+<path d="M384.406 70.0433C384.406 74.3473 384.955 78.1935 386.054 81.5818C387.245 84.8786 388.847 87.6717 390.862 89.9611C392.877 92.1589 395.212 93.853 397.868 95.0435C400.615 96.234 403.5 96.8293 406.522 96.8293C409.544 96.8293 412.382 96.234 415.038 95.0435C417.785 93.853 420.166 92.1589 422.181 89.9611C424.196 87.6717 425.753 84.8786 426.851 81.5818C428.042 78.1935 428.637 74.3473 428.637 70.0433C428.637 65.7392 428.042 61.9388 426.851 58.642C425.753 55.2537 424.196 52.4149 422.181 50.1255C420.166 47.8361 417.785 46.0961 415.038 44.9056C412.382 43.7151 409.544 43.1199 406.522 43.1199C403.5 43.1199 400.615 43.7151 397.868 44.9056C395.212 46.0961 392.877 47.8361 390.862 50.1255C388.847 52.4149 387.245 55.2537 386.054 58.642C384.955 61.9388 384.406 65.7392 384.406 70.0433ZM372.043 70.0433C372.043 64.8234 372.776 59.9699 374.241 55.4827C375.706 50.9039 377.904 46.9661 380.834 43.6693C383.765 40.281 387.382 37.6253 391.686 35.7022C395.99 33.7791 400.935 32.8176 406.522 32.8176C412.199 32.8176 417.144 33.7791 421.357 35.7022C425.661 37.6253 429.278 40.281 432.209 43.6693C435.139 46.9661 437.337 50.9039 438.802 55.4827C440.267 59.9699 441 64.8234 441 70.0433C441 75.2631 440.267 80.1166 438.802 84.6039C437.337 89.0911 435.139 93.0289 432.209 96.4172C429.278 99.7139 425.661 102.324 421.357 104.247C417.144 106.078 412.199 106.994 406.522 106.994C400.935 106.994 395.99 106.078 391.686 104.247C387.382 102.324 383.765 99.7139 380.834 96.4172C377.904 93.0289 375.706 89.0911 374.241 84.6039C372.776 80.1166 372.043 75.2631 372.043 70.0433Z" fill="#0A0A0A"/>
+<path d="M0.0310059 0.0463867C18.206 12.2124 30.1725 32.9306 30.1725 56.444C30.1725 79.9545 18.2022 100.66 0.0310059 112.827V93.2673C9.31654 83.7678 15.0429 70.7772 15.0429 56.444C15.0429 42.107 9.32088 29.1061 0.0310059 19.606V0.0463867Z" fill="#0A0A0A"/>
+<path d="M30.1725 0.0463867C48.3475 12.2124 60.314 32.9306 60.314 56.444C60.314 79.9545 48.3437 100.66 30.1725 112.827V93.2673C39.4581 83.7678 45.1844 70.7772 45.1844 56.444C45.1844 42.107 39.4624 29.1061 30.1725 19.606V0.0463867Z" fill="#0A0A0A"/>
+<path d="M60.314 0.0463867C78.489 12.2124 90.4556 32.9306 90.4556 56.444C90.4556 79.9545 78.4852 100.66 60.314 112.827V93.2673C69.5996 83.7678 75.3259 70.7772 75.3259 56.444C75.3259 42.107 69.6039 29.1061 60.314 19.606V0.0463867Z" fill="#0A0A0A"/>
+</svg>

static/library/intello_wordmark_light.svg

@@ -0,0 +1,12 @@
+<svg width="441" height="113" viewBox="0 0 441 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M121.443 7.40522H134.492V105.483H121.443V7.40522Z" fill="#EDEDED"/>
+<path d="M149.024 34.466H160.013V45.7298H160.288C165.141 37.1217 172.834 32.8176 183.365 32.8176C188.035 32.8176 191.927 33.4586 195.041 34.7407C198.155 36.0227 200.673 37.8085 202.596 40.0979C204.519 42.3873 205.847 45.1346 206.58 48.3397C207.404 51.4533 207.816 54.9332 207.816 58.7794V105.483H196.14V57.4058C196.14 53.0101 194.858 49.5302 192.294 46.9661C189.73 44.402 186.204 43.1199 181.717 43.1199C178.145 43.1199 175.032 43.6693 172.376 44.7683C169.812 45.8672 167.66 47.424 165.92 49.4386C164.18 51.4533 162.852 53.8343 161.936 56.5816C161.112 59.2373 160.7 62.1677 160.7 65.3729V105.483H149.024V34.466Z" fill="#EDEDED"/>
+<path d="M236.067 34.466H250.215V44.7683H236.067V88.8621C236.067 90.2358 236.158 91.3347 236.341 92.1589C236.616 92.9831 237.074 93.6241 237.715 94.082C238.356 94.5399 239.226 94.8604 240.325 95.0435C241.515 95.1351 243.026 95.1809 244.858 95.1809H250.215V105.483H241.287C238.264 105.483 235.655 105.3 233.457 104.934C231.351 104.476 229.611 103.697 228.237 102.599C226.955 101.5 225.993 99.9428 225.352 97.9282C224.711 95.9135 224.391 93.2578 224.391 89.9611V44.7683H212.303V34.466H224.391V13.1745H236.067V34.466Z" fill="#EDEDED"/>
+<path d="M307.006 63.175C306.822 60.4278 306.181 57.8179 305.082 55.3453C304.075 52.8727 302.656 50.7665 300.824 49.0266C299.084 47.195 296.978 45.7756 294.505 44.7683C292.124 43.6693 289.469 43.1199 286.538 43.1199C283.516 43.1199 280.769 43.6693 278.296 44.7683C275.915 45.7756 273.855 47.195 272.115 49.0266C270.375 50.8581 269.002 53.0101 267.994 55.4827C266.987 57.8636 266.392 60.4278 266.208 63.175H307.006ZM318.269 82.9555C316.713 90.9226 313.279 96.9208 307.967 100.95C302.656 104.98 295.971 106.994 287.912 106.994C282.234 106.994 277.289 106.078 273.077 104.247C268.956 102.415 265.476 99.8513 262.637 96.5545C259.798 93.2578 257.646 89.32 256.181 84.7412C254.807 80.1624 254.029 75.1715 253.846 69.7685C253.846 64.3655 254.67 59.4204 256.318 54.9332C257.967 50.446 260.256 46.554 263.186 43.2573C266.208 39.9605 269.734 37.3964 273.763 35.5649C277.884 33.7333 282.372 32.8176 287.225 32.8176C293.544 32.8176 298.764 34.1454 302.885 36.8011C307.097 39.3653 310.44 42.662 312.912 46.6914C315.476 50.7207 317.216 55.1164 318.132 59.8783C319.139 64.6403 319.552 69.1733 319.368 73.4774H266.208C266.117 76.5909 266.483 79.5672 267.307 82.406C268.132 85.1533 269.459 87.6259 271.291 89.8237C273.122 91.9299 275.458 93.6241 278.296 94.9062C281.135 96.1882 284.478 96.8293 288.324 96.8293C293.269 96.8293 297.299 95.6846 300.412 93.3952C303.617 91.1058 305.724 87.6259 306.731 82.9555H318.269Z" fill="#EDEDED"/>
+<path d="M326.664 7.40522H338.34V105.483H326.664V7.40522Z" fill="#EDEDED"/>
+<path d="M351.62 7.40522H363.296V105.483H351.62V7.40522Z" fill="#EDEDED"/>
+<path d="M384.406 70.0433C384.406 74.3473 384.955 78.1935 386.054 81.5818C387.245 84.8786 388.847 87.6717 390.862 89.9611C392.877 92.1589 395.212 93.853 397.868 95.0435C400.615 96.234 403.5 96.8293 406.522 96.8293C409.544 96.8293 412.382 96.234 415.038 95.0435C417.785 93.853 420.166 92.1589 422.181 89.9611C424.196 87.6717 425.753 84.8786 426.851 81.5818C428.042 78.1935 428.637 74.3473 428.637 70.0433C428.637 65.7392 428.042 61.9388 426.851 58.642C425.753 55.2537 424.196 52.4149 422.181 50.1255C420.166 47.8361 417.785 46.0961 415.038 44.9056C412.382 43.7151 409.544 43.1199 406.522 43.1199C403.5 43.1199 400.615 43.7151 397.868 44.9056C395.212 46.0961 392.877 47.8361 390.862 50.1255C388.847 52.4149 387.245 55.2537 386.054 58.642C384.955 61.9388 384.406 65.7392 384.406 70.0433ZM372.043 70.0433C372.043 64.8234 372.776 59.9699 374.241 55.4827C375.706 50.9039 377.904 46.9661 380.834 43.6693C383.765 40.281 387.382 37.6253 391.686 35.7022C395.99 33.7791 400.935 32.8176 406.522 32.8176C412.199 32.8176 417.144 33.7791 421.357 35.7022C425.661 37.6253 429.278 40.281 432.209 43.6693C435.139 46.9661 437.337 50.9039 438.802 55.4827C440.267 59.9699 441 64.8234 441 70.0433C441 75.2631 440.267 80.1166 438.802 84.6039C437.337 89.0911 435.139 93.0289 432.209 96.4172C429.278 99.7139 425.661 102.324 421.357 104.247C417.144 106.078 412.199 106.994 406.522 106.994C400.935 106.994 395.99 106.078 391.686 104.247C387.382 102.324 383.765 99.7139 380.834 96.4172C377.904 93.0289 375.706 89.0911 374.241 84.6039C372.776 80.1166 372.043 75.2631 372.043 70.0433Z" fill="#EDEDED"/>
+<path d="M0.0310059 0.0463867C18.206 12.2124 30.1725 32.9306 30.1725 56.444C30.1725 79.9545 18.2022 100.66 0.0310059 112.827V93.2673C9.31654 83.7678 15.0429 70.7772 15.0429 56.444C15.0429 42.107 9.32088 29.1061 0.0310059 19.606V0.0463867Z" fill="#EDEDED"/>
+<path d="M30.1725 0.0463867C48.3475 12.2124 60.314 32.9306 60.314 56.444C60.314 79.9545 48.3437 100.66 30.1725 112.827V93.2673C39.4581 83.7678 45.1844 70.7772 45.1844 56.444C45.1844 42.107 39.4624 29.1061 30.1725 19.606V0.0463867Z" fill="#EDEDED"/>
+<path d="M60.314 0.0463867C78.489 12.2124 90.4556 32.9306 90.4556 56.444C90.4556 79.9545 78.4852 100.66 60.314 112.827V93.2673C69.5996 83.7678 75.3259 70.7772 75.3259 56.444C75.3259 42.107 69.6039 29.1061 60.314 19.606V0.0463867Z" fill="#EDEDED"/>
+</svg>

static/library/kilocode-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#fff"><path d="M23,26v-2h3v-5l-2-2h-4v2h-3v5l2,2h4ZM20,20h3v3h-3v-3Z"/><rect x="12" y="17" width="3" height="3"/><polygon points="26 12 23 12 23 9 20 6 17 6 17 9 20 9 20 12 17 12 17 15 26 15 26 12"/><path d="M0,0v32h32V0H0ZM29,29H3V3h26v26Z"/><polygon points="15 26 15 23 9 23 9 17 6 17 6 23.1875 8.8125 26 15 26"/><rect x="12" y="6" width="3" height="3"/><polygon points="9 12 12 12 12 15 15 15 15 12 12 9 9 9 9 6 6 6 6 15 9 15 9 12"/></svg>

static/library/kilocode-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#000"><path d="M23,26v-2h3v-5l-2-2h-4v2h-3v5l2,2h4ZM20,20h3v3h-3v-3Z"/><rect x="12" y="17" width="3" height="3"/><polygon points="26 12 23 12 23 9 20 6 17 6 17 9 20 9 20 12 17 12 17 15 26 15 26 12"/><path d="M0,0v32h32V0H0ZM29,29H3V3h26v26Z"/><polygon points="15 26 15 23 9 23 9 17 6 17 6 23.1875 8.8125 26 15 26"/><rect x="12" y="6" width="3" height="3"/><polygon points="9 12 12 12 12 15 15 15 15 12 12 9 9 9 9 6 6 6 6 15 9 15 9 12"/></svg>

static/library/webgl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1200" height="500" baseProfile="tiny" viewBox="0 0 1200 500"><g fill="#900"><path d="M1113.5 323.6h-7.3v19.1h-6.4v-19.1h-7.4v-5.5h21.1v5.5zM1116.4 318.1h9.4l4.3 16.4 4.3-16.4h9.4v24.6h-6V324h-.1l-5.1 18.7h-4.9l-5.2-18.7h-.1v18.7h-6v-24.6z"/></g><g fill="#900"><path d="M859.4 341.3c-9 3.8-18 5.7-27.1 5.7-14.4 0-27.4-2.5-38.9-7.5s-21.2-11.9-29.1-20.7c-7.9-8.8-14-19.1-18.2-31-4.2-11.9-6.3-24.7-6.3-38.4 0-14.1 2.1-27.1 6.3-39.2 4.2-12.1 10.2-22.6 18.1-31.5 7.9-9 17.6-16 29.1-21.1 11.5-5.1 24.4-7.7 38.9-7.7 9.7 0 19 1.5 28 4.4 9 2.9 17.2 7.2 24.5 12.8 7.3 5.6 13.3 12.6 18 20.9 4.7 8.3 7.6 17.8 8.7 28.5H872c-2.5-10.5-7.2-18.4-14.2-23.7-7-5.3-15.5-7.9-25.6-7.9-9.3 0-17.2 1.8-23.7 5.4-6.5 3.6-11.8 8.4-15.8 14.5s-7 13-8.8 20.7c-1.8 7.7-2.8 15.7-2.8 24 0 7.9.9 15.6 2.8 23.1 1.8 7.5 4.8 14.2 8.8 20.2 4 6 9.3 10.8 15.8 14.4 6.5 3.6 14.4 5.4 23.7 5.4 13.7 0 24.3-3.5 31.8-10.4s11.8-16.9 13.1-30.1h-41.6V241h78.9v101.7h-26.3l-4.2-21.3c-7.3 9.5-15.5 16.1-24.5 19.9zM981.5 154.6v153.1h91.7v34.9h-133v-188h41.3z"/><path d="M786.3 366c-63.1 38.4-157.7 60.2-263.2 60.2C333 426.2 179 347.1 179 249.4c0-97.6 154.1-176.8 344.1-176.8 105.9 0 200.8 22.3 263.9 60.9C718.2 68.8 594.6 23.4 453.4 23.3 237 23.3 61.6 124.5 61.6 249.4c0 124.9 175.4 226.2 391.7 226.2 140.7 0 263.9-45.3 333-109.6z"/></g><g fill="#900"><path d="m439.6 139.9-36.3 157-43.8-157h-33.2l-43.8 157-36.3-157h-34.3l53.8 204.7h32.2l45.3-160.8 44.7 160.8h32.3l55.7-204.7zM566.5 226.1c-5-7.1-11.3-12.5-18.7-16.2-7.6-3.8-16.4-5.7-26.2-5.7-11 0-20.9 2-29.5 5.9-8.1 3.7-15 9.2-20.6 16.3-10.3 13.1-15.7 31.6-15.7 53.5 0 9.7 1.4 18.9 4.1 27.1 2.7 8.3 6.8 15.6 12 21.7 11 12.8 26.7 19.6 45.4 19.6 9.8 0 17.8-1 24.5-3.1 5.8-1.8 9.7-4.2 12.9-6.3 4.1-2.7 7.8-6 11.2-9.8 2.8-3.3 5.3-6.9 7.5-10.8 3.8-7 5.7-13.6 6.1-17l.3-2.3h-26.7l-.1 1.9c-.7 8.7-12.1 24.2-32.4 24.2-29 0-35.9-21-36.4-39.5h97.2v-2.1c0-11.9-1.2-22.8-3.6-32.3-2.7-9.9-6.4-18.3-11.3-25.1zm-48 2.1c21.5 0 33 11.6 35.1 35.4H484c1.1-19.3 16.4-35.4 34.5-35.4zM715.7 245.7c-2.6-8.3-6.4-15.6-11.3-21.7-5.1-6.3-11.3-11.2-18.4-14.6-7.4-3.5-15.7-5.3-24.7-5.3-8.3.1-15.8 1.9-22.4 5.4-5.5 2.8-10.4 6.8-14.6 11.8v-62.8h-26.6v186H623v-12.7c2.2 2.9 5.1 6 8.9 8.7 7.2 5.2 16.1 7.8 26.4 7.8 11.1 0 21.1-2.5 29.5-7.4 7.5-4.4 13.9-10.7 18.9-18.7 4.4-7 7.7-15.3 9.9-24.6 1.9-8 2.9-16.8 2.9-25.4.1-9.3-1.2-18.3-3.8-26.5zm-23.9 30.2c0 14.6-2.9 26.8-8.5 35.4-5.9 9.1-14.5 13.7-25.5 13.7-15.9 0-34.5-11.1-34.5-42.5 0-15 1.9-26.6 5.7-35.4 5.5-12.7 14.8-18.8 28.3-18.8 14.4 0 24.1 5.6 29.5 17.3 4.4 9.6 5 21.3 5 30.3z"/></g></svg>

static/library/webgl_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1200" height="500" baseProfile="tiny" viewBox="0 0 1200 500"><g fill="#FFF"><path d="M1113.5 323.6h-7.3v19.1h-6.4v-19.1h-7.4v-5.5h21.1v5.5zM1116.4 318.1h9.4l4.3 16.4 4.3-16.4h9.4v24.6h-6V324h-.1l-5.1 18.7h-4.9l-5.2-18.7h-.1v18.7h-6v-24.6z"/></g><g fill="#FFF"><path d="M859.4 341.3c-9 3.8-18 5.7-27.1 5.7-14.4 0-27.4-2.5-38.9-7.5s-21.2-11.9-29.1-20.7c-7.9-8.8-14-19.1-18.2-31-4.2-11.9-6.3-24.7-6.3-38.4 0-14.1 2.1-27.1 6.3-39.2 4.2-12.1 10.2-22.6 18.1-31.5 7.9-9 17.6-16 29.1-21.1 11.5-5.1 24.4-7.7 38.9-7.7 9.7 0 19 1.5 28 4.4 9 2.9 17.2 7.2 24.5 12.8 7.3 5.6 13.3 12.6 18 20.9 4.7 8.3 7.6 17.8 8.7 28.5H872c-2.5-10.5-7.2-18.4-14.2-23.7-7-5.3-15.5-7.9-25.6-7.9-9.3 0-17.2 1.8-23.7 5.4-6.5 3.6-11.8 8.4-15.8 14.5s-7 13-8.8 20.7c-1.8 7.7-2.8 15.7-2.8 24 0 7.9.9 15.6 2.8 23.1 1.8 7.5 4.8 14.2 8.8 20.2 4 6 9.3 10.8 15.8 14.4 6.5 3.6 14.4 5.4 23.7 5.4 13.7 0 24.3-3.5 31.8-10.4s11.8-16.9 13.1-30.1h-41.6V241h78.9v101.7h-26.3l-4.2-21.3c-7.3 9.5-15.5 16.1-24.5 19.9zM981.5 154.6v153.1h91.7v34.9h-133v-188h41.3z"/><path d="M786.3 366c-63.1 38.4-157.7 60.2-263.2 60.2C333 426.2 179 347.1 179 249.4c0-97.6 154.1-176.8 344.1-176.8 105.9 0 200.8 22.3 263.9 60.9C718.2 68.8 594.6 23.4 453.4 23.3 237 23.3 61.6 124.5 61.6 249.4c0 124.9 175.4 226.2 391.7 226.2 140.7 0 263.9-45.3 333-109.6z"/></g><g fill="#FFF"><path d="m439.6 139.9-36.3 157-43.8-157h-33.2l-43.8 157-36.3-157h-34.3l53.8 204.7h32.2l45.3-160.8 44.7 160.8h32.3l55.7-204.7zM566.5 226.1c-5-7.1-11.3-12.5-18.7-16.2-7.6-3.8-16.4-5.7-26.2-5.7-11 0-20.9 2-29.5 5.9-8.1 3.7-15 9.2-20.6 16.3-10.3 13.1-15.7 31.6-15.7 53.5 0 9.7 1.4 18.9 4.1 27.1 2.7 8.3 6.8 15.6 12 21.7 11 12.8 26.7 19.6 45.4 19.6 9.8 0 17.8-1 24.5-3.1 5.8-1.8 9.7-4.2 12.9-6.3 4.1-2.7 7.8-6 11.2-9.8 2.8-3.3 5.3-6.9 7.5-10.8 3.8-7 5.7-13.6 6.1-17l.3-2.3h-26.7l-.1 1.9c-.7 8.7-12.1 24.2-32.4 24.2-29 0-35.9-21-36.4-39.5h97.2v-2.1c0-11.9-1.2-22.8-3.6-32.3-2.7-9.9-6.4-18.3-11.3-25.1zm-48 2.1c21.5 0 33 11.6 35.1 35.4H484c1.1-19.3 16.4-35.4 34.5-35.4zM715.7 245.7c-2.6-8.3-6.4-15.6-11.3-21.7-5.1-6.3-11.3-11.2-18.4-14.6-7.4-3.5-15.7-5.3-24.7-5.3-8.3.1-15.8 1.9-22.4 5.4-5.5 2.8-10.4 6.8-14.6 11.8v-62.8h-26.6v186H623v-12.7c2.2 2.9 5.1 6 8.9 8.7 7.2 5.2 16.1 7.8 26.4 7.8 11.1 0 21.1-2.5 29.5-7.4 7.5-4.4 13.9-10.7 18.9-18.7 4.4-7 7.7-15.3 9.9-24.6 1.9-8 2.9-16.8 2.9-25.4.1-9.3-1.2-18.3-3.8-26.5zm-23.9 30.2c0 14.6-2.9 26.8-8.5 35.4-5.9 9.1-14.5 13.7-25.5 13.7-15.9 0-34.5-11.1-34.5-42.5 0-15 1.9-26.6 5.7-35.4 5.5-12.7 14.8-18.8 28.3-18.8 14.4 0 24.1 5.6 29.5 17.3 4.4 9.6 5 21.3 5 30.3z"/></g></svg>