wip: css/ui and desktop work

2025-12-21 17:54:23 +01:00 · 2025-10-16 14:53:44 -05:00
parent fc18fc8a08
commit 47d9e01765
52 changed files with 539 additions and 1641 deletions
--- a/package.json
+++ b/package.json
@@ -25,6 +25,8 @@
      "@tsconfig/bun": "1.0.9",
      "@cloudflare/workers-types": "4.20251008.0",
      "@openauthjs/openauth": "0.0.0-20250322224806",
+      "@solidjs/meta": "0.29.4",
+      "@tailwindcss/vite": "4.1.11",
      "diff": "8.0.2",
      "ai": "5.0.8",
      "hono": "4.7.10",
@@ -36,7 +38,6 @@
      "remeda": "2.26.0",
      "solid-js": "1.9.9",
      "tailwindcss": "4.1.11",
-      "@tailwindcss/vite": "4.1.11",
      "vite": "7.1.4",
      "vite-plugin-solid": "2.11.8"
    }
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,10 +1,11 @@
 {
  "name": "@opencode-ai/css",
-  "version": "0.15.5",
+  "version": "0.15.4",
  "type": "module",
  "exports": {
    ".": "./src/index.css",
-    "./*": "./src/*"
+    "./*": "./src/*",
+    "./fonts/*": "./src/assets/fonts/*"
  },
  "scripts": {
    "dev": "bun run dev.ts",
--- a/packages/css/src/assets/fonts/geist-italic.ttf
+++ b/packages/css/src/assets/fonts/geist-italic.ttf
--- a/packages/css/src/assets/fonts/geist-italic.woff2
+++ b/packages/css/src/assets/fonts/geist-italic.woff2
--- a/packages/css/src/assets/fonts/geist-mono-italic.ttf
+++ b/packages/css/src/assets/fonts/geist-mono-italic.ttf
--- a/packages/css/src/assets/fonts/geist-mono-italic.woff2
+++ b/packages/css/src/assets/fonts/geist-mono-italic.woff2
--- a/packages/css/src/assets/fonts/geist-mono.ttf
+++ b/packages/css/src/assets/fonts/geist-mono.ttf
--- a/packages/css/src/assets/fonts/geist-mono.woff2
+++ b/packages/css/src/assets/fonts/geist-mono.woff2
--- a/packages/css/src/assets/fonts/geist.ttf
+++ b/packages/css/src/assets/fonts/geist.ttf
--- a/packages/css/src/assets/fonts/geist.woff2
+++ b/packages/css/src/assets/fonts/geist.woff2
--- a/packages/css/src/base.css
+++ b/packages/css/src/base.css
@@ -30,18 +30,9 @@ html,
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
-  font-family: --theme(
-    --default-font-family,
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji"
-  ); /* 4 */
-  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
-  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
+  font-family: var(--font-sans); /* 4 */
+  font-feature-settings: var(--font-sans--font-feature-settings, normal); /* 5 */
+  font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
 }

@@ -110,19 +101,9 @@ code,
 kbd,
 samp,
 pre {
-  font-family: --theme(
-    --default-mono-font-family,
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace
-  ); /* 1 */
-  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
-  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
+  font-family: var(--font-mono); /* 1 */
+  font-feature-settings: var(--font-mono--font-feature-settings, normal); /* 2 */
+  font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
 }

--- a/packages/css/src/components/button.css
+++ b/packages/css/src/components/button.css
@@ -6,76 +6,66 @@
  border-style: solid;
  border-width: 1px;
  border-radius: var(--radius-md);
-  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  user-select: none;
-  gap: calc(var(--spacing) * 2);
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    outline: none;
-  }
+  gap: calc(var(--spacing) * 0.5);

  &[data-variant="primary"] {
-    border-color: var(--border-default-border);
-    background-color: var(--surface-brand-surface-brand);
-    color: var(--text-on-brand-text-strong-on-brand);
+    border-color: var(--border-base);
+    background-color: var(--surface-brand-base);
+    color: var(--text-on-brand-strong);

    &:hover:not(:disabled) {
-      border-color: var(--border-default-border-hover);
-      background-color: var(--surface-brand-surface-brand-hover);
+      border-color: var(--border-hover);
+      background-color: var(--surface-brand-hover);
    }
    &:active:not(:disabled) {
-      border-color: var(--border-default-border-active);
-      background-color: var(--surface-brand-surface-brand-active);
+      border-color: var(--border-active);
+      background-color: var(--surface-brand-active);
    }
    &:focus:not(:disabled) {
-      border-color: var(--border-default-border-focus);
-      background-color: var(--surface-brand-surface-brand-focus);
+      border-color: var(--border-focus);
+      background-color: var(--surface-brand-focus);
    }
  }

  &[data-variant="secondary"] {
-    border-color: var(--border-default-border);
-    background-color: var(--surface-default-surface);
-    color: var(--text-default-text);
+    border-color: var(--border-base);
+    background-color: var(--surface-base);
+    color: var(--text-strong);

    &:hover:not(:disabled) {
-      border-color: var(--border-default-border-hover);
-      background-color: var(--surface-default-surface-hover);
+      border-color: var(--border-hover);
+      background-color: var(--surface-hover);
    }
    &:active:not(:disabled) {
-      border-color: var(--border-default-border-active);
-      background-color: var(--surface-default-surface-active);
+      border-color: var(--border-active);
+      background-color: var(--surface-active);
    }
    &:focus:not(:disabled) {
-      border-color: var(--border-default-border-focus);
-      background-color: var(--surface-default-surface-focus);
+      border-color: var(--border-focus);
+      background-color: var(--surface-focus);
    }
  }

  &[data-variant="ghost"] {
    border-color: transparent;
    background-color: transparent;
-    color: var(--text-default-text);
+    color: var(--text-strong);

    &:hover:not(:disabled) {
-      background-color: var(--surface-default-surface-hover);
+      background-color: var(--surface-hover);
    }
    &:active:not(:disabled) {
-      border-color: var(--border-default-border-active);
-      background-color: var(--surface-default-surface-active);
+      border-color: var(--border-active);
+      background-color: var(--surface-active);
    }
    &:focus:not(:disabled) {
-      border-color: var(--border-default-border-focus);
-      background-color: var(--surface-default-surface-focus);
+      border-color: var(--border-focus);
+      background-color: var(--surface-focus);
    }
  }

@@ -90,4 +80,15 @@
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }
+
+  &:disabled {
+    border-color: var(--border-disabled);
+    background-color: var(--surface-disabled);
+    color: var(--text-weak);
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
--- a/packages/css/src/components/select.css
+++ b/packages/css/src/components/select.css
@@ -1,58 +1,4 @@
 [data-component="select"] {
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-primary);
-  }
-
-  [data-slot="section"] {
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    font-weight: var(--font-weight-light);
-    text-transform: uppercase;
-    color: var(--text-default-text-weak);
-    opacity: 0.6;
-    margin-top: calc(var(--spacing) * 3);
-    margin-left: calc(var(--spacing) * 2);
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  [data-slot="item"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
-    border-radius: var(--radius-sm);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    color: var(--text-default-text);
-    cursor: pointer;
-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
-    outline: none;
-    user-select: none;
-
-    &[data-highlighted] {
-      background-color: var(--surface-default-surface);
-    }
-
-    &[data-disabled] {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-
-    [data-slot="item-indicator"] {
-      margin-left: auto;
-    }
-  }
-
  [data-slot="trigger"] {
    [data-slot="value"] {
      overflow: hidden;
@@ -63,7 +9,7 @@
      width: fit-content;
      height: fit-content;
      flex-shrink: 0;
-      color: var(--text-default-text-weak);
+      color: var(--text-weak);
      transition: transform 0.1s ease-in-out;
    }
  }
@@ -75,8 +21,8 @@
  border-radius: var(--radius-md);
  border-width: 1px;
  border-style: solid;
-  border-color: var(--border-default-border-weak);
-  background-color: var(--surface-raised-surface-raised);
+  border-color: var(--border-weak-base);
+  background-color: var(--surface-raised-base);
  padding: calc(var(--spacing) * 1);
  box-shadow: var(--shadow-md);
  z-index: 50;
@@ -94,6 +40,62 @@
    max-height: 12rem;
    white-space: nowrap;
    overflow-x: hidden;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  [data-slot="section"] {
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    font-weight: var(--font-weight-light);
+    text-transform: uppercase;
+    color: var(--text-weak);
+    opacity: 0.6;
+    margin-top: calc(var(--spacing) * 3);
+    margin-left: calc(var(--spacing) * 2);
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  [data-slot="item"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    color: var(--text-base);
+    cursor: pointer;
+    transition:
+      background-color 0.2s ease-in-out,
+      color 0.2s ease-in-out;
+    outline: none;
+    user-select: none;
+
+    &[data-highlighted] {
+      background-color: var(--surface-base);
+    }
+
+    &[data-disabled] {
+      background-color: var(--surface-disabled);
+      pointer-events: none;
+    }
+
+    [data-slot="item-indicator"] {
+      margin-left: auto;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--surface-hover);
+    }
  }
 }

--- a/packages/css/src/components/tabs.css
+++ b/packages/css/src/components/tabs.css
@@ -1,98 +1,95 @@
 [data-component="tabs"] {
+  width: 100%;
+  height: 100%;
  display: flex;
  flex-direction: column;
-  height: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-sm);
+  border-color: var(--border-weak-base);
+  background-color: var(--background-weaker);
+  overflow: clip;

  & [data-slot="list"] {
+    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
-    background-color: var(--surface-default-surface);
    overflow-x: auto;

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
-
    &::-webkit-scrollbar {
      display: none;
    }

-    /* Divider between tabs */
-    & > [data-slot="trigger"]:not(:first-child) {
-      border-left: 1px solid var(--border-default-border-weak);
-    }
-
    /* After element to fill remaining space */
    &::after {
      content: "";
      display: block;
      flex-grow: 1;
-      height: calc(var(--spacing) * 8);
-      border-left: 1px solid var(--border-default-border-weak);
-      border-bottom: 1px solid var(--border-default-border-weak);
+      height: 100%;
+      border-bottom: 1px solid var(--border-weak-base);
+      background-color: var(--background-weak);
+      border-top-right-radius: var(--radius-sm);
    }

    &:empty::after {
-      border-left: none;
+      display: none;
    }
  }

  & [data-slot="trigger"] {
    position: relative;
-    padding: 0 calc(var(--spacing) * 3);
-    height: calc(var(--spacing) * 8);
+    height: 36px;
+    padding: 8px 12px;
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
-    color: var(--text-default-text-weak);
+    color: var(--text-weak);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
-    border-bottom: 1px solid var(--border-default-border-weak);
-    background-color: transparent;
+    border-bottom: 1px solid var(--border-weak-base);
+    border-right: 1px solid var(--border-weak-base);
+    background-color: var(--background-weak);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;

    &:disabled {
      pointer-events: none;
-      opacity: 0.5;
+      color: var(--text-weaker);
    }
-
    &:focus-visible {
      outline: none;
-      box-shadow: 0 0 0 2px var(--border-default-border-focus);
+      box-shadow: 0 0 0 2px var(--border-focus);
    }
-
    &[data-selected] {
-      color: var(--text-default-text);
-      background-color: var(--surface-panel-surface);
+      color: var(--text-base);
+      background-color: transparent;
      border-bottom-color: transparent;
    }
-
    &:hover:not(:disabled):not([data-selected]) {
-      color: var(--text-default-text);
+      color: var(--text-strong);
    }
  }

  & [data-slot="content"] {
-    background-color: var(--surface-panel-surface);
    overflow-y: auto;
    flex: 1;

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
-
    &::-webkit-scrollbar {
      display: none;
    }

    &:focus-visible {
      outline: none;
-      box-shadow: 0 0 0 2px var(--border-default-border-focus);
    }
  }
 }
--- a/packages/css/src/components/tooltip.css
+++ b/packages/css/src/components/tooltip.css
@@ -0,0 +1,53 @@
+/* [data-component="tooltip-trigger"] { */
+/*   display: flex; */
+/*   align-items: center; */
+/* } */
+
+[data-component="tooltip"] {
+  z-index: 1000;
+  max-width: 320px;
+  border-radius: var(--radius-md);
+  background-color: var(--surface-base);
+  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-base);
+  box-shadow: var(--shadow-md);
+  pointer-events: none !important;
+  transition: all 150ms ease-out;
+  transform: translate3d(0, 0, 0);
+  transform-origin: var(--kb-tooltip-content-transform-origin);
+
+  &[data-expanded] {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  &[data-closed] {
+    opacity: 0;
+  }
+
+  &[data-placement="top"] {
+    &[data-closed] {
+      transform: translate3d(0, 4px, 0);
+    }
+  }
+
+  &[data-placement="bottom"] {
+    &[data-closed] {
+      transform: translate3d(0, -4px, 0);
+    }
+  }
+
+  &[data-placement="left"] {
+    &[data-closed] {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
+
+  &[data-placement="right"] {
+    &[data-closed] {
+      transform: translate3d(-4px, 0, 0);
+    }
+  }
+}
--- a/packages/css/src/index.css
+++ b/packages/css/src/index.css
@@ -9,5 +9,6 @@
@import "./components/icon.css" layer(components);
@import "./components/select.css" layer(components);
@import "./components/tabs.css" layer(components);
+@import "./components/tooltip.css" layer(components);

@import "./utilities.css" layer(utilities);
--- a/packages/css/src/tailwind.css
+++ b/packages/css/src/tailwind.css
@@ -1,8 +1,9 @@
-@import "./index.css";
-
+@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

+@import "./index.css";
+
@theme {
  --shadow-*: initial;
  --shadow-xs-border-selected: var(--shadow-xs-border-selected);
--- a/packages/css/src/theme.css
+++ b/packages/css/src/theme.css
@@ -1,8 +1,13 @@
 :root {
  --font-sans:
-    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    geist, geist-fallback, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans--font-feature-settings: "ss02" 1;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-mono:
+    geist-mono, geist-mono-fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --font-mono--font-feature-settings: "ss02" 1;

  --size-12: 12;
  --size-14: 14;
@@ -99,13 +104,18 @@
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;

-  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
-  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-xs-border-selected:
+    0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
+    0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
+    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+
+  /* --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); */
+  /* --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); */
+  /* --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); */
+  /* --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); */
+  /* --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); */
+  /* --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); */
+  /* --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); */

  /* --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); */
  /* --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); */
--- a/packages/desktop/index.html
+++ b/packages/desktop/index.html
@@ -1,12 +1,11 @@
 <!doctype html>
-<html lang="en" class="h-full bg-background">
+<html lang="en" class="h-full bg-background-weak">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.svg" />
-    <link rel="stylesheet" href="/src/assets/theme.css" />
-    <title>opencode</title>
+    <title>OpenCode</title>
  </head>
  <body class="h-full overscroll-none select-none">
    <script>
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/desktop",
-  "version": "0.15.5",
+  "version": "0.15.4",
  "description": "",
  "type": "module",
  "scripts": {
@@ -29,6 +29,7 @@
    "@solid-primitives/event-bus": "1.1.2",
    "@solid-primitives/resize-observer": "2.1.3",
    "@solid-primitives/scroll": "2.1.3",
+    "@solidjs/meta": "catalog:",
    "@solidjs/router": "0.15.3",
    "@thisbeyond/solid-dnd": "0.7.5",
    "diff": "catalog:",
--- a/packages/desktop/scripts/vite-theme-plugin.ts
+++ b/packages/desktop/scripts/vite-theme-plugin.ts
@@ -1,163 +0,0 @@
-import type { Plugin } from "vite"
-import { readdir, readFile, writeFile } from "fs/promises"
-import { join, resolve } from "path"
-
-interface ThemeDefinition {
-  $schema?: string
-  defs?: Record<string, string>
-  theme: Record<string, any>
-}
-
-interface ResolvedThemeColor {
-  dark: string
-  light: string
-}
-
-class ColorResolver {
-  private colors: Map<string, any> = new Map()
-  private visited: Set<string> = new Set()
-
-  constructor(defs: Record<string, string> = {}, theme: Record<string, any> = {}) {
-    Object.entries(defs).forEach(([key, value]) => {
-      this.colors.set(key, value)
-    })
-    Object.entries(theme).forEach(([key, value]) => {
-      this.colors.set(key, value)
-    })
-  }
-
-  resolveColor(key: string, value: any): ResolvedThemeColor {
-    if (this.visited.has(key)) {
-      throw new Error(`Circular reference detected for color ${key}`)
-    }
-
-    this.visited.add(key)
-
-    try {
-      if (typeof value === "string") {
-        if (value === "none") return { dark: value, light: value }
-        if (value.startsWith("#")) {
-          return { dark: value.toLowerCase(), light: value.toLowerCase() }
-        }
-        const resolved = this.resolveReference(value)
-        return { dark: resolved, light: resolved }
-      }
-      if (typeof value === "object" && value !== null) {
-        const dark = this.resolveColorValue(value.dark || value.light || "#000000")
-        const light = this.resolveColorValue(value.light || value.dark || "#FFFFFF")
-        return { dark, light }
-      }
-      return { dark: "#000000", light: "#FFFFFF" }
-    } finally {
-      this.visited.delete(key)
-    }
-  }
-
-  private resolveColorValue(value: any): string {
-    if (typeof value === "string") {
-      if (value === "none") return value
-      if (value.startsWith("#")) {
-        return value.toLowerCase()
-      }
-      return this.resolveReference(value)
-    }
-    return value
-  }
-
-  private resolveReference(ref: string): string {
-    const colorValue = this.colors.get(ref)
-    if (colorValue === undefined) {
-      throw new Error(`Color reference '${ref}' not found`)
-    }
-    if (typeof colorValue === "string") {
-      if (colorValue === "none") return colorValue
-      if (colorValue.startsWith("#")) {
-        return colorValue.toLowerCase()
-      }
-      return this.resolveReference(colorValue)
-    }
-    return colorValue
-  }
-}
-
-function kebabCase(str: string): string {
-  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()
-}
-
-function parseTheme(themeData: ThemeDefinition): Record<string, ResolvedThemeColor> {
-  const resolver = new ColorResolver(themeData.defs, themeData.theme)
-  const colors: Record<string, ResolvedThemeColor> = {}
-  Object.entries(themeData.theme).forEach(([key, value]) => {
-    colors[key] = resolver.resolveColor(key, value)
-  })
-  return colors
-}
-
-async function loadThemes(): Promise<Record<string, Record<string, ResolvedThemeColor>>> {
-  const themesDir = resolve(__dirname, "../../tui/internal/theme/themes")
-  const files = await readdir(themesDir)
-  const themes: Record<string, Record<string, ResolvedThemeColor>> = {}
-
-  for (const file of files) {
-    if (!file.endsWith(".json")) continue
-
-    const themeName = file.replace(".json", "")
-    const themeData: ThemeDefinition = JSON.parse(await readFile(join(themesDir, file), "utf-8"))
-
-    themes[themeName] = parseTheme(themeData)
-  }
-
-  return themes
-}
-
-function generateCSS(themes: Record<string, Record<string, ResolvedThemeColor>>): string {
-  let css = `/* Auto-generated theme CSS - Do not edit manually */\n:root {\n`
-
-  const defaultTheme = themes["opencode"] || Object.values(themes)[0]
-  if (defaultTheme) {
-    Object.entries(defaultTheme).forEach(([key, color]) => {
-      const cssVar = `--theme-${kebabCase(key)}`
-      css += `  ${cssVar}: ${color.light};\n`
-    })
-  }
-  css += `}\n\n`
-
-  Object.entries(themes).forEach(([themeName, colors]) => {
-    css += `[data-theme="${themeName}"][data-dark="false"] {\n`
-    Object.entries(colors).forEach(([key, color]) => {
-      const cssVar = `--theme-${kebabCase(key)}`
-      css += `  ${cssVar}: ${color.light};\n`
-    })
-    css += `}\n\n`
-
-    css += `[data-theme="${themeName}"][data-dark="true"] {\n`
-    Object.entries(colors).forEach(([key, color]) => {
-      const cssVar = `--theme-${kebabCase(key)}`
-      css += `  ${cssVar}: ${color.dark};\n`
-    })
-    css += `}\n\n`
-  })
-
-  return css
-}
-
-export function generateThemeCSS(): Plugin {
-  return {
-    name: "generate-theme-css",
-    async buildStart() {
-      try {
-        console.log("Generating theme CSS...")
-        const themes = await loadThemes()
-        const css = generateCSS(themes)
-
-        const outputPath = resolve(__dirname, "../src/assets/theme.css")
-        await writeFile(outputPath, css)
-
-        console.log(`✅ Generated theme CSS with ${Object.keys(themes).length} themes`)
-        console.log(`   Output: ${outputPath}`)
-      } catch (error) {
-        throw new Error(`Theme CSS generation failed: ${error}`)
-      }
-    },
-  }
-}
--- a/packages/desktop/src/components/editor-pane.tsx
+++ b/packages/desktop/src/components/editor-pane.tsx
@@ -1,6 +1,7 @@
 import { For, Match, Show, Switch, createSignal, splitProps } from "solid-js"
-import { Tabs } from "@/ui/tabs"
-import { FileIcon, Icon, IconButton, Logo, Tooltip } from "@/ui"
+import { Tabs, Tooltip } from "@opencode-ai/ui"
+import { Icon } from "@opencode-ai/ui"
+import { FileIcon, IconButton } from "@/ui"
 import {
  DragDropProvider,
  DragDropSensors,
@@ -64,7 +65,6 @@ export default function EditorPane(props: EditorPaneProps): JSX.Element {
  }

  return (
-    <div class="relative flex h-full flex-col">
    <DragDropProvider
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
@@ -73,22 +73,16 @@ export default function EditorPane(props: EditorPaneProps): JSX.Element {
    >
      <DragDropSensors />
      <ConstrainDragYAxis />
-        <Tabs
-          class="relative grow w-full flex flex-col h-full"
-          value={local.file.active()?.path}
-          onChange={handleTabChange}
-        >
+      <Tabs value={local.file.active()?.path} onChange={handleTabChange}>
        <div class="sticky top-0 shrink-0 flex">
-            <Tabs.List class="grow">
+          <Tabs.List>
            <SortableProvider ids={local.file.opened().map((file) => file.path)}>
              <For each={local.file.opened()}>
-                  {(file) => (
-                    <SortableTab file={file} onTabClick={localProps.onFileClick} onTabClose={handleTabClose} />
-                  )}
+                {(file) => <SortableTab file={file} onTabClick={localProps.onFileClick} onTabClose={handleTabClose} />}
              </For>
            </SortableProvider>
          </Tabs.List>
-            <div class="shrink-0 h-full flex items-center gap-1 px-2 border-b border-border-subtle/40">
+          <div class="hidden shrink-0 h-full _flex items-center gap-1 px-2 border-b border-border-subtle/40">
            <Show when={local.file.active() && local.file.active()!.content?.diff}>
              {(() => {
                const activeFile = local.file.active()!
@@ -159,7 +153,7 @@ export default function EditorPane(props: EditorPaneProps): JSX.Element {
        </div>
        <For each={local.file.opened()}>
          {(file) => (
-              <Tabs.Content value={file.path} class="grow h-full pt-1 select-text">
+            <Tabs.Content value={file.path} class="select-text">
              {(() => {
                const view = local.file.view(file.path)
                const showRaw = view === "raw" || !file.content?.diff
@@ -184,7 +178,6 @@ export default function EditorPane(props: EditorPaneProps): JSX.Element {
        })()}
      </DragOverlay>
    </DragDropProvider>
-    </div>
  )
 }

--- a/packages/desktop/src/components/file-tree.tsx
+++ b/packages/desktop/src/components/file-tree.tsx
@@ -1,6 +1,7 @@
 import { useLocal } from "@/context"
 import type { LocalFile } from "@/context/local"
-import { Collapsible, FileIcon, Tooltip } from "@/ui"
+import { Tooltip } from "@opencode-ai/ui"
+import { Collapsible, FileIcon } from "@/ui"
 import { For, Match, Switch, Show, type ComponentProps, type ParentProps } from "solid-js"
 import { Dynamic } from "solid-js/web"

--- a/packages/desktop/src/components/prompt-form.tsx
+++ b/packages/desktop/src/components/prompt-form.tsx
@@ -1,8 +1,8 @@
 import { For, Show, createMemo, onCleanup, type JSX } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Popover } from "@kobalte/core/popover"
-import { Button, FileIcon, Icon, IconButton, Tooltip } from "@/ui"
-import { Select } from "@/components/select"
+import { Tooltip, Button, Icon, Select } from "@opencode-ai/ui"
+import { FileIcon, IconButton } from "@/ui"
 import { useLocal } from "@/context"
 import type { FileContext, LocalFile } from "@/context/local"
 import { getDirectory, getFilename } from "@/utils"
--- a/packages/desktop/src/components/resizeable-pane.tsx
+++ b/packages/desktop/src/components/resizeable-pane.tsx
@@ -1,217 +0,0 @@
-import { batch, createContext, createMemo, createSignal, onCleanup, Show, useContext } from "solid-js"
-import type { ComponentProps, JSX } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useLocal } from "@/context"
-
-type PaneDefault = number | { size: number; visible?: boolean }
-
-type LayoutContextValue = {
-  id: string
-  register: (pane: string, options: { min?: number | string; max?: number | string }) => void
-  size: (pane: string) => number
-  visible: (pane: string) => boolean
-  percent: (pane: string) => number
-  next: (pane: string) => string | undefined
-  startDrag: (left: string, right: string | undefined, event: MouseEvent) => void
-  dragging: () => string | undefined
-}
-
-const LayoutContext = createContext<LayoutContextValue | undefined>(undefined)
-
-export interface ResizeableLayoutProps {
-  id: string
-  defaults: Record<string, PaneDefault>
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-  children: JSX.Element
-}
-
-export interface ResizeablePaneProps {
-  id: string
-  minSize?: number | string
-  maxSize?: number | string
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-  children: JSX.Element
-}
-
-export function ResizeableLayout(props: ResizeableLayoutProps) {
-  const local = useLocal()
-  const [meta, setMeta] = createStore<Record<string, { min: number; max: number; minPx?: number; maxPx?: number }>>({})
-  const [dragging, setDragging] = createSignal<string>()
-  let container: HTMLDivElement | undefined
-
-  local.layout.ensure(props.id, props.defaults)
-
-  const order = createMemo(() => local.layout.order(props.id))
-  const visibleOrder = createMemo(() => order().filter((pane) => local.layout.visible(props.id, pane)))
-  const totalVisible = createMemo(() => {
-    const panes = visibleOrder()
-    if (!panes.length) return 0
-    return panes.reduce((total, pane) => total + local.layout.size(props.id, pane), 0)
-  })
-
-  const percent = (pane: string) => {
-    const panes = visibleOrder()
-    if (!panes.length) return 0
-    const total = totalVisible()
-    if (!total) return 100 / panes.length
-    return (local.layout.size(props.id, pane) / total) * 100
-  }
-
-  const nextPane = (pane: string) => {
-    const panes = visibleOrder()
-    const index = panes.indexOf(pane)
-    if (index === -1) return undefined
-    return panes[index + 1]
-  }
-
-  const minMax = (pane: string) => meta[pane] ?? { min: 5, max: 95 }
-
-  const pxToPercent = (px: number, total: number) => (px / total) * 100
-
-  const boundsForPair = (left: string, right: string, total: number) => {
-    const leftMeta = minMax(left)
-    const rightMeta = minMax(right)
-    const containerWidth = container?.getBoundingClientRect().width ?? 0
-
-    let minLeft = leftMeta.min
-    let maxLeft = leftMeta.max
-    let minRight = rightMeta.min
-    let maxRight = rightMeta.max
-
-    if (containerWidth && leftMeta.minPx !== undefined) minLeft = pxToPercent(leftMeta.minPx, containerWidth)
-    if (containerWidth && leftMeta.maxPx !== undefined) maxLeft = pxToPercent(leftMeta.maxPx, containerWidth)
-    if (containerWidth && rightMeta.minPx !== undefined) minRight = pxToPercent(rightMeta.minPx, containerWidth)
-    if (containerWidth && rightMeta.maxPx !== undefined) maxRight = pxToPercent(rightMeta.maxPx, containerWidth)
-
-    const finalMinLeft = Math.max(minLeft, total - maxRight)
-    const finalMaxLeft = Math.min(maxLeft, total - minRight)
-    return {
-      min: Math.min(finalMinLeft, finalMaxLeft),
-      max: Math.max(finalMinLeft, finalMaxLeft),
-    }
-  }
-
-  const setPair = (left: string, right: string, leftSize: number, rightSize: number) => {
-    batch(() => {
-      local.layout.setSize(props.id, left, leftSize)
-      local.layout.setSize(props.id, right, rightSize)
-    })
-  }
-
-  const startDrag = (left: string, right: string | undefined, event: MouseEvent) => {
-    if (!right) return
-    if (!container) return
-    const rect = container.getBoundingClientRect()
-    if (!rect.width) return
-    event.preventDefault()
-    const startX = event.clientX
-    const startLeft = local.layout.size(props.id, left)
-    const startRight = local.layout.size(props.id, right)
-    const total = startLeft + startRight
-    const bounds = boundsForPair(left, right, total)
-    const move = (moveEvent: MouseEvent) => {
-      const delta = ((moveEvent.clientX - startX) / rect.width) * 100
-      const nextLeft = Math.max(bounds.min, Math.min(bounds.max, startLeft + delta))
-      const nextRight = total - nextLeft
-      setPair(left, right, nextLeft, nextRight)
-    }
-    const stop = () => {
-      setDragging()
-      document.removeEventListener("mousemove", move)
-      document.removeEventListener("mouseup", stop)
-    }
-    setDragging(left)
-    document.addEventListener("mousemove", move)
-    document.addEventListener("mouseup", stop)
-    onCleanup(() => stop())
-  }
-
-  const register = (pane: string, options: { min?: number | string; max?: number | string }) => {
-    let min = 5
-    let max = 95
-    let minPx: number | undefined
-    let maxPx: number | undefined
-
-    if (typeof options.min === "string" && options.min.endsWith("px")) {
-      minPx = parseInt(options.min)
-      min = 0
-    } else if (typeof options.min === "number") {
-      min = options.min
-    }
-
-    if (typeof options.max === "string" && options.max.endsWith("px")) {
-      maxPx = parseInt(options.max)
-      max = 100
-    } else if (typeof options.max === "number") {
-      max = options.max
-    }
-
-    setMeta(pane, () => ({ min, max, minPx, maxPx }))
-    const fallback = props.defaults[pane]
-    local.layout.ensurePane(props.id, pane, fallback ?? { size: min, visible: true })
-  }
-
-  const contextValue: LayoutContextValue = {
-    id: props.id,
-    register,
-    size: (pane) => local.layout.size(props.id, pane),
-    visible: (pane) => local.layout.visible(props.id, pane),
-    percent,
-    next: nextPane,
-    startDrag,
-    dragging,
-  }
-
-  return (
-    <LayoutContext.Provider value={contextValue}>
-      <div
-        ref={(node) => {
-          container = node ?? undefined
-        }}
-        class={props.class ? `relative flex h-full w-full ${props.class}` : "relative flex h-full w-full"}
-        classList={props.classList}
-      >
-        {props.children}
-      </div>
-    </LayoutContext.Provider>
-  )
-}
-
-export function ResizeablePane(props: ResizeablePaneProps) {
-  const context = useContext(LayoutContext)!
-  context.register(props.id, { min: props.minSize, max: props.maxSize })
-  const visible = () => context.visible(props.id)
-  const width = () => context.percent(props.id)
-  const next = () => context.next(props.id)
-  const dragging = () => context.dragging() === props.id
-
-  return (
-    <Show when={visible()}>
-      <div
-        class={props.class ? `relative flex h-full flex-col ${props.class}` : "relative flex h-full flex-col"}
-        classList={props.classList}
-        style={{
-          width: `${width()}%`,
-          flex: `0 0 ${width()}%`,
-        }}
-      >
-        {props.children}
-        <Show when={next()}>
-          <div
-            class="absolute top-0 -right-1 h-full w-1.5 cursor-col-resize z-50 group"
-            onMouseDown={(event) => context.startDrag(props.id, next(), event)}
-          >
-            <div
-              classList={{
-                "w-0.5 h-full bg-transparent transition-colors group-hover:bg-border-active": true,
-                "bg-border-active!": dragging(),
-              }}
-            />
-          </div>
-        </Show>
-      </div>
-    </Show>
-  )
-}
--- a/packages/desktop/src/components/select-dialog.tsx
+++ b/packages/desktop/src/components/select-dialog.tsx
@@ -1,6 +1,7 @@
 import { createEffect, Show, For, createMemo, type JSX, createResource } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
-import { Icon, IconButton } from "@/ui"
+import { Icon } from "@opencode-ai/ui"
+import { IconButton } from "@/ui"
 import { createStore } from "solid-js/store"
 import { entries, flatMap, groupBy, map, pipe } from "remeda"
 import { createList } from "solid-list"
--- a/packages/desktop/src/components/select.tsx
+++ b/packages/desktop/src/components/select.tsx
@@ -1,108 +0,0 @@
-import { Select as KobalteSelect } from "@kobalte/core/select"
-import { createMemo } from "solid-js"
-import type { ComponentProps } from "solid-js"
-import { Icon } from "@/ui/icon"
-import { pipe, groupBy, entries, map } from "remeda"
-import { Button, type ButtonProps } from "@/ui"
-
-export interface SelectProps<T> {
-  placeholder?: string
-  options: T[]
-  current?: T
-  value?: (x: T) => string
-  label?: (x: T) => string
-  groupBy?: (x: T) => string
-  onSelect?: (value: T | undefined) => void
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-}
-
-export function Select<T>(props: SelectProps<T> & ButtonProps) {
-  const grouped = createMemo(() => {
-    const result = pipe(
-      props.options,
-      groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
-      // mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
-      entries(),
-      map(([k, v]) => ({ category: k, options: v })),
-    )
-    return result
-  })
-
-  return (
-    <KobalteSelect<T, { category: string; options: T[] }>
-      value={props.current}
-      options={grouped()}
-      optionValue={(x) => (props.value ? props.value(x) : (x as string))}
-      optionTextValue={(x) => (props.label ? props.label(x) : (x as string))}
-      optionGroupChildren="options"
-      placeholder={props.placeholder}
-      sectionComponent={(props) => (
-        <KobalteSelect.Section class="text-xs uppercase text-text-muted/60 font-light mt-3 first:mt-0 ml-2">
-          {props.section.rawValue.category}
-        </KobalteSelect.Section>
-      )}
-      itemComponent={(itemProps) => (
-        <KobalteSelect.Item
-          classList={{
-            "relative flex cursor-pointer select-none items-center": true,
-            "rounded-sm px-2 py-0.5 text-xs outline-none text-text": true,
-            "transition-colors data-[disabled]:pointer-events-none": true,
-            "data-[highlighted]:bg-background-element data-[disabled]:opacity-50": true,
-            [props.class ?? ""]: !!props.class,
-          }}
-          {...itemProps}
-        >
-          <KobalteSelect.ItemLabel>
-            {props.label ? props.label(itemProps.item.rawValue) : (itemProps.item.rawValue as string)}
-          </KobalteSelect.ItemLabel>
-          <KobalteSelect.ItemIndicator class="ml-auto">
-            <Icon name="checkmark" size={16} />
-          </KobalteSelect.ItemIndicator>
-        </KobalteSelect.Item>
-      )}
-      onChange={(v) => {
-        props.onSelect?.(v ?? undefined)
-      }}
-    >
-      <KobalteSelect.Trigger
-        as={Button}
-        size={props.size || "sm"}
-        variant={props.variant || "secondary"}
-        classList={{
-          ...(props.classList ?? {}),
-          [props.class ?? ""]: !!props.class,
-        }}
-      >
-        <KobalteSelect.Value<T> class="truncate">
-          {(state) => {
-            const selected = state.selectedOption() ?? props.current
-            if (!selected) return props.placeholder || ""
-            if (props.label) return props.label(selected)
-            return selected as string
-          }}
-        </KobalteSelect.Value>
-        <KobalteSelect.Icon
-          classList={{
-            "group size-fit shrink-0 text-text-muted transition-transform duration-100": true,
-          }}
-        >
-          <Icon name="chevron-up" size={16} class="-my-2 group-data-[expanded]:rotate-180" />
-          <Icon name="chevron-down" size={16} class="-my-2 group-data-[expanded]:rotate-180" />
-        </KobalteSelect.Icon>
-      </KobalteSelect.Trigger>
-      <KobalteSelect.Portal>
-        <KobalteSelect.Content
-          classList={{
-            "min-w-32 overflow-hidden rounded-md border border-border-subtle/40": true,
-            "bg-background-panel p-1 shadow-md z-50": true,
-            "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95": true,
-            "data-[expanded]:animate-in data-[expanded]:fade-in-0 data-[expanded]:zoom-in-95": true,
-          }}
-        >
-          <KobalteSelect.Listbox class="overflow-y-auto max-h-48 whitespace-nowrap overflow-x-hidden" />
-        </KobalteSelect.Content>
-      </KobalteSelect.Portal>
-    </KobalteSelect>
-  )
-}
--- a/packages/desktop/src/components/session-list.tsx
+++ b/packages/desktop/src/components/session-list.tsx
@@ -1,5 +1,5 @@
 import { useSync, useLocal } from "@/context"
-import { Tooltip } from "@/ui"
+import { Tooltip } from "@opencode-ai/ui"
 import { DateTime } from "luxon"
 import { VList } from "virtua/solid"

--- a/packages/desktop/src/components/session-timeline.tsx
+++ b/packages/desktop/src/components/session-timeline.tsx
@@ -1,5 +1,6 @@
 import { useLocal, useSync } from "@/context"
-import { Collapsible, Icon } from "@/ui"
+import { Icon } from "@opencode-ai/ui"
+import { Collapsible } from "@/ui"
 import type { Part, ToolPart } from "@opencode-ai/sdk"
 import { DateTime } from "luxon"
 import {
--- a/packages/desktop/src/components/sidebar-nav.tsx
+++ b/packages/desktop/src/components/sidebar-nav.tsx
@@ -1,48 +0,0 @@
-import { For } from "solid-js"
-import { Icon, Link, Logo, Tooltip } from "@/ui"
-import { useLocation } from "@solidjs/router"
-
-const navigation = [
-  { name: "Sessions", href: "/sessions", icon: "dashboard" as const },
-  { name: "Commands", href: "/commands", icon: "slash" as const },
-  { name: "Agents", href: "/agents", icon: "bolt" as const },
-  { name: "Providers", href: "/providers", icon: "cloud" as const },
-  { name: "Tools (MCP)", href: "/tools", icon: "hammer" as const },
-  { name: "LSP", href: "/lsp", icon: "code" as const },
-  { name: "Settings", href: "/settings", icon: "settings" as const },
-]
-
-export default function SidebarNav() {
-  const location = useLocation()
-  return (
-    <div class="hidden md:fixed md:inset-y-0 md:left-0 md:z-50 md:block md:w-16 md:overflow-y-auto md:bg-background-panel md:pb-4">
-      <div class="flex h-16 shrink-0 items-center justify-center">
-        <Logo variant="mark" size={28} />
-      </div>
-      <nav class="mt-5">
-        <ul role="list" class="flex flex-col items-center space-y-1">
-          <For each={navigation}>
-            {(item) => (
-              <li>
-                <Tooltip placement="right" value={item.name}>
-                  <Link
-                    href={item.href}
-                    classList={{
-                      "bg-background-element text-text": location.pathname.startsWith(item.href),
-                      "text-text-muted hover:bg-background-element hover:text-text": location.pathname !== item.href,
-                      "flex gap-x-3 rounded-md p-3 text-sm font-semibold": true,
-                      "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-border-active": true,
-                    }}
-                  >
-                    <Icon name={item.icon} size={20} />
-                    <span class="sr-only">{item.name}</span>
-                  </Link>
-                </Tooltip>
-              </li>
-            )}
-          </For>
-        </ul>
-      </nav>
-    </div>
-  )
-}
--- a/packages/desktop/src/context/index.ts
+++ b/packages/desktop/src/context/index.ts
@@ -4,4 +4,3 @@ export { MarkedProvider, useMarked } from "./marked"
 export { SDKProvider, useSDK } from "./sdk"
 export { ShikiProvider, useShiki } from "./shiki"
 export { SyncProvider, useSync } from "./sync"
-export { ThemeProvider, useTheme } from "./theme"
--- a/packages/desktop/src/context/local.tsx
+++ b/packages/desktop/src/context/local.tsx
@@ -131,31 +131,31 @@ function init() {
    const changeset = createMemo(() => new Set(sync.data.changes.map((f) => f.path)))
    const changes = createMemo(() => Array.from(changeset()).sort((a, b) => a.localeCompare(b)))

-    createEffect((prev: FileStatus[]) => {
-      const removed = prev.filter((p) => !sync.data.changes.find((c) => c.path === p.path))
-      for (const p of removed) {
-        setStore(
-          "node",
-          p.path,
-          produce((draft) => {
-            draft.status = undefined
-            draft.view = "raw"
-          }),
-        )
-        load(p.path)
-      }
-      for (const p of sync.data.changes) {
-        if (store.node[p.path] === undefined) {
-          fetch(p.path).then(() => {
-            if (store.node[p.path] === undefined) return
-            setStore("node", p.path, "status", p)
-          })
-        } else {
-          setStore("node", p.path, "status", p)
-        }
-      }
-      return sync.data.changes
-    }, sync.data.changes)
+    // createEffect((prev: FileStatus[]) => {
+    //   const removed = prev.filter((p) => !sync.data.changes.find((c) => c.path === p.path))
+    //   for (const p of removed) {
+    //     setStore(
+    //       "node",
+    //       p.path,
+    //       produce((draft) => {
+    //         draft.status = undefined
+    //         draft.view = "raw"
+    //       }),
+    //     )
+    //     load(p.path)
+    //   }
+    //   for (const p of sync.data.changes) {
+    //     if (store.node[p.path] === undefined) {
+    //       fetch(p.path).then(() => {
+    //         if (store.node[p.path] === undefined) return
+    //         setStore("node", p.path, "status", p)
+    //       })
+    //     } else {
+    //       setStore("node", p.path, "status", p)
+    //     }
+    //   }
+    //   return sync.data.changes
+    // }, sync.data.changes)

    const changed = (path: string) => {
      const node = store.node[path]
--- a/packages/desktop/src/context/theme.tsx
+++ b/packages/desktop/src/context/theme.tsx
@@ -1,92 +0,0 @@
-import {
-  createContext,
-  useContext,
-  createSignal,
-  createEffect,
-  onMount,
-  type ParentComponent,
-  onCleanup,
-} from "solid-js"
-
-export interface ThemeContextValue {
-  theme: string | undefined
-  isDark: boolean
-  setTheme: (themeName: string) => void
-  setDarkMode: (isDark: boolean) => void
-}
-
-const ThemeContext = createContext<ThemeContextValue>()
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext)
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider")
-  }
-  return context
-}
-
-interface ThemeProviderProps {
-  defaultTheme?: string
-  defaultDarkMode?: boolean
-}
-
-const themes = ["opencode", "tokyonight", "ayu", "nord", "catppuccin"]
-
-export const ThemeProvider: ParentComponent<ThemeProviderProps> = (props) => {
-  const [theme, setThemeSignal] = createSignal<string | undefined>()
-  const [isDark, setIsDark] = createSignal(props.defaultDarkMode ?? false)
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === "t" && event.ctrlKey) {
-      event.preventDefault()
-      const current = theme()
-      if (!current) return
-      const index = themes.indexOf(current)
-      const next = themes[(index + 1) % themes.length]
-      setTheme(next)
-    }
-  }
-
-  onMount(() => {
-    window.addEventListener("keydown", handleKeyDown)
-  })
-
-  onCleanup(() => {
-    window.removeEventListener("keydown", handleKeyDown)
-  })
-
-  onMount(() => {
-    const savedTheme = localStorage.getItem("theme") ?? "opencode"
-    const savedDarkMode = localStorage.getItem("darkMode") ?? "true"
-    setIsDark(savedDarkMode === "true")
-    setTheme(savedTheme)
-  })
-
-  createEffect(() => {
-    const currentTheme = theme()
-    const darkMode = isDark()
-    if (currentTheme) {
-      document.documentElement.setAttribute("data-theme", currentTheme)
-      document.documentElement.setAttribute("data-dark", darkMode.toString())
-    }
-  })
-
-  const setTheme = async (theme: string) => {
-    setThemeSignal(theme)
-    localStorage.setItem("theme", theme)
-  }
-
-  const setDarkMode = (dark: boolean) => {
-    setIsDark(dark)
-    localStorage.setItem("darkMode", dark.toString())
-  }
-
-  const contextValue: ThemeContextValue = {
-    theme: theme(),
-    isDark: isDark(),
-    setTheme,
-    setDarkMode,
-  }
-
-  return <ThemeContext.Provider value={contextValue}>{props.children}</ThemeContext.Provider>
-}
--- a/packages/desktop/src/index.css
+++ b/packages/desktop/src/index.css
@@ -1,168 +1 @@
-@import "tailwindcss";
-
-:root {
-  interpolate-size: allow-keywords;
-}
-
-@layer components {
-  [data-popper-positioner] {
-    pointer-events: none;
-  }
-
-  body {
-    line-height: 1;
-  }
-
-  ::selection {
-    background-color: color-mix(in srgb, var(--color-primary) 33%, transparent);
-    /* background-color: var(--color-primary); */
-    /* color: var(--color-background); */
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--theme-background-panel);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--theme-border-subtle);
-    border-radius: 6px;
-  }
-
-  * {
-    scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel);
-  }
-
-  .prose h1 {
-    color: var(--color-text);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm--line-height);
-    margin-bottom: calc(var(--spacing) * 3);
-  }
-  .prose h2 {
-    color: var(--color-text);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm--line-height);
-    margin-bottom: calc(var(--spacing) * 3);
-  }
-  .prose h3 {
-    color: var(--color-text);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .prose h4 {
-    color: var(--color-text);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .prose h5 {
-    color: var(--color-text);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .prose h6 {
-    color: var(--color-text);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .prose p {
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .prose strong {
-    color: var(--color-text);
-  }
-  .prose ul,
-  ol {
-    list-style-type: disc;
-    list-style-position: inside;
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .prose pre {
-    background-color: var(--color-background-panel);
-    padding: calc(var(--spacing) * 2);
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border-subtle);
-    overflow-x: auto;
-    white-space: pre;
-    margin-bottom: calc(var(--spacing) * 2);
-    @apply no-scrollbar;
-  }
-  .prose code {
-    font-family: var(--font-mono);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-  }
-  .prose blockquote {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-}
-
-@utility no-scrollbar {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  & {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}
-
-@theme {
-  --color-*: initial;
-  --color-primary: var(--theme-primary);
-  --color-secondary: var(--theme-secondary);
-  --color-accent: var(--theme-accent);
-  --color-error: var(--theme-error);
-  --color-warning: var(--theme-warning);
-  --color-success: var(--theme-success);
-  --color-info: var(--theme-info);
-  --color-text: var(--theme-text);
-  --color-text-muted: var(--theme-text-muted);
-  --color-background: var(--theme-background);
-  --color-background-panel: var(--theme-background-panel);
-  --color-background-element: var(--theme-background-element);
-  --color-border: var(--theme-border);
-  --color-border-active: var(--theme-border-active);
-  --color-border-subtle: var(--theme-border-subtle);
-  --color-diff-added: var(--theme-diff-added);
-  --color-diff-removed: var(--theme-diff-removed);
-  --color-diff-context: var(--theme-diff-context);
-  --color-diff-hunk-header: var(--theme-diff-hunk-header);
-  --color-diff-highlight-added: var(--theme-diff-highlight-added);
-  --color-diff-highlight-removed: var(--theme-diff-highlight-removed);
-  --color-diff-added-bg: var(--theme-diff-added-bg);
-  --color-diff-removed-bg: var(--theme-diff-removed-bg);
-  --color-diff-context-bg: var(--theme-diff-context-bg);
-  --color-diff-line-number: var(--theme-diff-line-number);
-  --color-diff-added-line-number-bg: var(--theme-diff-added-line-number-bg);
-  --color-diff-removed-line-number-bg: var(--theme-diff-removed-line-number-bg);
-  --color-markdown-text: var(--theme-markdown-text);
-  --color-markdown-heading: var(--theme-markdown-heading);
-  --color-markdown-link: var(--theme-markdown-link);
-  --color-markdown-link-text: var(--theme-markdown-link-text);
-  --color-markdown-code: var(--theme-markdown-code);
-  --color-markdown-block-quote: var(--theme-markdown-block-quote);
-  --color-markdown-emph: var(--theme-markdown-emph);
-  --color-markdown-strong: var(--theme-markdown-strong);
-  --color-markdown-horizontal-rule: var(--theme-markdown-horizontal-rule);
-  --color-markdown-list-item: var(--theme-markdown-list-item);
-  --color-markdown-list-enumeration: var(--theme-markdown-list-enumeration);
-  --color-markdown-image: var(--theme-markdown-image);
-  --color-markdown-image-text: var(--theme-markdown-image-text);
-  --color-markdown-code-block: var(--theme-markdown-code-block);
-  --color-syntax-comment: var(--theme-syntax-comment);
-  --color-syntax-keyword: var(--theme-syntax-keyword);
-  --color-syntax-function: var(--theme-syntax-function);
-  --color-syntax-variable: var(--theme-syntax-variable);
-  --color-syntax-string: var(--theme-syntax-string);
-  --color-syntax-number: var(--theme-syntax-number);
-  --color-syntax-type: var(--theme-syntax-type);
-  --color-syntax-operator: var(--theme-syntax-operator);
-  --color-syntax-punctuation: var(--theme-syntax-punctuation);
-}
+@import "@opencode-ai/css/tailwind.css";
--- a/packages/desktop/src/index.tsx
+++ b/packages/desktop/src/index.tsx
@@ -1,21 +1,13 @@
 /* @refresh reload */
+import "@/index.css"
 import { render } from "solid-js/web"
 import { Router, Route } from "@solidjs/router"
-import "@/index.css"
-import Layout from "@/pages/layout"
+import { MetaProvider } from "@solidjs/meta"
+import { EventProvider, SDKProvider, SyncProvider, LocalProvider, ShikiProvider, MarkedProvider } from "@/context"
+import { Fonts } from "@opencode-ai/ui"
 import Home from "@/pages"
-import {
-  EventProvider,
-  SDKProvider,
-  SyncProvider,
-  LocalProvider,
-  ThemeProvider,
-  ShikiProvider,
-  MarkedProvider,
-} from "@/context"

 const root = document.getElementById("root")
-
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
@@ -24,25 +16,24 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {

 render(
  () => (
-    <div class="h-full bg-background text-text-muted">
-      <ThemeProvider defaultTheme="opencode" defaultDarkMode={true}>
    <ShikiProvider>
      <MarkedProvider>
        <SDKProvider>
          <EventProvider>
            <SyncProvider>
              <LocalProvider>
-                    <Router root={Layout}>
+                <MetaProvider>
+                  <Fonts />
+                  <Router>
                    <Route path="/" component={Home} />
                  </Router>
+                </MetaProvider>
              </LocalProvider>
            </SyncProvider>
          </EventProvider>
        </SDKProvider>
      </MarkedProvider>
    </ShikiProvider>
-      </ThemeProvider>
-    </div>
  ),
  root!,
 )
--- a/packages/desktop/src/pages/index.tsx
+++ b/packages/desktop/src/pages/index.tsx
@@ -1,5 +1,5 @@
-import { FileIcon, Icon, IconButton, Tooltip } from "@/ui"
-import * as KobalteTabs from "@kobalte/core/tabs"
+import { Icon, Tooltip } from "@opencode-ai/ui"
+import { FileIcon, IconButton } from "@/ui"
 import FileTree from "@/components/file-tree"
 import EditorPane from "@/components/editor-pane"
 import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js"
@@ -11,9 +11,7 @@ import SessionTimeline from "@/components/session-timeline"
 import PromptForm, { type PromptContentPart, type PromptSubmitValue } from "@/components/prompt-form"
 import { createStore } from "solid-js/store"
 import { getDirectory, getFilename } from "@/utils"
-import { Select } from "@/components/select"
-import { Tabs } from "@/ui/tabs"
-import { Code } from "@/components/code"
+import { PromptInput } from "@/components/prompt-input"

 export default function Page() {
  const local = useLocal()
@@ -52,7 +50,7 @@ export default function Page() {
    const focused = document.activeElement === inputRef
    if (focused) {
      if (event.key === "Escape") {
-        inputRef?.blur()
+        // inputRef?.blur()
      }
      return
    }
@@ -79,7 +77,7 @@ export default function Page() {
    }

    if (event.key.length === 1 && event.key !== "Unidentified") {
-      inputRef?.focus()
+      // inputRef?.focus()
    }
  }

@@ -106,6 +104,8 @@ export default function Page() {
    }
  }

+  const handlePromptSubmit2 = () => {}
+
  const handlePromptSubmit = async (prompt: PromptSubmitValue) => {
    const existingSession = local.session.active()
    let session = existingSession
@@ -231,11 +231,26 @@ export default function Page() {
        <div class="shrink-0 w-70">
          <SessionList />
        </div>
-        <div class="grow w-full min-w-0 overflow-y-auto flex justify-center">
+        <div class="relative grid grid-cols-2">
+          <div class="min-w-0 overflow-y-auto no-scrollbar flex justify-center">
            <Show when={local.session.active()}>
-            {(activeSession) => <SessionTimeline session={activeSession().id} class="max-w-xl" />}
+              {(activeSession) => <SessionTimeline session={activeSession().id} class="w-full" />}
            </Show>
          </div>
+          <div class="p-1.5 pl-px flex flex-col items-center justify-center overflow-y-auto no-scrollbar">
+            <EditorPane onFileClick={handleFileClick} />
+          </div>
+          <div class="absolute bottom-4 inset-x-0 p-2 flex flex-col justify-center items-center z-50">
+            <PromptInput onSubmit={handlePromptSubmit2} />
+            {/* <PromptForm */}
+            {/*   class="w-2xl" */}
+            {/*   onSubmit={handlePromptSubmit} */}
+            {/*   onOpenModelSelect={() => setStore("modelSelectOpen", true)} */}
+            {/*   onInputRefChange={(element: HTMLTextAreaElement | undefined) => { */}
+            {/*     inputRef = element ?? undefined */}
+            {/*   }} */}
+            {/* /> */}
+          </div>
          <div class="hidden shrink-0 w-56 p-2 h-full overflow-y-auto">
            <FileTree path="" onFileClick={handleFileClick} />
          </div>
@@ -264,18 +279,6 @@ export default function Page() {
              </ul>
            </Show>
          </div>
-        <div class="hidden grow min-w-0">
-          <EditorPane onFileClick={handleFileClick} />
-        </div>
-        <div class="absolute bottom-4 inset-x-0 p-2 flex flex-col justify-center items-center gap-2 z-50">
-          <PromptForm
-            class="w-xl"
-            onSubmit={handlePromptSubmit}
-            onOpenModelSelect={() => setStore("modelSelectOpen", true)}
-            onInputRefChange={(element: HTMLTextAreaElement | undefined) => {
-              inputRef = element ?? undefined
-            }}
-          />
        </div>
      </main>
      <Show when={store.modelSelectOpen}>
@@ -343,8 +346,7 @@ export default function Page() {
            </div>
          )}
          onClose={() => setStore("fileSelectOpen", false)}
-          onSelect={(x) => (x ? local.context.openFile(x) : undefined)}
-          // onSelect={(x) => (x ? local.file.open(x, { pinned: true }) : undefined)}
+          onSelect={(x) => (x ? local.file.open(x, { pinned: true }) : undefined)}
        />
      </Show>
    </div>
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -1,5 +0,0 @@
-import { type ParentProps } from "solid-js"
-
-export default function Layout(props: ParentProps) {
-  return <main class="">{props.children}</main>
-}
--- a/packages/desktop/src/ui/button.tsx
+++ b/packages/desktop/src/ui/button.tsx
@@ -1,36 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button"
-import { type ComponentProps, splitProps } from "solid-js"
-
-export interface ButtonProps {
-  variant?: "primary" | "secondary" | "ghost"
-  size?: "sm" | "md" | "lg"
-}
-
-export function Button(props: ComponentProps<"button"> & ButtonProps) {
-  const [split, rest] = splitProps(props, ["variant", "size", "class", "classList"])
-  return (
-    <Kobalte
-      {...rest}
-      data-size={split.size || "sm"}
-      data-variant={split.variant || "secondary"}
-      class="inline-flex items-center justify-center rounded-md cursor-pointer font-medium transition-colors
-             min-w-0 whitespace-nowrap truncate
-             data-[size=sm]:h-6 data-[size=sm]:pl-2 data-[size=sm]:text-xs
-             data-[size=md]:h-8 data-[size=md]:pl-3 data-[size=md]:text-sm
-             data-[size=lg]:h-10 data-[size=lg]:pl-4 data-[size=lg]:text-base
-             data-[variant=primary]:bg-primary data-[variant=primary]:text-background 
-             data-[variant=primary]:hover:bg-secondary data-[variant=primary]:focus-visible:ring-primary
-             data-[variant=secondary]:bg-background-element data-[variant=secondary]:text-text
-             data-[variant=secondary]:hover:bg-background-element data-[variant=secondary]:focus-visible:ring-secondary
-             data-[variant=ghost]:text-text data-[variant=ghost]:hover:bg-background-panel data-[variant=ghost]:focus-visible:ring-border-active
-             focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-transparent 
-             disabled:pointer-events-none disabled:opacity-50"
-      classList={{
-        ...(split.classList ?? {}),
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {props.children}
-    </Kobalte>
-  )
-}
--- a/packages/desktop/src/ui/collapsible.tsx
+++ b/packages/desktop/src/ui/collapsible.tsx
@@ -1,7 +1,7 @@
 import { Collapsible as KobalteCollapsible } from "@kobalte/core/collapsible"
 import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
-import { Icon, type IconProps } from "./icon"
+import { Icon, type IconProps } from "@opencode-ai/ui"

 export interface CollapsibleProps extends ComponentProps<typeof KobalteCollapsible> {}
 export interface CollapsibleTriggerProps extends ComponentProps<typeof KobalteCollapsible.Trigger> {}
--- a/packages/desktop/src/ui/icon.tsx
+++ b/packages/desktop/src/ui/icon.tsx
@@ -1,155 +0,0 @@
-import { splitProps, type ComponentProps } from "solid-js"
-
-export interface IconProps extends ComponentProps<"svg"> {
-  name: keyof typeof icons
-  size?: number
-}
-
-// prettier-ignore
-const icons = {
-  close: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L6.75 17.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75L17.25 17.25"></path>',
-  menu: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 5.75H19.25"></path> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 18.25H19.25"></path> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 12H19.25"></path>',
-  "chevron-right": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"></path>',
-  "chevron-left": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"></path>',
-  "chevron-down": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>',
-  "chevron-up": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 14.25L12 10.75L8.75 14.25"></path>',
-  "chevron-down-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8.75 10.75 3.25 3.5 3.25-3.5m2-6H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2Z"></path>',
-  "chevron-up-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8.75 14.25 3.25-3.5 3.25 3.5m2-9.5H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2Z"></path>',
-  "chevron-right-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m10.75 15.25 3.5-3.25-3.5-3.25m6.5-4H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2Z"></path>',
-  "chevron-left-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.25 15.25 9.75 12l3.5-3.25m4-4H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2Z"></path>',
-  settings: '<path d="M5.62117 14.9627L6.72197 15.1351C7.53458 15.2623 8.11491 16.0066 8.05506 16.8451L7.97396 17.9816C7.95034 18.3127 8.12672 18.6244 8.41885 18.7686L9.23303 19.1697C9.52516 19.3139 9.87399 19.2599 10.1126 19.0352L10.9307 18.262C11.5339 17.6917 12.4646 17.6917 13.0685 18.262L13.8866 19.0352C14.1252 19.2608 14.4733 19.3139 14.7662 19.1697L15.5819 18.7678C15.8733 18.6244 16.0489 18.3135 16.0253 17.9833L15.9441 16.8451C15.8843 16.0066 16.4646 15.2623 17.2772 15.1351L18.378 14.9627C18.6985 14.9128 18.9568 14.6671 19.0292 14.3433L19.23 13.4428C19.3025 13.119 19.1741 12.7831 18.9064 12.5962L17.9875 11.9526C17.3095 11.4774 17.1024 10.5495 17.5119 9.82051L18.067 8.83299C18.2284 8.54543 18.2017 8.18538 17.9993 7.92602L17.4363 7.2035C17.2339 6.94413 16.8969 6.83701 16.5867 6.93447L15.5221 7.26794C14.7355 7.51441 13.8969 7.1012 13.5945 6.31908L13.1866 5.26148C13.0669 4.95218 12.7748 4.7492 12.4496 4.75L11.5472 4.75242C11.222 4.75322 10.9307 4.95782 10.8126 5.26793L10.4149 6.31344C10.1157 7.1004 9.27319 7.51683 8.4842 7.26874L7.37553 6.92078C7.0645 6.82251 6.72591 6.93044 6.52355 7.19142L5.96448 7.91474C5.76212 8.17652 5.73771 8.53738 5.90228 8.82493L6.47 9.81487C6.88812 10.5446 6.68339 11.4814 6.00149 11.9591L5.0936 12.5954C4.82588 12.7831 4.69754 13.119 4.76998 13.442L4.97077 14.3425C5.04242 14.6671 5.30069 14.9128 5.62117 14.9627Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.5911 10.4089C14.4696 11.2875 14.4696 12.7125 13.5911 13.5911C12.7125 14.4696 11.2875 14.4696 10.4089 13.5911C9.53036 12.7125 9.53036 11.2875 10.4089 10.4089C11.2875 9.53036 12.7125 9.53036 13.5911 10.4089Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  globe: '<circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 12C15.25 16.5 13.2426 19.25 12 19.25C10.7574 19.25 8.75 16.5 8.75 12C8.75 7.5 10.7574 4.75 12 4.75C13.2426 4.75 15.25 7.5 15.25 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12H12H19"></path>',
-  github: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 18.25c-3.5 1-3.5-1.75-5-2m10 4v-2.7a2.36 2.36 0 0 0-.66-1.83c2.2-.25 4.51-1.08 4.51-4.9a3.81 3.81 0 0 0-1.05-2.62 3.55 3.55 0 0 0-.07-2.63s-.84-.25-2.73.99a9.37 9.37 0 0 0-4.9 0c-1.89-1.24-2.73-.99-2.73-.99a3.55 3.55 0 0 0-.07 2.63 3.81 3.81 0 0 0-1.05 2.65c0 3.79 2.31 4.62 4.51 4.87a2.36 2.36 0 0 0-.66 1.86v3.97"></path>',
-  hammer: '<path d="M10.75 13.25V10.25H8.25V11.25C8.25 11.8023 7.80228 12.25 7.25 12.25H5.75C5.19772 12.25 4.75 11.8023 4.75 11.25V5.75C4.75 5.19772 5.19772 4.75 5.75 4.75H7.25C7.80228 4.75 8.25 5.19772 8.25 5.75V6.75H15C15 6.75 19.25 6.75 19.25 11.25C19.25 11.25 17 10.25 14.25 10.25V13.25M10.75 13.25H14.25M10.75 13.25V19.25M14.25 13.25V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "avatar-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 19S8 15.75 12 15.75 17.25 19 17.25 19m-3-9a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-6.5 9.25h8.5a3 3 0 0 0 3-3v-8.5a3 3 0 0 0-3-3h-8.5a3 3 0 0 0-3 3v8.5a3 3 0 0 0 3 3Z"></path>',
-  slash: '<path d="M11.5 18C11.5 18.2761 11.2761 18.5 11 18.5C10.7239 18.5 10.5 18.2761 10.5 18C10.5 17.7239 10.7239 17.5 11 17.5C11.2761 17.5 11.5 17.7239 11.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 18C15.5 18.2761 15.2761 18.5 15 18.5C14.7239 18.5 14.5 18.2761 14.5 18C14.5 17.7239 14.7239 17.5 15 17.5C15.2761 17.5 15.5 17.7239 15.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.5 18C19.5 18.2761 19.2761 18.5 19 18.5C18.7239 18.5 18.5 18.2761 18.5 18C18.5 17.7239 18.7239 17.5 19 17.5C19.2761 17.5 19.5 17.7239 19.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.75 18.25L9.25 5.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  robot: '<path d="M4.75 11.75C4.75 9.54086 6.54086 7.75 8.75 7.75H15.25C17.4591 7.75 19.25 9.54086 19.25 11.75V15.25C19.25 17.4591 17.4591 19.25 15.25 19.25H8.75C6.54086 19.25 4.75 17.4591 4.75 15.25V11.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 7.25V4.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.25 12C10.25 12.6904 9.69036 13.25 9 13.25C8.30964 13.25 7.75 12.6904 7.75 12C7.75 11.3096 8.30964 10.75 9 10.75C9.69036 10.75 10.25 11.3096 10.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.25 12C16.25 12.6904 15.6904 13.25 15 13.25C14.3096 13.25 13.75 12.6904 13.75 12C13.75 11.3096 14.3096 10.75 15 10.75C15.6904 10.75 16.25 11.3096 16.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.75 16.25H13.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  cloud: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 14C4.75 15.7949 6.20507 17.25 8 17.25H16C17.7949 17.25 19.25 15.7949 19.25 14C19.25 12.2869 17.9246 10.8834 16.2433 10.759C16.1183 8.5239 14.2663 6.75 12 6.75C9.73368 6.75 7.88168 8.5239 7.75672 10.759C6.07542 10.8834 4.75 12.2869 4.75 14Z"></path>',
-  "file-text": '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V10.25M12.75 4.75V8.25C12.75 9.35457 13.6454 10.25 14.75 10.25H18.25M12.75 4.75L18.25 10.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 15.75H15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 12.75H11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  file: '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V10.25M12.75 4.75V8.25C12.75 9.35457 13.6454 10.25 14.75 10.25H18.25M12.75 4.75L18.25 10.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "file-checkmark": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 4.75h-5a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h3.5m1.5-14.5v3.5a2 2 0 0 0 2 2h3.5m-5.5-5.5 5.5 5.5m0 0v1m1 3.5s-1.929 2.09-2.893 4.5l-1.607-1.929"></path>',
-  "file-code": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 4.75h-5a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h.5m4.5-14.5v3.5a2 2 0 0 0 2 2h3.5m-5.5-5.5 5.5 5.5m0 0v2m-5 2.5L10.75 17l2.5 2.25m3.5-4.5 2.5 2.25-2.5 2.25"></path>',
-  "file-important": '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H12.25M12.75 4.75L18.25 10.25H14.75C13.6454 10.25 12.75 9.35457 12.75 8.25V4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 14C18 13.4477 17.5523 13 17 13C16.4477 13 16 13.4477 16 14H18ZM16 16C16 16.5523 16.4477 17 17 17C17.5523 17 18 16.5523 18 16H16ZM16 14V16H18V14H16Z" fill="currentColor"></path><path d="M18 19C18 18.4477 17.5523 18 17 18C16.4477 18 16 18.4477 16 19H18ZM16 19.01C16 19.5623 16.4477 20.01 17 20.01C17.5523 20.01 18 19.5623 18 19.01H16ZM16 19V19.01H18V19H16Z" fill="currentColor"></path>',
-  "file-minus": '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H12.25M12.75 4.75V8.25C12.75 9.35457 13.6454 10.25 14.75 10.25H18.25M12.75 4.75L18.25 10.25M18.25 10.25V13.25M19.25 17.25H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "file-plus": '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H12.25M12.75 4.75V8.25C12.75 9.35457 13.6454 10.25 14.75 10.25H18.25L12.75 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 14.75V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 17H14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  files: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 6.75h-3a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2h6.5a2 2 0 0 0 2-2v-5m-5.5-5.5 5.5 5.5m-5.5-5.5v3.5a2 2 0 0 0 2 2h3.5m-3.5-7.5h2l5.5 5.5v5a2 2 0 0 1-2 2H15.5"></path>',
-  "file-zip": '<path d="M17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 6C9.5 6.27614 9.27614 6.5 9 6.5C8.72386 6.5 8.5 6.27614 8.5 6C8.5 5.72386 8.72386 5.5 9 5.5C9.27614 5.5 9.5 5.72386 9.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.5 8C11.5 8.27614 11.2761 8.5 11 8.5C10.7239 8.5 10.5 8.27614 10.5 8C10.5 7.72386 10.7239 7.5 11 7.5C11.2761 7.5 11.5 7.72386 11.5 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 10C9.5 10.2761 9.27614 10.5 9 10.5C8.72386 10.5 8.5 10.2761 8.5 10C8.5 9.72386 8.72386 9.5 9 9.5C9.27614 9.5 9.5 9.72386 9.5 10Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.5 12C11.5 12.2761 11.2761 12.5 11 12.5C10.7239 12.5 10.5 12.2761 10.5 12C10.5 11.7239 10.7239 11.5 11 11.5C11.2761 11.5 11.5 11.7239 11.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>',
-  jpg: '<path d="M8.25 8.75V13.5C8.25 14.4665 7.4665 15.25 6.5 15.25C5.5335 15.25 4.75 14.4665 4.75 13.5V12.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.75 15.25V12.25M10.75 12.25V8.75H12.25C12.8023 8.75 13.25 9.19772 13.25 9.75V11.25C13.25 11.8023 12.8023 12.25 12.25 12.25H10.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 8.75H17.75C16.6454 8.75 15.75 9.64543 15.75 10.75V13.25C15.75 14.3546 16.6454 15.25 17.75 15.25H19.25V12.25H17.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  pdf: '<path d="M4.75 15.25V12.25M4.75 12.25V8.75H6.25C6.80228 8.75 7.25 9.19772 7.25 9.75V11.25C7.25 11.8023 6.80228 12.25 6.25 12.25H4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.25 8.75H9.75V15.25H11.25C12.3546 15.25 13.25 14.3546 13.25 13.25V10.75C13.25 9.64543 12.3546 8.75 11.25 8.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.25 8.75H15.75V11.75M15.75 15.25V11.75M15.75 11.75H18.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  png: '<path d="M4.75 15.25V12.25M4.75 12.25V8.75H6.25C6.80228 8.75 7.25 9.19772 7.25 9.75V11.25C7.25 11.8023 6.80228 12.25 6.25 12.25H4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 15.25V8.75L13.25 15.25V8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 8.75H17.75C16.6454 8.75 15.75 9.64543 15.75 10.75V13.25C15.75 14.3546 16.6454 15.25 17.75 15.25H19.25V12.25H17.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  gif: '<path d="M9.25 8.75H7.75C6.64543 8.75 5.75 9.64543 5.75 10.75V13.25C5.75 14.3546 6.64543 15.25 7.75 15.25H9.25V12.25H7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.75 15.25V8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.25 8.75H15.75C15.1977 8.75 14.75 9.19772 14.75 9.75V11.75M14.75 15.25V11.75M14.75 11.75H18.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  archive: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.25 8.75H5.75L6.57758 17.4396C6.67534 18.4661 7.53746 19.25 8.56857 19.25H15.4314C16.4625 19.25 17.3247 18.4661 17.4224 17.4396L18.25 8.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 5.75C19.25 5.19772 18.8023 4.75 18.25 4.75H5.75C5.19771 4.75 4.75 5.19772 4.75 5.75V7.75C4.75 8.30228 5.19772 8.75 5.75 8.75H18.25C18.8023 8.75 19.25 8.30228 19.25 7.75V5.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 13.25H14.25"></path>',
-  sun: '<circle cx="12" cy="12" r="3.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 2.75V4.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L16.0659 7.93416"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.25 12.0001L19.75 12.0001"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 17.2501L16.0659 16.066"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 19.75V21.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.9341 16.0659L6.74996 17.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.25 12.0001L2.75 12.0001"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.93405 7.93423L6.74991 6.75003"></path>',
-  moon: '<path d="M18.25 15.0314C17.7575 15.1436 17.2459 15.2027 16.7209 15.2027C12.8082 15.2027 9.63607 11.9185 9.63607 7.86709C9.63607 6.75253 9.87614 5.69603 10.3057 4.75C7.12795 5.47387 4.75 8.40659 4.75 11.9143C4.75 15.9657 7.9221 19.25 11.8348 19.25C14.6711 19.25 17.1182 17.5242 18.25 15.0314Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  monitor: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V14.25C19.25 15.3546 18.3546 16.25 17.25 16.25H6.75C5.64543 16.25 4.75 15.3546 4.75 14.25V6.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 19.25L12 17.25L8.75 19.25"></path>',
-  command: '<path d="M4.75 6.5C4.75 5.5335 5.5335 4.75 6.5 4.75C7.4665 4.75 8.25 5.5335 8.25 6.5V8.25H6.5C5.5335 8.25 4.75 7.4665 4.75 6.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.75 6.5C15.75 5.5335 16.5335 4.75 17.5 4.75C18.4665 4.75 19.25 5.5335 19.25 6.5C19.25 7.4665 18.4665 8.25 17.5 8.25H15.75V6.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.75 15.75H17.5C18.4665 15.75 19.25 16.5335 19.25 17.5C19.25 18.4665 18.4665 19.25 17.5 19.25C16.5335 19.25 15.75 18.4665 15.75 17.5V15.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.75 17.5C4.75 16.5335 5.5335 15.75 6.5 15.75H8.25V17.5C8.25 18.4665 7.4665 19.25 6.5 19.25C5.5335 19.25 4.75 18.4665 4.75 17.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.25 8.25H15.75V15.75H8.25V8.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  link: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.75 13.25L18 12C19.6569 10.3431 19.6569 7.65685 18 6V6C16.3431 4.34315 13.6569 4.34315 12 6L10.75 7.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.25 10.75L6 12C4.34315 13.6569 4.34315 16.3431 6 18V18C7.65685 19.6569 10.3431 19.6569 12 18L13.25 16.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 9.75L9.75 14.25"></path>',
-  share: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V14.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 9.25V4.75H14.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 5L11.75 12.25"></path>',
-  branch: '<path d="M9.25 7C9.25 8.24264 8.24264 9.25 7 9.25C5.75736 9.25 4.75 8.24264 4.75 7C4.75 5.75736 5.75736 4.75 7 4.75C8.24264 4.75 9.25 5.75736 9.25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.75 9.5V14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.75 12.25H15.25C16.3546 12.25 17.25 11.3546 17.25 10.25V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 7C19.25 8.24264 18.2426 9.25 17 9.25C15.7574 9.25 14.75 8.24264 14.75 7C14.75 5.75736 15.7574 4.75 17 4.75C18.2426 4.75 19.25 5.75736 19.25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.25 17C9.25 18.2426 8.24264 19.25 7 19.25C5.75736 19.25 4.75 18.2426 4.75 17C4.75 15.7574 5.75736 14.75 7 14.75C8.24264 14.75 9.25 15.7574 9.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  logout: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 8.75L19.25 12L15.75 15.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H10.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H15.25"></path>',
-  login: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 8.75L13.25 12L9.75 15.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H9.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 12H4.75"></path>',
-  keys: '<path d="M10.25 13.0632C11.9872 12.5294 13.25 10.9122 13.25 9C13.25 6.65279 11.3472 4.75 9 4.75C6.65279 4.75 4.75 6.65279 4.75 9C4.75 10.9122 6.01283 12.5294 7.75 13.0632V18C7.75 18.6904 8.30964 19.25 9 19.25C9.69036 19.25 10.25 18.6904 10.25 18V13.0632Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 12L17.3452 15.0736C17.9523 15.436 18.7285 15.2209 19.079 14.5932C19.4295 13.9655 19.2215 13.1629 18.6144 12.8005L13.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 8V8.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  key: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13.25C17.3472 13.25 19.25 11.3472 19.25 9C19.25 6.65279 17.3472 4.75 15 4.75C12.6528 4.75 10.75 6.65279 10.75 9C10.75 9.31012 10.7832 9.61248 10.8463 9.90372L4.75 16V19.25H8L8.75 18.5V16.75H10.5L11.75 15.5V13.75H13.5L14.0963 13.1537C14.3875 13.2168 14.6899 13.25 15 13.25Z"></path><path stroke="currentColor" d="M16.5 8C16.5 8.27614 16.2761 8.5 16 8.5C15.7239 8.5 15.5 8.27614 15.5 8C15.5 7.72386 15.7239 7.5 16 7.5C16.2761 7.5 16.5 7.72386 16.5 8Z"></path>',
-  info: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"></path><circle cx="12" cy="9" r="1" fill="currentColor"></circle><circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>',
-  warning: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.9522 16.3536L10.2152 5.85658C10.9531 4.38481 13.0539 4.3852 13.7913 5.85723L19.0495 16.3543C19.7156 17.6841 18.7487 19.25 17.2613 19.25H6.74007C5.25234 19.25 4.2854 17.6835 4.9522 16.3536Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10V12"></path><circle cx="12" cy="16" r="1" fill="currentColor"></circle>',
-  checkmark: '<path d="M7.75 12.75L10 15.25L16.25 8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "checkmark-square": '<path d="M17.2502 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.2502C18.3548 4.75 19.2502 5.64543 19.2502 6.75V17.25C19.2502 18.3546 18.3548 19.25 17.2502 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 12L11 14.25L15.25 9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  plus: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 5.75V18.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.25 12L5.75 12"></path>',
-  minus: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.25 12.25L5.75 12.25"></path>',
-  undo: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.25 4.75L4.75 9L9.25 13.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.5 9H15.25C17.4591 9 19.25 10.7909 19.25 13V19.25"></path>',
-  merge: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m4.75 19.25 7.25-5V5m2 10.63 5.25 3.62m-10.5-11L12 4.75l3.25 3.5"></path>',
-  redo: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.75 4.75L19.25 9L14.75 13.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 9H8.75C6.54086 9 4.75 10.7909 4.75 13V19.25"></path>',
-  refresh: '<path d="M11.25 14.75L8.75 17M8.75 17L11.25 19.25M8.75 17H13.25C16.5637 17 19.25 14.3137 19.25 11V10.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.25 7H10.75C7.43629 7 4.75 9.68629 4.75 13V13.25M15.25 7L12.75 9.25M15.25 7L12.75 4.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  rotate: '<path d="M17.1265 6.87348C14.2952 4.04217 9.70478 4.04217 6.87348 6.87348C4.04217 9.70478 4.04217 14.2952 6.87348 17.1265C9.70478 19.9578 14.2952 19.9578 17.1265 17.1265C17.7603 16.4927 18.2522 15.7708 18.6023 15.0001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 19.25V15.75C19.25 15.1977 18.8023 14.75 18.25 14.75H14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "arrow-left": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 6.75L4.75 12L10.25 17.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12H5"></path>',
-  "arrow-down": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 13.75L12 19.25L6.75 13.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18.25V4.75"></path>',
-  "arrow-right": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path>',
-  "arrow-up": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 10.25L12 4.75L6.75 10.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 19.25V5.75"></path>',
-  enter: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75V12a2 2 0 0 1-2 2h-8.5m0 0 3.5-3.25M6.75 14l3.5 3.25"></path>',
-  trash: '<path d="M5.75 7.75L6.59115 17.4233C6.68102 18.4568 7.54622 19.25 8.58363 19.25H14.4164C15.4538 19.25 16.319 18.4568 16.4088 17.4233L17.25 7.75H5.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 10.75V16.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.25 10.75V16.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 7.75V6.75C8.75 5.64543 9.64543 4.75 10.75 4.75H12.25C13.3546 4.75 14.25 5.64543 14.25 6.75V7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.75 7.75H18.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  package: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 8.87 12 12.25M5.75 8.87v7L12 19.25M5.75 8.87l3.125-1.56m9.375 1.56L12 5.75 8.875 7.31m9.375 1.56v7L12 19.25m6.25-10.38-3.125 1.69M12 12.25v7m0-7 3.125-1.69m0 0-6.25-3.25"></path>',
-  box: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 8L12 4.75L19.25 8L12 11.25L4.75 8Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 16L12 19.25L19.25 16"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 8V16"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 8V16"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 11.5V19"></path>',
-  lock: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5"></path>',
-  unlocked: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25"></path>',
-  activity: '<path d="M4.75 11.75H8.25L10.25 4.75L13.75 19.25L15.75 11.75H19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  asterisk: '<path d="M12 4.75V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.2501 8.74994L5.75 15.2501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.2498 15.2503L5.74976 8.75012" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  bell: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 12V10C17.25 7.1005 14.8995 4.75 12 4.75C9.10051 4.75 6.75 7.10051 6.75 10V12L4.75 16.25H19.25L17.25 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 16.75C9 16.75 9 19.25 12 19.25C15 19.25 15 16.75 15 16.75"></path>',
-  "bell-off": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.875V12L19.25 16.25H7.75M5.75 14.125L6.75 12V10C6.75 7.10051 9.10051 4.75 12 4.75C12 4.75 13.6094 4.75002 14.5938 5.24998"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 16.75C9 16.75 9 19.25 12 19.25C15 19.25 15 16.75 15 16.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 4.75L4.75 19.25"></path>',
-  bolt: '<path d="M10.75 13.25H6.75L13.25 4.75V10.75H17.25L10.75 19.25V13.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  bookmark: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 14.75L6.75 19.25V6.75Z"></path>',
-  brain: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 10.25v-.583A2.917 2.917 0 0 1 8.667 6.75H8.8a2.5 2.5 0 0 1 2.45-2H12m-4.75 5c-1.38 0-2.5 1.231-2.5 2.75 0 .788.301 1.499.784 2 .076.079.157.153.242.221m1.974.529h-.5a2.341 2.341 0 0 1-1.474-.529m0 0a2.917 2.917 0 0 0 2.89 2.529H8.8a2.5 2.5 0 0 0 2.45 2H12m0-14.5h.75a2.5 2.5 0 0 1 2.45 2h.133a2.917 2.917 0 0 1 2.917 2.917v.583M12 4.75V8m0 11.25h.75a2.5 2.5 0 0 0 2.45-2h.133a2.917 2.917 0 0 0 2.891-2.529M12 19.25V15m4.75-5.25c1.38 0 2.5 1.231 2.5 2.75 0 .788-.301 1.499-.784 2a2.594 2.594 0 0 1-.242.221m-1.974.529h.5c.551 0 1.061-.196 1.474-.529M12 15c0-1.6 1.333-2.25 2-2.25h.25M12 15V8m0 0c0 1.2-1 3-2.25 3.25"></path>',
-  browser: '<path d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 8.25H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "browser-cursor": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.25 19.25h-5.5a2 2 0 0 1-2-2V6.75a2 2 0 0 1 2-2h10.5a2 2 0 0 1 2 2v5.5M8 8h.01m3 0h.01m3 0h.01m.72 5.75 1 5.5L17 17l2.25-.75-4.5-2.5Z"></path>',
-  bug: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 19.25v-3.5m0 3.5a4.25 4.25 0 0 1-4.249-4.157M12 19.25a4.25 4.25 0 0 0 4.249-4.157M4.75 7.75v1.326a2 2 0 0 0 1.065 1.768l2.069 1.095M19.25 7.75v1.326a2 2 0 0 1-1.065 1.768l-2.069 1.095M4.75 19.25v-1.645a2 2 0 0 1 1.298-1.873l1.703-.639M19.25 19.25v-1.645a2 2 0 0 0-1.298-1.873l-1.703-.639M9.75 7.25v-.5a2 2 0 0 1 2-2h.5a2 2 0 0 1 2 2v.5m-4.5 0v2m0-2-.894-.447a2 2 0 0 1-1.106-1.79V4.75m6.5 4.5v-2m0 0 .894-.447a2 2 0 0 0 1.106-1.79V4.75M7.751 15.093 7.75 15v-2c0-.367.046-.722.134-1.062m0 0a4.252 4.252 0 0 1 8.232 0m0 0c.088.34.134.695.134 1.062v2l-.001.093"></path>',
-  "carat-down": '<path d="M12 15.25L16.25 9.75H7.75L12 15.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "carat-left": '<path d="M8.75 12L14.25 7.75V16.25L8.75 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "carat-right": '<path d="M14.25 12L8.75 7.75V16.25L14.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "carat-up": '<path d="M12 9.75L16.25 15.25H7.75L12 9.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  cards: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15.144 8.75-.725-2.543c-.3-1.048-1.446-1.67-2.562-1.39l-5.556 1.4c-1.116.28-1.778 1.358-1.48 2.406l1.76 6.17c.3 1.048 1.446 1.67 2.562 1.39l.607-.153m5.394-7.28H11.75a2 2 0 0 0-2 2v5.28m5.394-7.28h2.106a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2v-1.22"></path>',
-  chart: '<path d="M5.75 19.25V13.75M9.75 19.25V11.75M14.25 19.25V13.75M5.75 10.25L9.75 5.75L14.25 9.75L18.25 4.75M18.25 19.25V9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "check-circle": '<path d="M14.25 10C14.25 10 12.3214 12.0893 11.3571 14.5L9.75 12.5714M19.25 12.25C19.25 16.2541 16.0041 19.5 12 19.5C7.99594 19.5 4.75 16.2541 4.75 12.25C4.75 8.24594 7.99594 5 12 5C16.0041 5 19.25 8.24594 19.25 12.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  checklist: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12.25v-5.5a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h4.5m-2.5-10.5h6.5m-6.5 4h6.5m-.5 5 1.5 1.5c.75-2.25 3-3.5 3-3.5"></path>',
-  "checklist-cards": '<path d="M15.1439 8.75009L14.4189 6.20709C14.1189 5.15909 12.9729 4.53709 11.8569 4.81709L6.30091 6.21709C5.18491 6.49709 4.52291 7.57509 4.82091 8.62309L6.58091 14.7931C6.88091 15.8411 8.02691 16.4631 9.14291 16.1831L9.74991 16.0301M15.1439 8.75009H11.7499C11.2195 8.75009 10.7108 8.9608 10.3357 9.33587C9.96062 9.71095 9.74991 10.2197 9.74991 10.7501V16.0301M15.1439 8.75009H17.2499C17.7803 8.75009 18.289 8.9608 18.6641 9.33587C19.0392 9.71095 19.2499 10.2197 19.2499 10.7501V17.2501C19.2499 17.7805 19.0392 18.2892 18.6641 18.6643C18.289 19.0394 17.7803 19.2501 17.2499 19.2501H11.7499C11.2195 19.2501 10.7108 19.0394 10.3357 18.6643C9.96062 18.2892 9.74991 17.7805 9.74991 17.2501V16.0301M16.2499 12.2501C16.2499 12.2501 14.7499 13.8751 13.9999 15.7501L12.7499 14.2501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  lab: '<path d="M16.25 4.75H7.75L8.73964 5.86334C9.39049 6.59555 9.75 7.54114 9.75 8.5208V11.25L4.75 19.25H19.25L14.25 11.25V8.5208C14.25 7.54114 14.6095 6.59555 15.2604 5.86334L16.25 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 15.75H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  circle: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12a7.25 7.25 0 1 1-14.5 0 7.25 7.25 0 0 1 14.5 0Z"></path>',
-  "circle-dotted": '<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 5v.01m3.502.928-.005.01m2.57 2.554-.01.005m.948 3.497h-.01m-.928 3.502-.009-.005m-2.555 2.57-.005-.01M12 19v.01m-3.498-.947-.005.009m-2.555-2.57-.008.005m-.929-3.502h-.01m.947-3.498-.008-.005m2.568-2.555-.005-.008"></path>',
-  clipboard: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 6.75H7.75C6.64543 6.75 5.75 7.64543 5.75 8.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V8.75C18.25 7.64543 17.3546 6.75 16.25 6.75H15"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 8.25H10C9.44772 8.25 9 7.80228 9 7.25V5.75C9 5.19772 9.44772 4.75 10 4.75H14C14.5523 4.75 15 5.19772 15 5.75V7.25C15 7.80228 14.5523 8.25 14 8.25Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 12.25H14.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 15.25H14.25"></path>',
-  clock: '<circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-width="1.5"></circle><path stroke="currentColor" stroke-width="1.5" d="M12 8V12L14 14"></path>',
-  "close-circle": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 12C4.75 7.99594 7.99594 4.75 12 4.75V4.75C16.0041 4.75 19.25 7.99594 19.25 12V12C19.25 16.0041 16.0041 19.25 12 19.25V19.25C7.99594 19.25 4.75 16.0041 4.75 12V12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 9.75L14.25 14.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 9.75L9.75 14.25"></path>',
-  terminal: '<rect width="14.5" height="14.5" x="4.75" y="4.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" rx="2"></rect><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 10.75L11.25 13L8.75 15.25"></path>',
-  code: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15.75 8.75 3.5 3.25-3.5 3.25m-7.5-6.5L4.75 12l3.5 3.25m5-9.5-2.5 12.5"></path>',
-  components: '<path d="M9.75 7L12 4.75L14.25 7L12 9.25L9.75 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.75 12L17 9.75L19.25 12L17 14.25L14.75 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 17L12 14.75L14.25 17L12 19.25L9.75 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.75 12L7 9.75L9.25 12L7 14.25L4.75 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  copy: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.5 15.25V15.25C5.5335 15.25 4.75 14.4665 4.75 13.5V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H13.5C14.4665 4.75 15.25 5.5335 15.25 6.5V6.5"></path><rect width="10.5" height="10.5" x="8.75" y="8.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" rx="2"></rect>',
-  cpu: '<path d="M6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75H15.25C16.3546 6.75 17.25 7.64543 17.25 8.75V15.25C17.25 16.3546 16.3546 17.25 15.25 17.25H8.75C7.64543 17.25 6.75 16.3546 6.75 15.25V8.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 4.75V6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 9.75L17.75 9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 17.75V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.25 9.75L4.75 9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.25 4.75V6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 14.25L17.75 14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.25 17.75V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.25 14.25L4.75 14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  dashboard: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 8.75V19"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 8.25H19"></path>',
-  transfer: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 9.25 16 5.75m0 0 3.25 3.5M16 5.75v12.5m-4.75-3.5L8 18.25m0 0-3.25-3.5M8 18.25V5.75"></path>',
-  devices: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25v-.5a1 1 0 0 1 1-1h9.5a1 1 0 0 1 1 1v10.5a1 1 0 0 1-1 1h-5.5m-8-1v-6.5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-3.5a1 1 0 0 1-1-1Z"></path>',
-  diamond: '<path d="M9.5 9C10.7644 7.54767 12 4.75 12 4.75C12 4.75 13.2356 7.54767 14.5 9C15.7314 10.4145 18.25 12 18.25 12C18.25 12 15.7314 13.5855 14.5 15C13.2356 16.4523 12 19.25 12 19.25C12 19.25 10.7644 16.4523 9.5 15C8.26857 13.5855 5.75 12 5.75 12C5.75 12 8.26857 10.4145 9.5 9Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  dice: '<path d="M17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 9C9.5 9.27614 9.27614 9.5 9 9.5C8.72386 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.72386 8.5 9 8.5C9.27614 8.5 9.5 8.72386 9.5 9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 15C9.5 15.2761 9.27614 15.5 9 15.5C8.72386 15.5 8.5 15.2761 8.5 15C8.5 14.7239 8.72386 14.5 9 14.5C9.27614 14.5 9.5 14.7239 9.5 15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 9C15.5 9.27614 15.2761 9.5 15 9.5C14.7239 9.5 14.5 9.27614 14.5 9C14.5 8.72386 14.7239 8.5 15 8.5C15.2761 8.5 15.5 8.72386 15.5 9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 12C15.5 12.2761 15.2761 12.5 15 12.5C14.7239 12.5 14.5 12.2761 14.5 12C14.5 11.7239 14.7239 11.5 15 11.5C15.2761 11.5 15.5 11.7239 15.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 12C9.5 12.2761 9.27614 12.5 9 12.5C8.72386 12.5 8.5 12.2761 8.5 12C8.5 11.7239 8.72386 11.5 9 11.5C9.27614 11.5 9.5 11.7239 9.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 15C15.5 15.2761 15.2761 15.5 15 15.5C14.7239 15.5 14.5 15.2761 14.5 15C14.5 14.7239 14.7239 14.5 15 14.5C15.2761 14.5 15.5 14.7239 15.5 15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>',
-  discord: '<path d="M5.9143 7.38378L4.93679 14.6174C4.82454 15.448 5.24219 16.2606 5.983 16.6528L8.99995 18.25L9.99995 15.75C9.99995 15.75 10.6562 16.25 11.9999 16.25C13.3437 16.25 13.9999 15.75 13.9999 15.75L14.9999 18.25L18.0169 16.6528C18.7577 16.2606 19.1754 15.448 19.0631 14.6174L18.0856 7.38378C18.0334 6.99739 17.7613 6.67658 17.3887 6.56192L14.7499 5.75003V6.25003C14.7499 6.80232 14.3022 7.25003 13.7499 7.25003H10.2499C9.69766 7.25003 9.24995 6.80232 9.24995 6.25003V5.75003L6.61122 6.56192C6.23855 6.67658 5.96652 6.99739 5.9143 7.38378Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.5 12C10.5 12.2761 10.2761 12.5 10 12.5C9.72386 12.5 9.5 12.2761 9.5 12C9.5 11.7239 9.72386 11.5 10 11.5C10.2761 11.5 10.5 11.7239 10.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 12C14.5 12.2761 14.2761 12.5 14 12.5C13.7239 12.5 13.5 12.2761 13.5 12C13.5 11.7239 13.7239 11.5 14 11.5C14.2761 11.5 14.5 11.7239 14.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>',
-  dots: '<path d="M12.5 6C12.5 6.27614 12.2761 6.5 12 6.5C11.7239 6.5 11.5 6.27614 11.5 6C11.5 5.72386 11.7239 5.5 12 5.5C12.2761 5.5 12.5 5.72386 12.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.5 12C12.5 12.2761 12.2761 12.5 12 12.5C11.7239 12.5 11.5 12.2761 11.5 12C11.5 11.7239 11.7239 11.5 12 11.5C12.2761 11.5 12.5 11.7239 12.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.5 6C18.5 6.27614 18.2761 6.5 18 6.5C17.7239 6.5 17.5 6.27614 17.5 6C17.5 5.72386 17.7239 5.5 18 5.5C18.2761 5.5 18.5 5.72386 18.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.5 12C18.5 12.2761 18.2761 12.5 18 12.5C17.7239 12.5 17.5 12.2761 17.5 12C17.5 11.7239 17.7239 11.5 18 11.5C18.2761 11.5 18.5 11.7239 18.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 6C6.5 6.27614 6.27614 6.5 6 6.5C5.72386 6.5 5.5 6.27614 5.5 6C5.5 5.72386 5.72386 5.5 6 5.5C6.27614 5.5 6.5 5.72386 6.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 12C6.5 12.2761 6.27614 12.5 6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5C6.27614 11.5 6.5 11.7239 6.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.5 18C12.5 18.2761 12.2761 18.5 12 18.5C11.7239 18.5 11.5 18.2761 11.5 18C11.5 17.7239 11.7239 17.5 12 17.5C12.2761 17.5 12.5 17.7239 12.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.5 18C18.5 18.2761 18.2761 18.5 18 18.5C17.7239 18.5 17.5 18.2761 17.5 18C17.5 17.7239 17.7239 17.5 18 17.5C18.2761 17.5 18.5 17.7239 18.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18C5.5 17.7239 5.72386 17.5 6 17.5C6.27614 17.5 6.5 17.7239 6.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>',
-  expand: '<path d="M15.25 9.25L12 5.75L8.75 9.25M15.25 14.75L12 18.25L8.75 14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  droplet: '<path d="M17.25 14.0714C17.25 16.9315 14.8995 19.25 12 19.25C9.10051 19.25 6.75 16.9315 6.75 14.0714C6.75 11.2114 12 4.75 12 4.75C12 4.75 17.25 11.2114 17.25 14.0714Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "chevron-double-down": '<path d="M8.75 7.75L12 11.25L15.25 7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 12.75L12 16.25L15.25 12.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "chevron-double-left": '<path d="M11.25 8.75L7.75 12L11.25 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.25 8.75L12.75 12L16.25 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "chevron-double-right": '<path d="M7.75 8.75L11.25 12L7.75 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.75 8.75L16.25 12L12.75 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "chevron-double-up": '<path d="M8.75 11.25L12 7.75L15.25 11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 16.25L12 12.75L15.25 16.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "speech-bubble": '<path d="M12 18.25C15.866 18.25 19.25 16.1552 19.25 11.5C19.25 6.84483 15.866 4.75 12 4.75C8.13401 4.75 4.75 6.84483 4.75 11.5C4.75 13.2675 5.23783 14.6659 6.05464 15.7206C6.29358 16.0292 6.38851 16.4392 6.2231 16.7926C6.12235 17.0079 6.01633 17.2134 5.90792 17.4082C5.45369 18.2242 6.07951 19.4131 6.99526 19.2297C8.0113 19.0263 9.14752 18.722 10.0954 18.2738C10.2933 18.1803 10.5134 18.1439 10.7305 18.1714C11.145 18.224 11.5695 18.25 12 18.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  message: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18.25C15.5 18.25 19.25 16.5 19.25 12C19.25 7.5 15.5 5.75 12 5.75C8.5 5.75 4.75 7.5 4.75 12C4.75 13.0298 4.94639 13.9156 5.29123 14.6693C5.50618 15.1392 5.62675 15.6573 5.53154 16.1651L5.26934 17.5635C5.13974 18.2547 5.74527 18.8603 6.43651 18.7307L9.64388 18.1293C9.896 18.082 10.1545 18.0861 10.4078 18.1263C10.935 18.2099 11.4704 18.25 12 18.25Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.5 12C9.5 12.2761 9.27614 12.5 9 12.5C8.72386 12.5 8.5 12.2761 8.5 12C8.5 11.7239 8.72386 11.5 9 11.5C9.27614 11.5 9.5 11.7239 9.5 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.5 12C12.5 12.2761 12.2761 12.5 12 12.5C11.7239 12.5 11.5 12.2761 11.5 12C11.5 11.7239 11.7239 11.5 12 11.5C12.2761 11.5 12.5 11.7239 12.5 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.5 12C15.5 12.2761 15.2761 12.5 15 12.5C14.7239 12.5 14.5 12.2761 14.5 12C14.5 11.7239 14.7239 11.5 15 11.5C15.2761 11.5 15.5 11.7239 15.5 12Z"></path>',
-  annotation: '<path d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V15.25C19.25 16.3546 18.3546 17.25 17.25 17.25H14.625L12 19.25L9.375 17.25H6.75C5.64543 17.25 4.75 16.3546 4.75 15.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  square: '<path d="M17.2502 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.2502C18.3548 4.75 19.2502 5.64543 19.2502 6.75V17.25C19.2502 18.3546 18.3548 19.25 17.2502 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  "pull-request": '<path d="M9.25 7C9.25 8.24264 8.24264 9.25 7 9.25C5.75736 9.25 4.75 8.24264 4.75 7C4.75 5.75736 5.75736 4.75 7 4.75C8.24264 4.75 9.25 5.75736 9.25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.25 17C9.25 18.2426 8.24264 19.25 7 19.25C5.75736 19.25 4.75 18.2426 4.75 17C4.75 15.7574 5.75736 14.75 7 14.75C8.24264 14.75 9.25 15.7574 9.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 17C19.25 18.2426 18.2426 19.25 17 19.25C15.7574 19.25 14.75 18.2426 14.75 17C14.75 15.7574 15.7574 14.75 17 14.75C18.2426 14.75 19.25 15.7574 19.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.75 9.5V14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.25 14.25V10.4701C17.25 9.83943 17.0513 9.22483 16.682 8.71359L14 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.75 8.25V4.75H17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  pencil: '<path d="M4.75 19.25L9 18.25L18.9491 8.30083C19.3397 7.9103 19.3397 7.27714 18.9491 6.88661L17.1134 5.05083C16.7228 4.6603 16.0897 4.6603 15.6991 5.05083L5.75 15L4.75 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.0234 7.03906L17.0234 10.0391" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  sparkles: '<path d="M17 4.75C17 5.89705 15.8971 7 14.75 7C15.8971 7 17 8.10295 17 9.25C17 8.10295 18.1029 7 19.25 7C18.1029 7 17 5.89705 17 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 14.75C17 15.8971 15.8971 17 14.75 17C15.8971 17 17 18.1029 17 19.25C17 18.1029 18.1029 17 19.25 17C18.1029 17 17 15.8971 17 14.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 7.75C9 9.91666 6.91666 12 4.75 12C6.91666 12 9 14.0833 9 16.25C9 14.0833 11.0833 12 13.25 12C11.0833 12 9 9.91666 9 7.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
-  photo: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 16L7.49619 12.5067C8.2749 11.5161 9.76453 11.4837 10.5856 12.4395L13 15.25M10.915 12.823C11.9522 11.5037 13.3973 9.63455 13.4914 9.51294C13.4947 9.50859 13.4979 9.50448 13.5013 9.50017C14.2815 8.51598 15.7663 8.48581 16.5856 9.43947L19 12.25M6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25Z"></path>',
-  columns: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 5V19"></path>',
-  "open-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 4.75v14.5m-3-8.5L9.75 12l1.5 1.25m-4.5 6h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
-  "close-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 4.75v14.5m3-8.5L14.25 12l-1.5 1.25M6.75 19.25h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
-  "file-search": '<path fill="currentColor" d="M17.25 9.25V10a.75.75 0 0 0 .53-1.28l-.53.53Zm-4.5-4.5.53-.53a.75.75 0 0 0-.53-.22v.75ZM10.25 20a.75.75 0 0 0 0-1.5V20Zm7.427-3.383a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm1.043 3.163a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm-.94-11.06-4.5-4.5-1.06 1.06 4.5 4.5 1.06-1.06ZM12.75 4h-6v1.5h6V4ZM4 6.75v10.5h1.5V6.75H4ZM6.75 20h3.5v-1.5h-3.5V20ZM12 4.75v3.5h1.5v-3.5H12ZM13.75 10h3.5V8.5h-3.5V10ZM12 8.25c0 .966.784 1.75 1.75 1.75V8.5a.25.25 0 0 1-.25-.25H12Zm-8 9A2.75 2.75 0 0 0 6.75 20v-1.5c-.69 0-1.25-.56-1.25-1.25H4ZM6.75 4A2.75 2.75 0 0 0 4 6.75h1.5c0-.69.56-1.25 1.25-1.25V4Zm8.485 14.47a3.235 3.235 0 0 0 3.236-3.235h-1.5c0 .959-.777 1.736-1.736 1.736v1.5Zm0-4.97c.959 0 1.736.777 1.736 1.735h1.5A3.235 3.235 0 0 0 15.235 12v1.5Zm0-1.5A3.235 3.235 0 0 0 12 15.235h1.5c0-.958.777-1.735 1.735-1.735V12Zm0 4.97a1.735 1.735 0 0 1-1.735-1.735H12a3.235 3.235 0 0 0 3.235 3.236v-1.5Zm1.382.707 2.103 2.103 1.06-1.06-2.103-2.103-1.06 1.06Z"></path>',
-  "folder-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 19.25h-3.5a2 2 0 0 1-2-2v-9.5h12.5a2 2 0 0 1 2 2v.5m-5.75-2.5-.931-1.958a2 2 0 0 0-1.756-1.042H6.75a2 2 0 0 0-2 2V11m12.695 6.445 1.805 1.805m-3.75-1a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z"></path>',
-  search: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z"></path>',
-  "web-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 8.25v-.5a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v.5m14.5 0H4.75m14.5 0v2m-14.5-2v8a2 2 0 0 0 2 2h2.5m7.743-1.257 2.257 2.257m-4.015-1.53a2.485 2.485 0 1 0 0-4.97 2.485 2.485 0 0 0 0 4.97Z"></path>',
-  loading: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.75v1.5m5.126.624L16 8m3.25 4h-1.5m-.624 5.126-1.768-1.768M12 16.75v2.5m-3.36-3.891-1.768 1.768M7.25 12h-2.5m3.891-3.358L6.874 6.874"></path>',
-  mic: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 8C8.75 6.20507 10.2051 4.75 12 4.75C13.7949 4.75 15.25 6.20507 15.25 8V11C15.25 12.7949 13.7949 14.25 12 14.25C10.2051 14.25 8.75 12.7949 8.75 11V8Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.75C5.75 12.75 6 17.25 12 17.25C18 17.25 18.25 12.75 18.25 12.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 17.75V19.25"></path>',
- } as const
-
-export function Icon(props: IconProps) {
-  const [local, others] = splitProps(props, ["name", "size", "class", "classList"])
-  const size = local.size ?? 24
-  return (
-    <svg
-      classList={{
-        ...(local.classList || {}),
-        "shrink-0": true,
-        [local.class ?? ""]: !!local.class,
-      }}
-      width={size}
-      height={size}
-      fill="none"
-      viewBox="0 0 24 24"
-      innerHTML={icons[local.name]}
-      aria-hidden="true"
-      {...others}
-    />
-  )
-}
--- a/packages/desktop/src/ui/index.ts
+++ b/packages/desktop/src/ui/index.ts
@@ -1,4 +1,3 @@
-export { Button, type ButtonProps } from "./button"
 export {
  Collapsible,
  type CollapsibleProps,
@@ -6,8 +5,4 @@ export {
  type CollapsibleContentProps,
 } from "./collapsible"
 export { FileIcon, type FileIconProps } from "./file-icon"
-export { Icon, type IconProps } from "./icon"
 export { IconButton, type IconButtonProps } from "./icon-button"
-export { Link, type LinkProps } from "./link"
-export { Logo, type LogoProps } from "./logo"
-export { Tooltip, type TooltipProps } from "./tooltip"
--- a/packages/desktop/src/ui/link.tsx
+++ b/packages/desktop/src/ui/link.tsx
@@ -1,13 +0,0 @@
-import { A } from "@solidjs/router"
-import { splitProps } from "solid-js"
-import type { ComponentProps } from "solid-js"
-
-export interface LinkProps extends ComponentProps<typeof A> {
-  variant?: "primary" | "secondary" | "ghost"
-  size?: "sm" | "md" | "lg"
-}
-
-export function Link(props: LinkProps) {
-  const [, others] = splitProps(props, ["variant", "size", "class"])
-  return <A {...others} />
-}
--- a/packages/desktop/src/ui/logo.tsx
+++ b/packages/desktop/src/ui/logo.tsx
@@ -1,125 +0,0 @@
-import type { ComponentProps } from "solid-js"
-
-export interface LogoProps extends ComponentProps<"svg"> {
-  variant?: "mark" | "full" | "ornate"
-  size?: number
-}
-
-export function Logo(props: LogoProps) {
-  const { variant = "mark", size = 64, ...others } = props
-
-  if (variant === "mark") {
-    return (
-      <svg
-        width={size}
-        height={size * (42 / 64)}
-        viewBox="0 0 64 42"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        class={`text-text ${props.class ?? ""}`}
-        {...others}
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M0 0H32V41.5955H0V0ZM24 8.5H8V33H24V8.5Z"
-          fill="currentColor"
-        />
-        <path d="M40 0H64V8.5H48V33H64V41.5H40V0Z" fill="currentColor" />
-      </svg>
-    )
-  }
-
-  if (variant === "full") {
-    return (
-      <svg
-        width={size * (289 / 42)}
-        height={size}
-        viewBox="0 0 289 42"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        {...others}
-      >
-        <path d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z" fill="currentColor" />
-        <path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="currentColor" />
-        <path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="currentColor" />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z"
-          fill="currentColor"
-        />
-        <path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="currentColor" />
-        <path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="currentColor" />
-        <path d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z" fill="currentColor" />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z"
-          fill="currentColor"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z"
-          fill="currentColor"
-        />
-        <path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="currentColor" />
-      </svg>
-    )
-  }
-
-  return (
-    <svg
-      width={size * (289 / 42)}
-      height={size}
-      viewBox="0 0 289 50"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...others}
-    >
-      <path d="M8.5 16.5H24.5V33H8.5V16.5Z" fill="currentColor" fill-opacity="0.2" />
-      <path d="M48.5 16.5H64.5V33H48.5V16.5Z" fill="currentColor" fill-opacity="0.2" />
-      <path d="M120.5 16.5H136.5V33H120.5V16.5Z" fill="currentColor" fill-opacity="0.2" />
-      <path d="M160.5 16.5H176.5V33H160.5V16.5Z" fill="currentColor" fill-opacity="0.2" />
-      <path d="M192.5 16.5H208.5V33H192.5V16.5Z" fill="currentColor" fill-opacity="0.2" />
-      <path d="M232.5 16.5H248.5V33H232.5V16.5Z" fill="currentColor" fill-opacity="0.2" />
-      <path
-        d="M264.5 0H288.5V8.5H272.5V16.5H288.5V25H272.5V33H288.5V41.5H264.5V0Z"
-        fill="currentColor"
-        fill-opacity="0.95"
-      />
-      <path d="M248.5 0H224.5V41.5H248.5V33H232.5V8.5H248.5V0Z" fill="currentColor" fill-opacity="0.95" />
-      <path d="M256.5 8.5H248.5V33H256.5V8.5Z" fill="currentColor" fill-opacity="0.95" />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M184.5 0H216.5V41.5H184.5V0ZM208.5 8.5H192.5V33H208.5V8.5Z"
-        fill="currentColor"
-        fill-opacity="0.95"
-      />
-      <path d="M144.5 8.5H136.5V41.5H144.5V8.5Z" fill="currentColor" fill-opacity="0.5" />
-      <path d="M136.5 0H112.5V41.5H120.5V8.5H136.5V0Z" fill="currentColor" fill-opacity="0.5" />
-      <path
-        d="M80.5 0H104.5V8.5H88.5V16.5H104.5V25H88.5V33H104.5V41.5H80.5V0Z"
-        fill="currentColor"
-        fill-opacity="0.5"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M40.5 0H72.5V41.5H48.5V49.5H40.5V0ZM64.5 8.5H48.5V33H64.5V8.5Z"
-        fill="currentColor"
-        fill-opacity="0.5"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M0.5 0H32.5V41.5955H0.5V0ZM24.5 8.5H8.5V33H24.5V8.5Z"
-        fill="currentColor"
-        fill-opacity="0.5"
-      />
-      <path d="M152.5 0H176.5V8.5H160.5V33H176.5V41.5H152.5V0Z" fill="currentColor" fill-opacity="0.95" />
-    </svg>
-  )
-}
--- a/packages/desktop/src/ui/tabs.tsx
+++ b/packages/desktop/src/ui/tabs.tsx
@@ -1,71 +0,0 @@
-import { Tabs as KobalteTabs } from "@kobalte/core/tabs"
-import { splitProps } from "solid-js"
-import type { ComponentProps, ParentProps } from "solid-js"
-
-export interface TabsProps extends ComponentProps<typeof KobalteTabs> {}
-export interface TabsListProps extends ComponentProps<typeof KobalteTabs.List> {}
-export interface TabsTriggerProps extends ComponentProps<typeof KobalteTabs.Trigger> {}
-export interface TabsContentProps extends ComponentProps<typeof KobalteTabs.Content> {}
-
-function TabsRoot(props: TabsProps) {
-  return <KobalteTabs {...props} />
-}
-
-function TabsList(props: TabsListProps) {
-  const [local, others] = splitProps(props, ["class"])
-  return (
-    <KobalteTabs.List
-      classList={{
-        "relative flex items-center bg-background overflow-x-auto no-scrollbar": true,
-        "divide-x divide-border-subtle/40": true,
-        "after:content-[''] after:block after:grow after:h-8": true,
-        "after:border-l empty:after:border-l-0! after:border-b after:border-border-subtle/40": true,
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    />
-  )
-}
-
-function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
-  const [local, others] = splitProps(props, ["class", "children"])
-  return (
-    <KobalteTabs.Trigger
-      classList={{
-        "relative px-3 h-8 flex items-center": true,
-        "text-sm font-medium text-text-muted/60 cursor-pointer": true,
-        "whitespace-nowrap shrink-0 border-b border-border-subtle/40": true,
-        "disabled:pointer-events-none disabled:opacity-50": true,
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring": true,
-        "data-[selected]:text-text data-[selected]:bg-background-panel": true,
-        "data-[selected]:!border-b-transparent": true,
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    >
-      {local.children}
-    </KobalteTabs.Trigger>
-  )
-}
-
-function TabsContent(props: ParentProps<TabsContentProps>) {
-  const [local, others] = splitProps(props, ["class", "children"])
-  return (
-    <KobalteTabs.Content
-      classList={{
-        "bg-background-panel overflow-y-auto h-full no-scrollbar": true,
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring": true,
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    >
-      {local.children}
-    </KobalteTabs.Content>
-  )
-}
-
-export const Tabs = Object.assign(TabsRoot, {
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent,
-})
--- a/packages/desktop/vite.config.ts
+++ b/packages/desktop/vite.config.ts
@@ -3,7 +3,6 @@ import solidPlugin from "vite-plugin-solid"
 import tailwindcss from "@tailwindcss/vite"
 import path from "path"
 import { iconsSpritesheet } from "vite-plugin-icons-spritesheet"
-import { generateThemeCSS } from "./scripts/vite-theme-plugin"

 export default defineConfig({
  resolve: {
@@ -12,7 +11,6 @@ export default defineConfig({
    },
  },
  plugins: [
-    generateThemeCSS(),
    tailwindcss(),
    solidPlugin(),
    iconsSpritesheet({
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@opencode-ai/ui",
-  "version": "0.15.5",
+  "version": "0.15.4",
  "type": "module",
  "exports": {
    ".": "./src/components/index.ts",
@@ -17,6 +17,7 @@
  "dependencies": {
    "remeda": "catalog:",
    "solid-js": "catalog:",
+    "@solidjs/meta": "catalog:",
    "@kobalte/core": "catalog:",
    "@opencode-ai/css": "workspace:*"
  }
--- a/packages/ui/src/app.tsx
+++ b/packages/ui/src/app.tsx
@@ -1,6 +1,5 @@
 import type { Component } from "solid-js"
-import { Button, Select, Tabs } from "./components"
-import "@opencode-ai/css"
+import { Button, Select, Tabs, Tooltip, Fonts } from "./components"
 import "./index.css"

 const App: Component = () => {
@@ -17,6 +16,9 @@ const App: Component = () => {
        <Button variant="ghost" size="normal">
          Normal Ghost
        </Button>
+        <Button variant="secondary" size="normal" disabled>
+          Normal Disabled
+        </Button>
        <Button variant="primary" size="large">
          Large Primary
        </Button>
@@ -26,6 +28,9 @@ const App: Component = () => {
        <Button variant="ghost" size="large">
          Large Ghost
        </Button>
+        <Button variant="secondary" size="large" disabled>
+          Large Disabled
+        </Button>
      </section>
      <h3>Select</h3>
      <section>
@@ -88,14 +93,35 @@ const App: Component = () => {
          </Tabs.Content>
        </Tabs>
      </section>
+      <h3>Tooltips</h3>
+      <section>
+        <Tooltip value="This is a top tooltip" placement="top">
+          <Button variant="secondary">Top Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a bottom tooltip" placement="bottom">
+          <Button variant="secondary">Bottom Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a left tooltip" placement="left">
+          <Button variant="secondary">Left Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a right tooltip" placement="right">
+          <Button variant="secondary">Right Tooltip</Button>
+        </Tooltip>
+        <Tooltip value={() => `Dynamic tooltip: ${new Date().toLocaleTimeString()}`} placement="top">
+          <Button variant="primary">Dynamic Tooltip</Button>
+        </Tooltip>
+      </section>
    </div>
  )

  return (
+    <>
+      <Fonts />
      <main>
        <Content />
        <Content dark />
      </main>
+    </>
  )
 }

--- a/packages/ui/src/components/fonts.tsx
+++ b/packages/ui/src/components/fonts.tsx
@@ -0,0 +1,44 @@
+import { Style, Link } from "@solidjs/meta"
+import geist from "@opencode-ai/css/fonts/geist.woff2"
+import geistMono from "@opencode-ai/css/fonts/geist-mono.woff2"
+
+export const Fonts = () => {
+  return (
+    <>
+      <Style>{`
+        @font-face {
+          font-family: "geist";
+          src: url("${geist}") format("woff2-variations");
+          font-display: swap;
+          font-style: normal;
+          font-weight: 100 900;
+        }
+        @font-face {
+          font-family: "geist-fallback";
+          src: local("Arial");
+          size-adjust: 100%;
+          ascent-override: 97%;
+          descent-override: 25%;
+          line-gap-override: 1%;
+        }
+        @font-face {
+          font-family: "geist-mono";
+          src: url("${geistMono}") format("woff2-variations");
+          font-display: swap;
+          font-style: normal;
+          font-weight: 100 900;
+        }
+        @font-face {
+          font-family: "geist-mono-fallback";
+          src: local("Courier New");
+          size-adjust: 100%;
+          ascent-override: 97%;
+          descent-override: 25%;
+          line-gap-override: 1%;
+        }
+      `}</Style>
+      <Link rel="preload" href={geist} as="font" type="font/woff2" crossorigin="anonymous" />
+      <Link rel="preload" href={geistMono} as="font" type="font/woff2" crossorigin="anonymous" />
+    </>
+  )
+}
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,4 +1,6 @@
 export * from "./button"
 export * from "./icon"
+export * from "./fonts"
 export * from "./select"
 export * from "./tabs"
+export * from "./tooltip"
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -9,7 +9,7 @@ export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {

 export function Tooltip(props: TooltipProps) {
  const [open, setOpen] = createSignal(false)
-  const [local, others] = splitProps(props, ["class", "children"])
+  const [local, others] = splitProps(props, ["children", "class"])

  const c = children(() => local.children)

@@ -30,27 +30,13 @@ export function Tooltip(props: TooltipProps) {

  return (
    <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
-      <KobalteTooltip.Trigger as={"div"} class="flex items-center">
+      <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger">
        {c()}
      </KobalteTooltip.Trigger>
      <KobalteTooltip.Portal>
-        <KobalteTooltip.Content
-          classList={{
-            "z-[1000] max-w-[320px] rounded-md bg-background-element px-2 py-1": true,
-            "text-xs font-medium text-text shadow-md pointer-events-none!": true,
-            "transition-all duration-150 ease-out": true,
-            "transform-gpu transform-origin-[var(--kb-tooltip-content-transform-origin)]": true,
-            "data-closed:opacity-0": true,
-            "data-expanded:opacity-100 data-expanded:translate-y-0 data-expanded:translate-x-0": true,
-            "data-closed:translate-y-1": props.placement === "top",
-            "data-closed:-translate-y-1": props.placement === "bottom",
-            "data-closed:translate-x-1": props.placement === "left",
-            "data-closed:-translate-x-1": props.placement === "right",
-            [local.class ?? ""]: !!local.class,
-          }}
-        >
+        <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement} class={local.class}>
          {typeof others.value === "function" ? others.value() : others.value}
-          <KobalteTooltip.Arrow size={18} />
+          <KobalteTooltip.Arrow data-slot="arrow" size={18} />
        </KobalteTooltip.Content>
      </KobalteTooltip.Portal>
    </KobalteTooltip>
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1,8 +1,10 @@
+@import "@opencode-ai/css";
+
 :root {
  body {
    margin: 0;
-    background-color: var(--background-background);
-    color: var(--text-default-text);
+    background-color: var(--background-base);
+    color: var(--text-base);
  }
  main {
    display: flex;
@@ -35,6 +37,6 @@
 }

 .dark {
-  background-color: var(--background-background);
-  color: var(--text-default-text);
+  background-color: var(--background-base);
+  color: var(--text-base);
 }
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,5 +1,6 @@
 /* @refresh reload */
 import { render } from "solid-js/web"
+import { MetaProvider } from "@solidjs/meta"

 import App from "./app"

@@ -11,4 +12,11 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  )
 }

-render(() => <App />, root!)
+render(
+  () => (
+    <MetaProvider>
+      <App />
+    </MetaProvider>
+  ),
+  root!,
+)