Merge branch 'main' into collab-titlebar-2

Piotr Osiewicz created

Change summary

Cargo.lock                                             |   59 
Cargo.toml                                             |    1 
assets/keymaps/atom.json                               |   35 
assets/keymaps/default.json                            |    4 
crates/activity_indicator/src/activity_indicator.rs    |    2 
crates/ai/Cargo.toml                                   |    1 
crates/ai/src/ai.rs                                    |    2 
crates/ai/src/assistant.rs                             |  817 ++++++-
crates/auto_update/src/update_notification.rs          |    4 
crates/breadcrumbs/src/breadcrumbs.rs                  |    2 
crates/collab_ui/src/collab_titlebar_item.rs           |   27 
crates/collab_ui/src/contact_finder.rs                 |    3 
crates/collab_ui/src/contact_list.rs                   |   41 
crates/collab_ui/src/notifications.rs                  |    4 
crates/command_palette/src/command_palette.rs          |    4 
crates/context_menu/src/context_menu.rs                |   16 
crates/copilot/src/sign_in.rs                          |    6 
crates/copilot_button/src/copilot_button.rs            |    5 
crates/diagnostics/src/diagnostics.rs                  |    4 
crates/diagnostics/src/items.rs                        |    4 
crates/editor/src/display_map/block_map.rs             |    5 
crates/editor/src/display_map/fold_map.rs              |   12 
crates/editor/src/display_map/wrap_map.rs              |    8 
crates/editor/src/editor.rs                            |   66 
crates/editor/src/element.rs                           |   14 
crates/editor/src/multi_buffer.rs                      |   10 
crates/feedback/src/deploy_feedback_button.rs          |    3 
crates/feedback/src/submit_feedback_button.rs          |    2 
crates/file_finder/src/file_finder.rs                  |    2 
crates/gpui/src/app.rs                                 |    8 
crates/gpui/src/app/action.rs                          |    8 
crates/gpui/src/app/window.rs                          |    2 
crates/gpui/src/elements/list.rs                       |   10 
crates/gpui/src/platform/mac/platform.rs               |    8 
crates/language/src/language.rs                        |  134 
crates/language/src/syntax_map.rs                      |    8 
crates/language_selector/src/active_buffer_language.rs |    2 
crates/language_selector/src/language_selector.rs      |    2 
crates/language_tools/src/lsp_log.rs                   |    8 
crates/language_tools/src/syntax_tree_view.rs          |    5 
crates/lsp/src/lsp.rs                                  |   54 
crates/outline/src/outline.rs                          |    2 
crates/project/src/project.rs                          |   38 
crates/project/src/worktree.rs                         |    4 
crates/project_panel/src/project_panel.rs              |   15 
crates/project_symbols/src/project_symbols.rs          |    7 
crates/recent_projects/src/recent_projects.rs          |    2 
crates/rope/src/rope.rs                                |    2 
crates/search/src/buffer_search.rs                     |   10 
crates/search/src/project_search.rs                    |    8 
crates/settings/Cargo.toml                             |    4 
crates/settings/src/keymap_file.rs                     |   51 
crates/settings/src/settings_store.rs                  |    5 
crates/sum_tree/src/cursor.rs                          |    4 
crates/sum_tree/src/sum_tree.rs                        |   22 
crates/sum_tree/src/tree_map.rs                        |    6 
crates/text/src/text.rs                                |   30 
crates/theme/src/theme.rs                              |  106 
crates/theme/src/ui.rs                                 |    6 
crates/theme_selector/src/theme_selector.rs            |    2 
crates/theme_testbench/Cargo.toml                      |   19 
crates/theme_testbench/src/theme_testbench.rs          |  300 --
crates/welcome/src/base_keymap_picker.rs               |    2 
crates/workspace/src/dock.rs                           |    4 
crates/workspace/src/notifications.rs                  |    4 
crates/workspace/src/pane.rs                           |    4 
crates/workspace/src/toolbar.rs                        |    2 
crates/workspace/src/workspace.rs                      |   10 
crates/zed/Cargo.toml                                  |    3 
crates/zed/src/languages/c.rs                          |   26 
crates/zed/src/languages/elixir.rs                     |   68 
crates/zed/src/languages/elixir/highlights.scm         |    9 
crates/zed/src/languages/go.rs                         |   64 
crates/zed/src/languages/heex/highlights.scm           |   15 
crates/zed/src/languages/heex/injections.scm           |   18 
crates/zed/src/languages/html.rs                       |   22 
crates/zed/src/languages/json.rs                       |   15 
crates/zed/src/languages/language_plugin.rs            |   13 
crates/zed/src/languages/lua.rs                        |   29 
crates/zed/src/languages/python.rs                     |   13 
crates/zed/src/languages/ruby.rs                       |   13 
crates/zed/src/languages/rust.rs                       |   26 
crates/zed/src/languages/typescript.rs                 |   30 
crates/zed/src/languages/yaml.rs                       |   12 
crates/zed/src/main.rs                                 |    1 
docs/zed/syntax-highlighting.md                        |   79 
styles/.gitignore                                      |    1 
styles/.zed/settings.json                              |   20 
styles/package-lock.json                               | 1202 +++++++++++
styles/package.json                                    |   11 
styles/src/buildTokens.ts                              |   86 
styles/src/element/index.ts                            |    4 
styles/src/element/interactive.test.ts                 |   56 
styles/src/element/interactive.ts                      |   97 
styles/src/element/toggle.test.ts                      |   52 
styles/src/element/toggle.ts                           |   47 
styles/src/styleTree/app.ts                            |    1 
styles/src/styleTree/assistant.ts                      |   44 
styles/src/styleTree/commandPalette.ts                 |   18 
styles/src/styleTree/components.ts                     |    2 
styles/src/styleTree/contactList.ts                    |  200 +
styles/src/styleTree/contactNotification.ts            |   42 
styles/src/styleTree/contextMenu.ts                    |   76 
styles/src/styleTree/copilot.ts                        |  185 +
styles/src/styleTree/editor.ts                         |  114 
styles/src/styleTree/feedback.ts                       |   51 
styles/src/styleTree/picker.ts                         |   87 
styles/src/styleTree/projectPanel.ts                   |  111 
styles/src/styleTree/search.ts                         |  100 
styles/src/styleTree/simpleMessageNotification.ts      |   59 
styles/src/styleTree/statusBar.ts                      |  160 
styles/src/styleTree/tabBar.ts                         |   40 
styles/src/styleTree/toggle.ts                         |   47 
styles/src/styleTree/toolbarDropdownMenu.ts            |   76 
styles/src/styleTree/updateNotification.ts             |   39 
styles/src/styleTree/welcome.ts                        |   43 
styles/src/styleTree/workspace.ts                      |  331 ++-
styles/src/theme/syntax.ts                             |    2 
styles/src/theme/tokens/colorScheme.ts                 |   56 
styles/src/theme/tokens/layer.ts                       |   33 
styles/src/theme/tokens/players.ts                     |   18 
styles/src/theme/tokens/token.ts                       |    9 
styles/src/themes/rose-pine/common.ts                  |   75 
styles/src/themes/rose-pine/rose-pine-dawn.ts          |   40 
styles/src/themes/rose-pine/rose-pine-moon.ts          |   40 
styles/src/themes/rose-pine/rose-pine.ts               |   37 
styles/src/utils/slugify.ts                            |   11 
styles/tsconfig.json                                   |   12 
styles/vitest.config.ts                                |    8 
129 files changed, 4,481 insertions(+), 1,799 deletions(-)

Detailed changes

Cargo.lock πŸ”—

@@ -114,6 +114,7 @@ dependencies = [
  "serde",
  "serde_json",
  "settings",
+ "smol",
  "theme",
  "tiktoken-rs",
  "util",
@@ -593,7 +594,7 @@ dependencies = [
  "http",
  "http-body",
  "hyper",
- "itoa",
+ "itoa 1.0.6",
  "matchit",
  "memchr",
  "mime",
@@ -3013,7 +3014,7 @@ checksum = "bd6effc99afb63425aff9b05836f029929e345a6148a14b7ecd5ab67af944482"
 dependencies = [
  "bytes 1.4.0",
  "fnv",
- "itoa",
+ "itoa 1.0.6",
 ]
 
 [[package]]
@@ -3072,7 +3073,7 @@ dependencies = [
  "http-body",
  "httparse",
  "httpdate",
- "itoa",
+ "itoa 1.0.6",
  "pin-project-lite 0.2.9",
  "socket2",
  "tokio",
@@ -3338,6 +3339,12 @@ dependencies = [
  "either",
 ]
 
+[[package]]
+name = "itoa"
+version = "0.4.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b71991ff56294aa922b450139ee08b3bfc70982c6b2c7562771375cf73542dd4"
+
 [[package]]
 name = "itoa"
 version = "1.0.6"
@@ -3398,12 +3405,6 @@ dependencies = [
  "wasm-bindgen",
 ]
 
-[[package]]
-name = "json_comments"
-version = "0.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41ee439ee368ba4a77ac70d04f14015415af8600d6c894dc1f11bd79758c57d5"
-
 [[package]]
 name = "jwt"
 version = "0.16.0"
@@ -5669,7 +5670,7 @@ dependencies = [
  "bitflags",
  "errno 0.2.8",
  "io-lifetimes 0.5.3",
- "itoa",
+ "itoa 1.0.6",
  "libc",
  "linux-raw-sys 0.0.42",
  "once_cell",
@@ -6101,7 +6102,19 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "057d394a50403bcac12672b2b18fb387ab6d289d957dab67dd201875391e52f1"
 dependencies = [
  "indexmap",
- "itoa",
+ "itoa 1.0.6",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "serde_json_lenient"
+version = "0.1.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7d7b9ce5b0a63c6269b9623ed828b39259545a6ec0d8a35d6135ad6af6232add"
+dependencies = [
+ "indexmap",
+ "itoa 0.4.8",
  "ryu",
  "serde",
 ]
@@ -6124,7 +6137,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
 dependencies = [
  "form_urlencoded",
- "itoa",
+ "itoa 1.0.6",
  "ryu",
  "serde",
 ]
@@ -6150,7 +6163,7 @@ dependencies = [
  "fs",
  "futures 0.3.28",
  "gpui",
- "json_comments",
+ "indoc",
  "lazy_static",
  "postage",
  "pretty_assertions",
@@ -6159,6 +6172,7 @@ dependencies = [
  "serde",
  "serde_derive",
  "serde_json",
+ "serde_json_lenient",
  "smallvec",
  "sqlez",
  "staff_mode",
@@ -6509,7 +6523,7 @@ dependencies = [
  "hkdf",
  "hmac 0.12.1",
  "indexmap",
- "itoa",
+ "itoa 1.0.6",
  "libc",
  "libsqlite3-sys",
  "log",
@@ -6904,18 +6918,6 @@ dependencies = [
  "workspace",
 ]
 
-[[package]]
-name = "theme_testbench"
-version = "0.1.0"
-dependencies = [
- "gpui",
- "project",
- "settings",
- "smallvec",
- "theme",
- "workspace",
-]
-
 [[package]]
 name = "thiserror"
 version = "1.0.40"
@@ -6995,7 +6997,7 @@ version = "0.3.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8f3403384eaacbca9923fa06940178ac13e4edb725486d70e8e15881d0c836cc"
 dependencies = [
- "itoa",
+ "itoa 1.0.6",
  "serde",
  "time-core",
  "time-macros",
@@ -8797,7 +8799,7 @@ dependencies = [
 
 [[package]]
 name = "zed"
-version = "0.92.0"
+version = "0.93.0"
 dependencies = [
  "activity_indicator",
  "ai",
@@ -8876,7 +8878,6 @@ dependencies = [
  "text",
  "theme",
  "theme_selector",
- "theme_testbench",
  "thiserror",
  "tiny_http",
  "toml",

Cargo.toml πŸ”—

@@ -61,7 +61,6 @@ members = [
     "crates/text",
     "crates/theme",
     "crates/theme_selector",
-    "crates/theme_testbench",
     "crates/util",
     "crates/vim",
     "crates/workspace",

assets/keymaps/atom.json πŸ”—

@@ -55,7 +55,40 @@
     "context": "Pane",
     "bindings": {
       "alt-cmd-/": "search::ToggleRegex",
-      "ctrl-0": "project_panel::ToggleFocus"
+      "ctrl-0": "project_panel::ToggleFocus",
+      "cmd-1": [
+        "pane::ActivateItem",
+        0
+      ],
+      "cmd-2": [
+        "pane::ActivateItem",
+        1
+      ],
+      "cmd-3": [
+        "pane::ActivateItem",
+        2
+      ],
+      "cmd-4": [
+        "pane::ActivateItem",
+        3
+      ],
+      "cmd-5": [
+        "pane::ActivateItem",
+        4
+      ],
+      "cmd-6": [
+        "pane::ActivateItem",
+        5
+      ],
+      "cmd-7": [
+        "pane::ActivateItem",
+        6
+      ],
+      "cmd-8": [
+        "pane::ActivateItem",
+        7
+      ],
+      "cmd-9": "pane::ActivateLastItem"
     }
   },
   {

assets/keymaps/default.json πŸ”—

@@ -200,7 +200,9 @@
     "context": "AssistantEditor > Editor",
     "bindings": {
       "cmd-enter": "assistant::Assist",
-      "cmd->": "assistant::QuoteSelection"
+      "cmd->": "assistant::QuoteSelection",
+      "shift-enter": "assistant::Split",
+      "ctrl-r": "assistant::CycleMessageRole"
     }
   },
   {

crates/activity_indicator/src/activity_indicator.rs πŸ”—

@@ -326,7 +326,7 @@ impl View for ActivityIndicator {
         let mut element = MouseEventHandler::<Self, _>::new(0, cx, |state, cx| {
             let theme = &theme::current(cx).workspace.status_bar.lsp_status;
             let style = if state.hovered() && on_click.is_some() {
-                theme.hover.as_ref().unwrap_or(&theme.default)
+                theme.hovered.as_ref().unwrap_or(&theme.default)
             } else {
                 &theme.default
             };

crates/ai/Cargo.toml πŸ”—

@@ -28,6 +28,7 @@ isahc.workspace = true
 schemars.workspace = true
 serde.workspace = true
 serde_json.workspace = true
+smol.workspace = true
 tiktoken-rs = "0.4"
 
 [dev-dependencies]

crates/ai/src/ai.rs πŸ”—

@@ -7,7 +7,7 @@ use serde::{Deserialize, Serialize};
 use std::fmt::{self, Display};
 
 // Data types for chat completion requests
-#[derive(Serialize)]
+#[derive(Debug, Serialize)]
 struct OpenAIRequest {
     model: String,
     messages: Vec<RequestMessage>,

crates/ai/src/assistant.rs πŸ”—

@@ -8,7 +8,7 @@ use collections::{HashMap, HashSet};
 use editor::{
     display_map::{BlockDisposition, BlockId, BlockProperties, BlockStyle, ToDisplayPoint},
     scroll::autoscroll::{Autoscroll, AutoscrollStrategy},
-    Anchor, Editor, ToOffset as _,
+    Anchor, Editor, ToOffset,
 };
 use fs::Fs;
 use futures::{io::BufReader, AsyncBufReadExt, AsyncReadExt, Stream, StreamExt};
@@ -40,7 +40,15 @@ const OPENAI_API_URL: &'static str = "https://api.openai.com/v1";
 
 actions!(
     assistant,
-    [NewContext, Assist, QuoteSelection, ToggleFocus, ResetKey]
+    [
+        NewContext,
+        Assist,
+        Split,
+        CycleMessageRole,
+        QuoteSelection,
+        ToggleFocus,
+        ResetKey
+    ]
 );
 
 pub fn init(cx: &mut AppContext) {
@@ -64,6 +72,8 @@ pub fn init(cx: &mut AppContext) {
     cx.capture_action(AssistantEditor::cancel_last_assist);
     cx.add_action(AssistantEditor::quote_selection);
     cx.capture_action(AssistantEditor::copy);
+    cx.capture_action(AssistantEditor::split);
+    cx.capture_action(AssistantEditor::cycle_message_role);
     cx.add_action(AssistantPanel::save_api_key);
     cx.add_action(AssistantPanel::reset_api_key);
     cx.add_action(
@@ -438,7 +448,7 @@ enum AssistantEvent {
 
 struct Assistant {
     buffer: ModelHandle<Buffer>,
-    messages: Vec<Message>,
+    message_anchors: Vec<MessageAnchor>,
     messages_metadata: HashMap<MessageId, MessageMetadata>,
     next_message_id: MessageId,
     summary: Option<String>,
@@ -463,7 +473,7 @@ impl Assistant {
         language_registry: Arc<LanguageRegistry>,
         cx: &mut ModelContext<Self>,
     ) -> Self {
-        let model = "gpt-3.5-turbo";
+        let model = "gpt-3.5-turbo-0613";
         let markdown = language_registry.language_for_name("Markdown");
         let buffer = cx.add_model(|cx| {
             let mut buffer = Buffer::new(0, "", cx);
@@ -483,7 +493,7 @@ impl Assistant {
         });
 
         let mut this = Self {
-            messages: Default::default(),
+            message_anchors: Default::default(),
             messages_metadata: Default::default(),
             next_message_id: Default::default(),
             summary: None,
@@ -498,17 +508,17 @@ impl Assistant {
             api_key,
             buffer,
         };
-        let message = Message {
+        let message = MessageAnchor {
             id: MessageId(post_inc(&mut this.next_message_id.0)),
             start: language::Anchor::MIN,
         };
-        this.messages.push(message.clone());
+        this.message_anchors.push(message.clone());
         this.messages_metadata.insert(
             message.id,
             MessageMetadata {
                 role: Role::User,
                 sent_at: Local::now(),
-                error: None,
+                status: MessageStatus::Done,
             },
         );
 
@@ -533,7 +543,7 @@ impl Assistant {
 
     fn count_remaining_tokens(&mut self, cx: &mut ModelContext<Self>) {
         let messages = self
-            .open_ai_request_messages(cx)
+            .messages(cx)
             .into_iter()
             .filter_map(|message| {
                 Some(tiktoken_rs::ChatCompletionRequestMessage {
@@ -542,7 +552,7 @@ impl Assistant {
                         Role::Assistant => "assistant".into(),
                         Role::System => "system".into(),
                     },
-                    content: message.content,
+                    content: self.buffer.read(cx).text_for_range(message.range).collect(),
                     name: None,
                 })
             })
@@ -579,96 +589,169 @@ impl Assistant {
         cx.notify();
     }
 
-    fn assist(&mut self, cx: &mut ModelContext<Self>) -> Option<(Message, Message)> {
-        let request = OpenAIRequest {
-            model: self.model.clone(),
-            messages: self.open_ai_request_messages(cx),
-            stream: true,
-        };
+    fn assist(
+        &mut self,
+        selected_messages: HashSet<MessageId>,
+        cx: &mut ModelContext<Self>,
+    ) -> Vec<MessageAnchor> {
+        let mut user_messages = Vec::new();
+        let mut tasks = Vec::new();
+        for selected_message_id in selected_messages {
+            let selected_message_role =
+                if let Some(metadata) = self.messages_metadata.get(&selected_message_id) {
+                    metadata.role
+                } else {
+                    continue;
+                };
+
+            if selected_message_role == Role::Assistant {
+                if let Some(user_message) = self.insert_message_after(
+                    selected_message_id,
+                    Role::User,
+                    MessageStatus::Done,
+                    cx,
+                ) {
+                    user_messages.push(user_message);
+                } else {
+                    continue;
+                }
+            } else {
+                let request = OpenAIRequest {
+                    model: self.model.clone(),
+                    messages: self
+                        .messages(cx)
+                        .filter(|message| matches!(message.status, MessageStatus::Done))
+                        .flat_map(|message| {
+                            let mut system_message = None;
+                            if message.id == selected_message_id {
+                                system_message = Some(RequestMessage {
+                                    role: Role::System,
+                                    content: concat!(
+                                        "Treat the following messages as additional knowledge you have learned about, ",
+                                        "but act as if they were not part of this conversation. That is, treat them ",
+                                        "as if the user didn't see them and couldn't possibly inquire about them."
+                                    ).into()
+                                });
+                            }
+
+                            Some(message.to_open_ai_message(self.buffer.read(cx))).into_iter().chain(system_message)
+                        })
+                        .chain(Some(RequestMessage {
+                            role: Role::System,
+                            content: format!(
+                                "Direct your reply to message with id {}. Do not include a [Message X] header.",
+                                selected_message_id.0
+                            ),
+                        }))
+                        .collect(),
+                    stream: true,
+                };
+
+                let Some(api_key) = self.api_key.borrow().clone() else { continue };
+                let stream = stream_completion(api_key, cx.background().clone(), request);
+                let assistant_message = self
+                    .insert_message_after(
+                        selected_message_id,
+                        Role::Assistant,
+                        MessageStatus::Pending,
+                        cx,
+                    )
+                    .unwrap();
+
+                tasks.push(cx.spawn_weak({
+                    |this, mut cx| async move {
+                        let assistant_message_id = assistant_message.id;
+                        let stream_completion = async {
+                            let mut messages = stream.await?;
+
+                            while let Some(message) = messages.next().await {
+                                let mut message = message?;
+                                if let Some(choice) = message.choices.pop() {
+                                    this.upgrade(&cx)
+                                        .ok_or_else(|| anyhow!("assistant was dropped"))?
+                                        .update(&mut cx, |this, cx| {
+                                            let text: Arc<str> = choice.delta.content?.into();
+                                            let message_ix = this.message_anchors.iter().position(
+                                                |message| message.id == assistant_message_id,
+                                            )?;
+                                            this.buffer.update(cx, |buffer, cx| {
+                                                let offset = this.message_anchors[message_ix + 1..]
+                                                    .iter()
+                                                    .find(|message| message.start.is_valid(buffer))
+                                                    .map_or(buffer.len(), |message| {
+                                                        message
+                                                            .start
+                                                            .to_offset(buffer)
+                                                            .saturating_sub(1)
+                                                    });
+                                                buffer.edit([(offset..offset, text)], None, cx);
+                                            });
+                                            cx.emit(AssistantEvent::StreamedCompletion);
+
+                                            Some(())
+                                        });
+                                }
+                                smol::future::yield_now().await;
+                            }
 
-        let api_key = self.api_key.borrow().clone()?;
-        let stream = stream_completion(api_key, cx.background().clone(), request);
-        let assistant_message =
-            self.insert_message_after(self.messages.last()?.id, Role::Assistant, cx)?;
-        let user_message = self.insert_message_after(assistant_message.id, Role::User, cx)?;
-        let task = cx.spawn_weak({
-            |this, mut cx| async move {
-                let assistant_message_id = assistant_message.id;
-                let stream_completion = async {
-                    let mut messages = stream.await?;
-
-                    while let Some(message) = messages.next().await {
-                        let mut message = message?;
-                        if let Some(choice) = message.choices.pop() {
                             this.upgrade(&cx)
                                 .ok_or_else(|| anyhow!("assistant was dropped"))?
                                 .update(&mut cx, |this, cx| {
-                                    let text: Arc<str> = choice.delta.content?.into();
-                                    let message_ix = this
-                                        .messages
-                                        .iter()
-                                        .position(|message| message.id == assistant_message_id)?;
-                                    this.buffer.update(cx, |buffer, cx| {
-                                        let offset = if message_ix + 1 == this.messages.len() {
-                                            buffer.len()
-                                        } else {
-                                            this.messages[message_ix + 1]
-                                                .start
-                                                .to_offset(buffer)
-                                                .saturating_sub(1)
-                                        };
-                                        buffer.edit([(offset..offset, text)], None, cx);
+                                    this.pending_completions.retain(|completion| {
+                                        completion.id != this.completion_count
                                     });
-                                    cx.emit(AssistantEvent::StreamedCompletion);
-
-                                    Some(())
+                                    this.summarize(cx);
                                 });
-                        }
-                    }
 
-                    this.upgrade(&cx)
-                        .ok_or_else(|| anyhow!("assistant was dropped"))?
-                        .update(&mut cx, |this, cx| {
-                            this.pending_completions
-                                .retain(|completion| completion.id != this.completion_count);
-                            this.summarize(cx);
-                        });
-
-                    anyhow::Ok(())
-                };
-
-                let result = stream_completion.await;
-                if let Some(this) = this.upgrade(&cx) {
-                    this.update(&mut cx, |this, cx| {
-                        if let Err(error) = result {
-                            if let Some(metadata) =
-                                this.messages_metadata.get_mut(&assistant_message.id)
-                            {
-                                metadata.error = Some(error.to_string().trim().into());
-                                cx.notify();
-                            }
+                            anyhow::Ok(())
+                        };
+
+                        let result = stream_completion.await;
+                        if let Some(this) = this.upgrade(&cx) {
+                            this.update(&mut cx, |this, cx| {
+                                if let Some(metadata) =
+                                    this.messages_metadata.get_mut(&assistant_message.id)
+                                {
+                                    match result {
+                                        Ok(_) => {
+                                            metadata.status = MessageStatus::Done;
+                                        }
+                                        Err(error) => {
+                                            metadata.status = MessageStatus::Error(
+                                                error.to_string().trim().into(),
+                                            );
+                                        }
+                                    }
+                                    cx.notify();
+                                }
+                            });
                         }
-                    });
-                }
+                    }
+                }));
             }
-        });
+        }
 
-        self.pending_completions.push(PendingCompletion {
-            id: post_inc(&mut self.completion_count),
-            _task: task,
-        });
-        Some((assistant_message, user_message))
+        if !tasks.is_empty() {
+            self.pending_completions.push(PendingCompletion {
+                id: post_inc(&mut self.completion_count),
+                _tasks: tasks,
+            });
+        }
+
+        user_messages
     }
 
     fn cancel_last_assist(&mut self) -> bool {
         self.pending_completions.pop().is_some()
     }
 
-    fn cycle_message_role(&mut self, id: MessageId, cx: &mut ModelContext<Self>) {
-        if let Some(metadata) = self.messages_metadata.get_mut(&id) {
-            metadata.role.cycle();
-            cx.emit(AssistantEvent::MessagesEdited);
-            cx.notify();
+    fn cycle_message_roles(&mut self, ids: HashSet<MessageId>, cx: &mut ModelContext<Self>) {
+        for id in ids {
+            if let Some(metadata) = self.messages_metadata.get_mut(&id) {
+                metadata.role.cycle();
+                cx.emit(AssistantEvent::MessagesEdited);
+                cx.notify();
+            }
         }
     }
 
@@ -676,32 +759,34 @@ impl Assistant {
         &mut self,
         message_id: MessageId,
         role: Role,
+        status: MessageStatus,
         cx: &mut ModelContext<Self>,
-    ) -> Option<Message> {
+    ) -> Option<MessageAnchor> {
         if let Some(prev_message_ix) = self
-            .messages
+            .message_anchors
             .iter()
             .position(|message| message.id == message_id)
         {
             let start = self.buffer.update(cx, |buffer, cx| {
-                let offset = self.messages[prev_message_ix + 1..]
+                let offset = self.message_anchors[prev_message_ix + 1..]
                     .iter()
                     .find(|message| message.start.is_valid(buffer))
                     .map_or(buffer.len(), |message| message.start.to_offset(buffer) - 1);
                 buffer.edit([(offset..offset, "\n")], None, cx);
                 buffer.anchor_before(offset + 1)
             });
-            let message = Message {
+            let message = MessageAnchor {
                 id: MessageId(post_inc(&mut self.next_message_id.0)),
                 start,
             };
-            self.messages.insert(prev_message_ix + 1, message.clone());
+            self.message_anchors
+                .insert(prev_message_ix + 1, message.clone());
             self.messages_metadata.insert(
                 message.id,
                 MessageMetadata {
                     role,
                     sent_at: Local::now(),
-                    error: None,
+                    status,
                 },
             );
             cx.emit(AssistantEvent::MessagesEdited);
@@ -711,20 +796,129 @@ impl Assistant {
         }
     }
 
+    fn split_message(
+        &mut self,
+        range: Range<usize>,
+        cx: &mut ModelContext<Self>,
+    ) -> (Option<MessageAnchor>, Option<MessageAnchor>) {
+        let start_message = self.message_for_offset(range.start, cx);
+        let end_message = self.message_for_offset(range.end, cx);
+        if let Some((start_message, end_message)) = start_message.zip(end_message) {
+            // Prevent splitting when range spans multiple messages.
+            if start_message.index != end_message.index {
+                return (None, None);
+            }
+
+            let message = start_message;
+            let role = message.role;
+            let mut edited_buffer = false;
+
+            let mut suffix_start = None;
+            if range.start > message.range.start && range.end < message.range.end - 1 {
+                if self.buffer.read(cx).chars_at(range.end).next() == Some('\n') {
+                    suffix_start = Some(range.end + 1);
+                } else if self.buffer.read(cx).reversed_chars_at(range.end).next() == Some('\n') {
+                    suffix_start = Some(range.end);
+                }
+            }
+
+            let suffix = if let Some(suffix_start) = suffix_start {
+                MessageAnchor {
+                    id: MessageId(post_inc(&mut self.next_message_id.0)),
+                    start: self.buffer.read(cx).anchor_before(suffix_start),
+                }
+            } else {
+                self.buffer.update(cx, |buffer, cx| {
+                    buffer.edit([(range.end..range.end, "\n")], None, cx);
+                });
+                edited_buffer = true;
+                MessageAnchor {
+                    id: MessageId(post_inc(&mut self.next_message_id.0)),
+                    start: self.buffer.read(cx).anchor_before(range.end + 1),
+                }
+            };
+
+            self.message_anchors
+                .insert(message.index + 1, suffix.clone());
+            self.messages_metadata.insert(
+                suffix.id,
+                MessageMetadata {
+                    role,
+                    sent_at: Local::now(),
+                    status: MessageStatus::Done,
+                },
+            );
+
+            let new_messages = if range.start == range.end || range.start == message.range.start {
+                (None, Some(suffix))
+            } else {
+                let mut prefix_end = None;
+                if range.start > message.range.start && range.end < message.range.end - 1 {
+                    if self.buffer.read(cx).chars_at(range.start).next() == Some('\n') {
+                        prefix_end = Some(range.start + 1);
+                    } else if self.buffer.read(cx).reversed_chars_at(range.start).next()
+                        == Some('\n')
+                    {
+                        prefix_end = Some(range.start);
+                    }
+                }
+
+                let selection = if let Some(prefix_end) = prefix_end {
+                    cx.emit(AssistantEvent::MessagesEdited);
+                    MessageAnchor {
+                        id: MessageId(post_inc(&mut self.next_message_id.0)),
+                        start: self.buffer.read(cx).anchor_before(prefix_end),
+                    }
+                } else {
+                    self.buffer.update(cx, |buffer, cx| {
+                        buffer.edit([(range.start..range.start, "\n")], None, cx)
+                    });
+                    edited_buffer = true;
+                    MessageAnchor {
+                        id: MessageId(post_inc(&mut self.next_message_id.0)),
+                        start: self.buffer.read(cx).anchor_before(range.end + 1),
+                    }
+                };
+
+                self.message_anchors
+                    .insert(message.index + 1, selection.clone());
+                self.messages_metadata.insert(
+                    selection.id,
+                    MessageMetadata {
+                        role,
+                        sent_at: Local::now(),
+                        status: MessageStatus::Done,
+                    },
+                );
+                (Some(selection), Some(suffix))
+            };
+
+            if !edited_buffer {
+                cx.emit(AssistantEvent::MessagesEdited);
+            }
+            new_messages
+        } else {
+            (None, None)
+        }
+    }
+
     fn summarize(&mut self, cx: &mut ModelContext<Self>) {
-        if self.messages.len() >= 2 && self.summary.is_none() {
+        if self.message_anchors.len() >= 2 && self.summary.is_none() {
             let api_key = self.api_key.borrow().clone();
             if let Some(api_key) = api_key {
-                let mut messages = self.open_ai_request_messages(cx);
-                messages.truncate(2);
-                messages.push(RequestMessage {
-                    role: Role::User,
-                    content: "Summarize the conversation into a short title without punctuation"
-                        .into(),
-                });
+                let messages = self
+                    .messages(cx)
+                    .take(2)
+                    .map(|message| message.to_open_ai_message(self.buffer.read(cx)))
+                    .chain(Some(RequestMessage {
+                        role: Role::User,
+                        content:
+                            "Summarize the conversation into a short title without punctuation"
+                                .into(),
+                    }));
                 let request = OpenAIRequest {
                     model: self.model.clone(),
-                    messages,
+                    messages: messages.collect(),
                     stream: true,
                 };
 
@@ -752,49 +946,69 @@ impl Assistant {
         }
     }
 
-    fn open_ai_request_messages(&self, cx: &AppContext) -> Vec<RequestMessage> {
-        let buffer = self.buffer.read(cx);
-        self.messages(cx)
-            .map(|(_message, metadata, range)| RequestMessage {
-                role: metadata.role,
-                content: buffer.text_for_range(range).collect(),
-            })
-            .collect()
+    fn message_for_offset(&self, offset: usize, cx: &AppContext) -> Option<Message> {
+        self.messages_for_offsets([offset], cx).pop()
     }
 
-    fn message_id_for_offset(&self, offset: usize, cx: &AppContext) -> Option<MessageId> {
-        Some(
-            self.messages(cx)
-                .find(|(_, _, range)| range.contains(&offset))
-                .map(|(message, _, _)| message)
-                .or(self.messages.last())?
-                .id,
-        )
+    fn messages_for_offsets(
+        &self,
+        offsets: impl IntoIterator<Item = usize>,
+        cx: &AppContext,
+    ) -> Vec<Message> {
+        let mut result = Vec::new();
+
+        let buffer_len = self.buffer.read(cx).len();
+        let mut messages = self.messages(cx).peekable();
+        let mut offsets = offsets.into_iter().peekable();
+        while let Some(offset) = offsets.next() {
+            // Skip messages that start after the offset.
+            while messages.peek().map_or(false, |message| {
+                message.range.end < offset || (message.range.end == offset && offset < buffer_len)
+            }) {
+                messages.next();
+            }
+            let Some(message) = messages.peek() else { continue };
+
+            // Skip offsets that are in the same message.
+            while offsets.peek().map_or(false, |offset| {
+                message.range.contains(offset) || message.range.end == buffer_len
+            }) {
+                offsets.next();
+            }
+
+            result.push(message.clone());
+        }
+        result
     }
 
-    fn messages<'a>(
-        &'a self,
-        cx: &'a AppContext,
-    ) -> impl 'a + Iterator<Item = (&Message, &MessageMetadata, Range<usize>)> {
+    fn messages<'a>(&'a self, cx: &'a AppContext) -> impl 'a + Iterator<Item = Message> {
         let buffer = self.buffer.read(cx);
-        let mut messages = self.messages.iter().peekable();
+        let mut message_anchors = self.message_anchors.iter().enumerate().peekable();
         iter::from_fn(move || {
-            while let Some(message) = messages.next() {
-                let metadata = self.messages_metadata.get(&message.id)?;
-                let message_start = message.start.to_offset(buffer);
+            while let Some((ix, message_anchor)) = message_anchors.next() {
+                let metadata = self.messages_metadata.get(&message_anchor.id)?;
+                let message_start = message_anchor.start.to_offset(buffer);
                 let mut message_end = None;
-                while let Some(next_message) = messages.peek() {
+                while let Some((_, next_message)) = message_anchors.peek() {
                     if next_message.start.is_valid(buffer) {
                         message_end = Some(next_message.start);
                         break;
                     } else {
-                        messages.next();
+                        message_anchors.next();
                     }
                 }
                 let message_end = message_end
                     .unwrap_or(language::Anchor::MAX)
                     .to_offset(buffer);
-                return Some((message, metadata, message_start..message_end));
+                return Some(Message {
+                    index: ix,
+                    range: message_start..message_end,
+                    id: message_anchor.id,
+                    anchor: message_anchor.start,
+                    role: metadata.role,
+                    sent_at: metadata.sent_at,
+                    status: metadata.status.clone(),
+                });
             }
             None
         })
@@ -803,7 +1017,7 @@ impl Assistant {
 
 struct PendingCompletion {
     id: usize,
-    _task: Task<()>,
+    _tasks: Vec<Task<()>>,
 }
 
 enum AssistantEditorEvent {
@@ -856,34 +1070,31 @@ impl AssistantEditor {
     }
 
     fn assist(&mut self, _: &Assist, cx: &mut ViewContext<Self>) {
-        let user_message = self.assistant.update(cx, |assistant, cx| {
-            let editor = self.editor.read(cx);
-            let newest_selection = editor
-                .selections
-                .newest_anchor()
-                .head()
-                .to_offset(&editor.buffer().read(cx).snapshot(cx));
-            let message_id = assistant.message_id_for_offset(newest_selection, cx)?;
-            let metadata = assistant.messages_metadata.get(&message_id)?;
-            let user_message = if metadata.role == Role::User {
-                let (_, user_message) = assistant.assist(cx)?;
-                user_message
-            } else {
-                let user_message = assistant.insert_message_after(message_id, Role::User, cx)?;
-                user_message
-            };
-            Some(user_message)
+        let cursors = self.cursors(cx);
+
+        let user_messages = self.assistant.update(cx, |assistant, cx| {
+            let selected_messages = assistant
+                .messages_for_offsets(cursors, cx)
+                .into_iter()
+                .map(|message| message.id)
+                .collect();
+            assistant.assist(selected_messages, cx)
         });
-
-        if let Some(user_message) = user_message {
-            let cursor = user_message
-                .start
-                .to_offset(&self.assistant.read(cx).buffer.read(cx));
+        let new_selections = user_messages
+            .iter()
+            .map(|message| {
+                let cursor = message
+                    .start
+                    .to_offset(self.assistant.read(cx).buffer.read(cx));
+                cursor..cursor
+            })
+            .collect::<Vec<_>>();
+        if !new_selections.is_empty() {
             self.editor.update(cx, |editor, cx| {
                 editor.change_selections(
                     Some(Autoscroll::Strategy(AutoscrollStrategy::Fit)),
                     cx,
-                    |selections| selections.select_ranges([cursor..cursor]),
+                    |selections| selections.select_ranges(new_selections),
                 );
             });
         }
@@ -898,6 +1109,26 @@ impl AssistantEditor {
         }
     }
 
+    fn cycle_message_role(&mut self, _: &CycleMessageRole, cx: &mut ViewContext<Self>) {
+        let cursors = self.cursors(cx);
+        self.assistant.update(cx, |assistant, cx| {
+            let messages = assistant
+                .messages_for_offsets(cursors, cx)
+                .into_iter()
+                .map(|message| message.id)
+                .collect();
+            assistant.cycle_message_roles(messages, cx)
+        });
+    }
+
+    fn cursors(&self, cx: &AppContext) -> Vec<usize> {
+        let selections = self.editor.read(cx).selections.all::<usize>(cx);
+        selections
+            .into_iter()
+            .map(|selection| selection.head())
+            .collect()
+    }
+
     fn handle_assistant_event(
         &mut self,
         _: ModelHandle<Assistant>,
@@ -982,14 +1213,14 @@ impl AssistantEditor {
                 .assistant
                 .read(cx)
                 .messages(cx)
-                .map(|(message, metadata, _)| BlockProperties {
-                    position: buffer.anchor_in_excerpt(excerpt_id, message.start),
+                .map(|message| BlockProperties {
+                    position: buffer.anchor_in_excerpt(excerpt_id, message.anchor),
                     height: 2,
                     style: BlockStyle::Sticky,
                     render: Arc::new({
                         let assistant = self.assistant.clone();
-                        let metadata = metadata.clone();
-                        let message = message.clone();
+                        // let metadata = message.metadata.clone();
+                        // let message = message.clone();
                         move |cx| {
                             enum Sender {}
                             enum ErrorTooltip {}
@@ -1000,21 +1231,21 @@ impl AssistantEditor {
                             let sender = MouseEventHandler::<Sender, _>::new(
                                 message_id.0,
                                 cx,
-                                |state, _| match metadata.role {
+                                |state, _| match message.role {
                                     Role::User => {
-                                        let style = style.user_sender.style_for(state, false);
+                                        let style = style.user_sender.style_for(state);
                                         Label::new("You", style.text.clone())
                                             .contained()
                                             .with_style(style.container)
                                     }
                                     Role::Assistant => {
-                                        let style = style.assistant_sender.style_for(state, false);
+                                        let style = style.assistant_sender.style_for(state);
                                         Label::new("Assistant", style.text.clone())
                                             .contained()
                                             .with_style(style.container)
                                     }
                                     Role::System => {
-                                        let style = style.system_sender.style_for(state, false);
+                                        let style = style.system_sender.style_for(state);
                                         Label::new("System", style.text.clone())
                                             .contained()
                                             .with_style(style.container)
@@ -1026,7 +1257,10 @@ impl AssistantEditor {
                                 let assistant = assistant.clone();
                                 move |_, _, cx| {
                                     assistant.update(cx, |assistant, cx| {
-                                        assistant.cycle_message_role(message_id, cx)
+                                        assistant.cycle_message_roles(
+                                            HashSet::from_iter(Some(message_id)),
+                                            cx,
+                                        )
                                     })
                                 }
                             });
@@ -1035,29 +1269,35 @@ impl AssistantEditor {
                                 .with_child(sender.aligned())
                                 .with_child(
                                     Label::new(
-                                        metadata.sent_at.format("%I:%M%P").to_string(),
+                                        message.sent_at.format("%I:%M%P").to_string(),
                                         style.sent_at.text.clone(),
                                     )
                                     .contained()
                                     .with_style(style.sent_at.container)
                                     .aligned(),
                                 )
-                                .with_children(metadata.error.clone().map(|error| {
-                                    Svg::new("icons/circle_x_mark_12.svg")
-                                        .with_color(style.error_icon.color)
-                                        .constrained()
-                                        .with_width(style.error_icon.width)
-                                        .contained()
-                                        .with_style(style.error_icon.container)
-                                        .with_tooltip::<ErrorTooltip>(
-                                            message_id.0,
-                                            error,
-                                            None,
-                                            theme.tooltip.clone(),
-                                            cx,
+                                .with_children(
+                                    if let MessageStatus::Error(error) = &message.status {
+                                        Some(
+                                            Svg::new("icons/circle_x_mark_12.svg")
+                                                .with_color(style.error_icon.color)
+                                                .constrained()
+                                                .with_width(style.error_icon.width)
+                                                .contained()
+                                                .with_style(style.error_icon.container)
+                                                .with_tooltip::<ErrorTooltip>(
+                                                    message_id.0,
+                                                    error.to_string(),
+                                                    None,
+                                                    theme.tooltip.clone(),
+                                                    cx,
+                                                )
+                                                .aligned(),
                                         )
-                                        .aligned()
-                                }))
+                                    } else {
+                                        None
+                                    },
+                                )
                                 .aligned()
                                 .left()
                                 .contained()
@@ -1147,15 +1387,15 @@ impl AssistantEditor {
             let selection = editor.selections.newest::<usize>(cx);
             let mut copied_text = String::new();
             let mut spanned_messages = 0;
-            for (_message, metadata, message_range) in assistant.messages(cx) {
-                if message_range.start >= selection.range().end {
+            for message in assistant.messages(cx) {
+                if message.range.start >= selection.range().end {
                     break;
-                } else if message_range.end >= selection.range().start {
-                    let range = cmp::max(message_range.start, selection.range().start)
-                        ..cmp::min(message_range.end, selection.range().end);
+                } else if message.range.end >= selection.range().start {
+                    let range = cmp::max(message.range.start, selection.range().start)
+                        ..cmp::min(message.range.end, selection.range().end);
                     if !range.is_empty() {
                         spanned_messages += 1;
-                        write!(&mut copied_text, "## {}\n\n", metadata.role).unwrap();
+                        write!(&mut copied_text, "## {}\n\n", message.role).unwrap();
                         for chunk in assistant.buffer.read(cx).text_for_range(range) {
                             copied_text.push_str(&chunk);
                         }
@@ -1174,11 +1414,24 @@ impl AssistantEditor {
         cx.propagate_action();
     }
 
+    fn split(&mut self, _: &Split, cx: &mut ViewContext<Self>) {
+        self.assistant.update(cx, |assistant, cx| {
+            let selections = self.editor.read(cx).selections.disjoint_anchors();
+            for selection in selections.into_iter() {
+                let buffer = self.editor.read(cx).buffer().read(cx).snapshot(cx);
+                let range = selection
+                    .map(|endpoint| endpoint.to_offset(&buffer))
+                    .range();
+                assistant.split_message(range, cx);
+            }
+        });
+    }
+
     fn cycle_model(&mut self, cx: &mut ViewContext<Self>) {
         self.assistant.update(cx, |assistant, cx| {
             let new_model = match assistant.model.as_str() {
-                "gpt-4" => "gpt-3.5-turbo",
-                _ => "gpt-4",
+                "gpt-4-0613" => "gpt-3.5-turbo-0613",
+                _ => "gpt-4-0613",
             };
             assistant.set_model(new_model.into(), cx);
         });
@@ -1231,7 +1484,7 @@ impl View for AssistantEditor {
                 Flex::row()
                     .with_child(
                         MouseEventHandler::<Model, _>::new(0, cx, |state, _| {
-                            let style = theme.model.style_for(state, false);
+                            let style = theme.model.style_for(state);
                             Label::new(model, style.text.clone())
                                 .contained()
                                 .with_style(style.container)
@@ -1283,7 +1536,7 @@ impl Item for AssistantEditor {
 struct MessageId(usize);
 
 #[derive(Clone, Debug)]
-struct Message {
+struct MessageAnchor {
     id: MessageId,
     start: language::Anchor,
 }
@@ -1292,7 +1545,36 @@ struct Message {
 struct MessageMetadata {
     role: Role,
     sent_at: DateTime<Local>,
-    error: Option<String>,
+    status: MessageStatus,
+}
+
+#[derive(Clone, Debug)]
+enum MessageStatus {
+    Pending,
+    Done,
+    Error(Arc<str>),
+}
+
+#[derive(Clone, Debug)]
+pub struct Message {
+    range: Range<usize>,
+    index: usize,
+    id: MessageId,
+    anchor: language::Anchor,
+    role: Role,
+    sent_at: DateTime<Local>,
+    status: MessageStatus,
+}
+
+impl Message {
+    fn to_open_ai_message(&self, buffer: &Buffer) -> RequestMessage {
+        let mut content = format!("[Message {}]\n", self.id.0).to_string();
+        content.extend(buffer.text_for_range(self.range.clone()));
+        RequestMessage {
+            role: self.role,
+            content,
+        }
+    }
 }
 
 async fn stream_completion(
@@ -1392,7 +1674,7 @@ mod tests {
         let assistant = cx.add_model(|cx| Assistant::new(Default::default(), registry, cx));
         let buffer = assistant.read(cx).buffer.clone();
 
-        let message_1 = assistant.read(cx).messages[0].clone();
+        let message_1 = assistant.read(cx).message_anchors[0].clone();
         assert_eq!(
             messages(&assistant, cx),
             vec![(message_1.id, Role::User, 0..0)]
@@ -1400,7 +1682,7 @@ mod tests {
 
         let message_2 = assistant.update(cx, |assistant, cx| {
             assistant
-                .insert_message_after(message_1.id, Role::Assistant, cx)
+                .insert_message_after(message_1.id, Role::Assistant, MessageStatus::Done, cx)
                 .unwrap()
         });
         assert_eq!(
@@ -1424,7 +1706,7 @@ mod tests {
 
         let message_3 = assistant.update(cx, |assistant, cx| {
             assistant
-                .insert_message_after(message_2.id, Role::User, cx)
+                .insert_message_after(message_2.id, Role::User, MessageStatus::Done, cx)
                 .unwrap()
         });
         assert_eq!(
@@ -1438,7 +1720,7 @@ mod tests {
 
         let message_4 = assistant.update(cx, |assistant, cx| {
             assistant
-                .insert_message_after(message_2.id, Role::User, cx)
+                .insert_message_after(message_2.id, Role::User, MessageStatus::Done, cx)
                 .unwrap()
         });
         assert_eq!(
@@ -1499,7 +1781,7 @@ mod tests {
         // Ensure we can still insert after a merged message.
         let message_5 = assistant.update(cx, |assistant, cx| {
             assistant
-                .insert_message_after(message_1.id, Role::System, cx)
+                .insert_message_after(message_1.id, Role::System, MessageStatus::Done, cx)
                 .unwrap()
         });
         assert_eq!(
@@ -1512,6 +1794,159 @@ mod tests {
         );
     }
 
+    #[gpui::test]
+    fn test_message_splitting(cx: &mut AppContext) {
+        let registry = Arc::new(LanguageRegistry::test());
+        let assistant = cx.add_model(|cx| Assistant::new(Default::default(), registry, cx));
+        let buffer = assistant.read(cx).buffer.clone();
+
+        let message_1 = assistant.read(cx).message_anchors[0].clone();
+        assert_eq!(
+            messages(&assistant, cx),
+            vec![(message_1.id, Role::User, 0..0)]
+        );
+
+        buffer.update(cx, |buffer, cx| {
+            buffer.edit([(0..0, "aaa\nbbb\nccc\nddd\n")], None, cx)
+        });
+
+        let (_, message_2) =
+            assistant.update(cx, |assistant, cx| assistant.split_message(3..3, cx));
+        let message_2 = message_2.unwrap();
+
+        // We recycle newlines in the middle of a split message
+        assert_eq!(buffer.read(cx).text(), "aaa\nbbb\nccc\nddd\n");
+        assert_eq!(
+            messages(&assistant, cx),
+            vec![
+                (message_1.id, Role::User, 0..4),
+                (message_2.id, Role::User, 4..16),
+            ]
+        );
+
+        let (_, message_3) =
+            assistant.update(cx, |assistant, cx| assistant.split_message(3..3, cx));
+        let message_3 = message_3.unwrap();
+
+        // We don't recycle newlines at the end of a split message
+        assert_eq!(buffer.read(cx).text(), "aaa\n\nbbb\nccc\nddd\n");
+        assert_eq!(
+            messages(&assistant, cx),
+            vec![
+                (message_1.id, Role::User, 0..4),
+                (message_3.id, Role::User, 4..5),
+                (message_2.id, Role::User, 5..17),
+            ]
+        );
+
+        let (_, message_4) =
+            assistant.update(cx, |assistant, cx| assistant.split_message(9..9, cx));
+        let message_4 = message_4.unwrap();
+        assert_eq!(buffer.read(cx).text(), "aaa\n\nbbb\nccc\nddd\n");
+        assert_eq!(
+            messages(&assistant, cx),
+            vec![
+                (message_1.id, Role::User, 0..4),
+                (message_3.id, Role::User, 4..5),
+                (message_2.id, Role::User, 5..9),
+                (message_4.id, Role::User, 9..17),
+            ]
+        );
+
+        let (_, message_5) =
+            assistant.update(cx, |assistant, cx| assistant.split_message(9..9, cx));
+        let message_5 = message_5.unwrap();
+        assert_eq!(buffer.read(cx).text(), "aaa\n\nbbb\n\nccc\nddd\n");
+        assert_eq!(
+            messages(&assistant, cx),
+            vec![
+                (message_1.id, Role::User, 0..4),
+                (message_3.id, Role::User, 4..5),
+                (message_2.id, Role::User, 5..9),
+                (message_4.id, Role::User, 9..10),
+                (message_5.id, Role::User, 10..18),
+            ]
+        );
+
+        let (message_6, message_7) =
+            assistant.update(cx, |assistant, cx| assistant.split_message(14..16, cx));
+        let message_6 = message_6.unwrap();
+        let message_7 = message_7.unwrap();
+        assert_eq!(buffer.read(cx).text(), "aaa\n\nbbb\n\nccc\ndd\nd\n");
+        assert_eq!(
+            messages(&assistant, cx),
+            vec![
+                (message_1.id, Role::User, 0..4),
+                (message_3.id, Role::User, 4..5),
+                (message_2.id, Role::User, 5..9),
+                (message_4.id, Role::User, 9..10),
+                (message_5.id, Role::User, 10..14),
+                (message_6.id, Role::User, 14..17),
+                (message_7.id, Role::User, 17..19),
+            ]
+        );
+    }
+
+    #[gpui::test]
+    fn test_messages_for_offsets(cx: &mut AppContext) {
+        let registry = Arc::new(LanguageRegistry::test());
+        let assistant = cx.add_model(|cx| Assistant::new(Default::default(), registry, cx));
+        let buffer = assistant.read(cx).buffer.clone();
+
+        let message_1 = assistant.read(cx).message_anchors[0].clone();
+        assert_eq!(
+            messages(&assistant, cx),
+            vec![(message_1.id, Role::User, 0..0)]
+        );
+
+        buffer.update(cx, |buffer, cx| buffer.edit([(0..0, "aaa")], None, cx));
+        let message_2 = assistant
+            .update(cx, |assistant, cx| {
+                assistant.insert_message_after(message_1.id, Role::User, MessageStatus::Done, cx)
+            })
+            .unwrap();
+        buffer.update(cx, |buffer, cx| buffer.edit([(4..4, "bbb")], None, cx));
+
+        let message_3 = assistant
+            .update(cx, |assistant, cx| {
+                assistant.insert_message_after(message_2.id, Role::User, MessageStatus::Done, cx)
+            })
+            .unwrap();
+        buffer.update(cx, |buffer, cx| buffer.edit([(8..8, "ccc")], None, cx));
+
+        assert_eq!(buffer.read(cx).text(), "aaa\nbbb\nccc");
+        assert_eq!(
+            messages(&assistant, cx),
+            vec![
+                (message_1.id, Role::User, 0..4),
+                (message_2.id, Role::User, 4..8),
+                (message_3.id, Role::User, 8..11)
+            ]
+        );
+
+        assert_eq!(
+            message_ids_for_offsets(&assistant, &[0, 4, 9], cx),
+            [message_1.id, message_2.id, message_3.id]
+        );
+        assert_eq!(
+            message_ids_for_offsets(&assistant, &[0, 1, 11], cx),
+            [message_1.id, message_3.id]
+        );
+
+        fn message_ids_for_offsets(
+            assistant: &ModelHandle<Assistant>,
+            offsets: &[usize],
+            cx: &AppContext,
+        ) -> Vec<MessageId> {
+            assistant
+                .read(cx)
+                .messages_for_offsets(offsets.iter().copied(), cx)
+                .into_iter()
+                .map(|message| message.id)
+                .collect()
+        }
+    }
+
     fn messages(
         assistant: &ModelHandle<Assistant>,
         cx: &AppContext,

crates/auto_update/src/update_notification.rs πŸ”—

@@ -49,7 +49,7 @@ impl View for UpdateNotification {
                         )
                         .with_child(
                             MouseEventHandler::<Cancel, _>::new(0, cx, |state, _| {
-                                let style = theme.dismiss_button.style_for(state, false);
+                                let style = theme.dismiss_button.style_for(state);
                                 Svg::new("icons/x_mark_8.svg")
                                     .with_color(style.color)
                                     .constrained()
@@ -74,7 +74,7 @@ impl View for UpdateNotification {
                         ),
                 )
                 .with_child({
-                    let style = theme.action_message.style_for(state, false);
+                    let style = theme.action_message.style_for(state);
                     Text::new("View the release notes", style.text.clone())
                         .contained()
                         .with_style(style.container)

crates/breadcrumbs/src/breadcrumbs.rs πŸ”—

@@ -83,7 +83,7 @@ impl View for Breadcrumbs {
         }
 
         MouseEventHandler::<Breadcrumbs, Breadcrumbs>::new(0, cx, |state, _| {
-            let style = style.style_for(state, false);
+            let style = style.style_for(state);
             crumbs.with_style(style.container)
         })
         .on_click(MouseButton::Left, |_, this, cx| {

crates/collab_ui/src/collab_titlebar_item.rs πŸ”—

@@ -344,8 +344,20 @@ impl CollabTitlebarItem {
                     .contained()
                     .with_style(titlebar.toggle_contacts_badge)
                     .contained()
-                    .with_margin_left(titlebar.toggle_contacts_button.default.icon_width)
-                    .with_margin_top(titlebar.toggle_contacts_button.default.icon_width)
+                    .with_margin_left(
+                        titlebar
+                            .toggle_contacts_button
+                            .inactive_state()
+                            .default
+                            .icon_width,
+                    )
+                    .with_margin_top(
+                        titlebar
+                            .toggle_contacts_button
+                            .inactive_state()
+                            .default
+                            .icon_width,
+                    )
                     .aligned(),
             )
         };
@@ -355,7 +367,8 @@ impl CollabTitlebarItem {
                 MouseEventHandler::<ToggleContactsMenu, Self>::new(0, cx, |state, _| {
                     let style = titlebar
                         .toggle_contacts_button
-                        .style_for(state, self.contacts_popover.is_some());
+                        .in_state(self.contacts_popover.is_some())
+                        .style_for(state);
                     Svg::new("icons/user_plus_16.svg")
                         .with_color(style.color)
                         .constrained()
@@ -402,7 +415,7 @@ impl CollabTitlebarItem {
 
         let titlebar = &theme.workspace.titlebar;
         MouseEventHandler::<ToggleScreenSharing, Self>::new(0, cx, |state, _| {
-            let style = titlebar.call_control.style_for(state, false);
+            let style = titlebar.call_control.style_for(state);
             Svg::new(icon)
                 .with_color(style.color)
                 .constrained()
@@ -456,7 +469,7 @@ impl CollabTitlebarItem {
                 .with_child(
                     MouseEventHandler::<ShareUnshare, Self>::new(0, cx, |state, _| {
                         //TODO: Ensure this button has consistent width for both text variations
-                        let style = titlebar.share_button.style_for(state, false);
+                        let style = titlebar.share_button.inactive_state().style_for(state);
                         Label::new(label, style.text.clone())
                             .contained()
                             .with_style(style.container)
@@ -496,7 +509,7 @@ impl CollabTitlebarItem {
         Stack::new()
             .with_child(
                 MouseEventHandler::<ToggleUserMenu, Self>::new(0, cx, |state, _| {
-                    let style = titlebar.call_control.style_for(state, active);
+                    let style = titlebar.call_control.style_for(state);
 
                     let img = if let Some(avatar_img) = avatar {
                         Self::render_face(avatar_img, *avatar_style, Color::transparent_black())
@@ -542,7 +555,7 @@ impl CollabTitlebarItem {
     fn render_sign_in_button(&self, theme: &Theme, cx: &mut ViewContext<Self>) -> AnyElement<Self> {
         let titlebar = &theme.workspace.titlebar;
         MouseEventHandler::<SignIn, Self>::new(0, cx, |state, _| {
-            let style = titlebar.sign_in_prompt.style_for(state, false);
+            let style = titlebar.sign_in_prompt.inactive_state().style_for(state);
             Label::new("Sign In", style.text.clone())
                 .contained()
                 .with_style(style.container)

crates/collab_ui/src/contact_finder.rs πŸ”—

@@ -117,7 +117,8 @@ impl PickerDelegate for ContactFinderDelegate {
             .contact_finder
             .picker
             .item
-            .style_for(mouse_state, selected);
+            .in_state(selected)
+            .style_for(mouse_state);
         Flex::row()
             .with_children(user.avatar.clone().map(|avatar| {
                 Image::from_data(avatar)

crates/collab_ui/src/contact_list.rs πŸ”—

@@ -774,7 +774,8 @@ impl ContactList {
             .with_style(
                 *theme
                     .contact_row
-                    .style_for(&mut Default::default(), is_selected),
+                    .in_state(is_selected)
+                    .style_for(&mut Default::default()),
             )
             .into_any()
     }
@@ -797,7 +798,7 @@ impl ContactList {
             .width
             .or(theme.contact_avatar.height)
             .unwrap_or(0.);
-        let row = &theme.project_row.default;
+        let row = &theme.project_row.inactive_state().default;
         let tree_branch = theme.tree_branch;
         let line_height = row.name.text.line_height(font_cache);
         let cap_height = row.name.text.cap_height(font_cache);
@@ -810,8 +811,11 @@ impl ContactList {
         };
 
         MouseEventHandler::<JoinProject, Self>::new(project_id as usize, cx, |mouse_state, _| {
-            let tree_branch = *tree_branch.style_for(mouse_state, is_selected);
-            let row = theme.project_row.style_for(mouse_state, is_selected);
+            let tree_branch = *tree_branch.in_state(is_selected).style_for(mouse_state);
+            let row = theme
+                .project_row
+                .in_state(is_selected)
+                .style_for(mouse_state);
 
             Flex::row()
                 .with_child(
@@ -893,7 +897,7 @@ impl ContactList {
             .width
             .or(theme.contact_avatar.height)
             .unwrap_or(0.);
-        let row = &theme.project_row.default;
+        let row = &theme.project_row.inactive_state().default;
         let tree_branch = theme.tree_branch;
         let line_height = row.name.text.line_height(font_cache);
         let cap_height = row.name.text.cap_height(font_cache);
@@ -904,8 +908,11 @@ impl ContactList {
             peer_id.as_u64() as usize,
             cx,
             |mouse_state, _| {
-                let tree_branch = *tree_branch.style_for(mouse_state, is_selected);
-                let row = theme.project_row.style_for(mouse_state, is_selected);
+                let tree_branch = *tree_branch.in_state(is_selected).style_for(mouse_state);
+                let row = theme
+                    .project_row
+                    .in_state(is_selected)
+                    .style_for(mouse_state);
 
                 Flex::row()
                     .with_child(
@@ -989,7 +996,8 @@ impl ContactList {
 
         let header_style = theme
             .header_row
-            .style_for(&mut Default::default(), is_selected);
+            .in_state(is_selected)
+            .style_for(&mut Default::default());
         let text = match section {
             Section::ActiveCall => "Collaborators",
             Section::Requests => "Contact Requests",
@@ -999,7 +1007,7 @@ impl ContactList {
         let leave_call = if section == Section::ActiveCall {
             Some(
                 MouseEventHandler::<LeaveCallContactList, Self>::new(0, cx, |state, _| {
-                    let style = theme.leave_call.style_for(state, false);
+                    let style = theme.leave_call.style_for(state);
                     Label::new("Leave Call", style.text.clone())
                         .contained()
                         .with_style(style.container)
@@ -1110,8 +1118,7 @@ impl ContactList {
                             contact.user.id as usize,
                             cx,
                             |mouse_state, _| {
-                                let button_style =
-                                    theme.contact_button.style_for(mouse_state, false);
+                                let button_style = theme.contact_button.style_for(mouse_state);
                                 render_icon_button(button_style, "icons/x_mark_8.svg")
                                     .aligned()
                                     .flex_float()
@@ -1146,7 +1153,8 @@ impl ContactList {
                     .with_style(
                         *theme
                             .contact_row
-                            .style_for(&mut Default::default(), is_selected),
+                            .in_state(is_selected)
+                            .style_for(&mut Default::default()),
                     )
             })
             .on_click(MouseButton::Left, move |_, this, cx| {
@@ -1204,7 +1212,7 @@ impl ContactList {
                     let button_style = if is_contact_request_pending {
                         &theme.disabled_button
                     } else {
-                        theme.contact_button.style_for(mouse_state, false)
+                        theme.contact_button.style_for(mouse_state)
                     };
                     render_icon_button(button_style, "icons/x_mark_8.svg").aligned()
                 })
@@ -1227,7 +1235,7 @@ impl ContactList {
                     let button_style = if is_contact_request_pending {
                         &theme.disabled_button
                     } else {
-                        theme.contact_button.style_for(mouse_state, false)
+                        theme.contact_button.style_for(mouse_state)
                     };
                     render_icon_button(button_style, "icons/check_8.svg")
                         .aligned()
@@ -1250,7 +1258,7 @@ impl ContactList {
                     let button_style = if is_contact_request_pending {
                         &theme.disabled_button
                     } else {
-                        theme.contact_button.style_for(mouse_state, false)
+                        theme.contact_button.style_for(mouse_state)
                     };
                     render_icon_button(button_style, "icons/x_mark_8.svg")
                         .aligned()
@@ -1277,7 +1285,8 @@ impl ContactList {
             .with_style(
                 *theme
                     .contact_row
-                    .style_for(&mut Default::default(), is_selected),
+                    .in_state(is_selected)
+                    .style_for(&mut Default::default()),
             )
             .into_any()
     }

crates/collab_ui/src/notifications.rs πŸ”—

@@ -53,7 +53,7 @@ where
                 )
                 .with_child(
                     MouseEventHandler::<Dismiss, V>::new(user.id as usize, cx, |state, _| {
-                        let style = theme.dismiss_button.style_for(state, false);
+                        let style = theme.dismiss_button.style_for(state);
                         Svg::new("icons/x_mark_8.svg")
                             .with_color(style.color)
                             .constrained()
@@ -93,7 +93,7 @@ where
                     .with_children(buttons.into_iter().enumerate().map(
                         |(ix, (message, handler))| {
                             MouseEventHandler::<Button, V>::new(ix, cx, |state, _| {
-                                let button = theme.button.style_for(state, false);
+                                let button = theme.button.style_for(state);
                                 Label::new(message, button.text.clone())
                                     .contained()
                                     .with_style(button.container)

crates/command_palette/src/command_palette.rs πŸ”—

@@ -185,8 +185,8 @@ impl PickerDelegate for CommandPaletteDelegate {
         let mat = &self.matches[ix];
         let command = &self.actions[mat.candidate_id];
         let theme = theme::current(cx);
-        let style = theme.picker.item.style_for(mouse_state, selected);
-        let key_style = &theme.command_palette.key.style_for(mouse_state, selected);
+        let style = theme.picker.item.in_state(selected).style_for(mouse_state);
+        let key_style = &theme.command_palette.key.in_state(selected);
         let keystroke_spacing = theme.command_palette.keystroke_spacing;
 
         Flex::row()

crates/context_menu/src/context_menu.rs πŸ”—

@@ -328,10 +328,8 @@ impl ContextMenu {
                 Flex::column().with_children(self.items.iter().enumerate().map(|(ix, item)| {
                     match item {
                         ContextMenuItem::Item { label, .. } => {
-                            let style = style.item.style_for(
-                                &mut Default::default(),
-                                Some(ix) == self.selected_index,
-                            );
+                            let style = style.item.in_state(self.selected_index == Some(ix));
+                            let style = style.style_for(&mut Default::default());
 
                             match label {
                                 ContextMenuItemLabel::String(label) => {
@@ -363,10 +361,8 @@ impl ContextMenu {
                     .with_children(self.items.iter().enumerate().map(|(ix, item)| {
                         match item {
                             ContextMenuItem::Item { action, .. } => {
-                                let style = style.item.style_for(
-                                    &mut Default::default(),
-                                    Some(ix) == self.selected_index,
-                                );
+                                let style = style.item.in_state(self.selected_index == Some(ix));
+                                let style = style.style_for(&mut Default::default());
 
                                 match action {
                                     ContextMenuItemAction::Action(action) => KeystrokeLabel::new(
@@ -412,8 +408,8 @@ impl ContextMenu {
                             let action = action.clone();
                             let view_id = self.parent_view_id;
                             MouseEventHandler::<MenuItem, ContextMenu>::new(ix, cx, |state, _| {
-                                let style =
-                                    style.item.style_for(state, Some(ix) == self.selected_index);
+                                let style = style.item.in_state(self.selected_index == Some(ix));
+                                let style = style.style_for(state);
                                 let keystroke = match &action {
                                     ContextMenuItemAction::Action(action) => Some(
                                         KeystrokeLabel::new(

crates/copilot/src/sign_in.rs πŸ”—

@@ -127,16 +127,16 @@ impl CopilotCodeVerification {
                 .with_child(
                     Label::new(
                         if copied { "Copied!" } else { "Copy" },
-                        device_code_style.cta.style_for(state, false).text.clone(),
+                        device_code_style.cta.style_for(state).text.clone(),
                     )
                     .aligned()
                     .contained()
-                    .with_style(*device_code_style.right_container.style_for(state, false))
+                    .with_style(*device_code_style.right_container.style_for(state))
                     .constrained()
                     .with_width(device_code_style.right),
                 )
                 .contained()
-                .with_style(device_code_style.cta.style_for(state, false).container)
+                .with_style(device_code_style.cta.style_for(state).container)
         })
         .on_click(gpui::platform::MouseButton::Left, {
             let user_code = data.user_code.clone();

crates/copilot_button/src/copilot_button.rs πŸ”—

@@ -71,7 +71,8 @@ impl View for CopilotButton {
                             .status_bar
                             .panel_buttons
                             .button
-                            .style_for(state, active);
+                            .in_state(active)
+                            .style_for(state);
 
                         Flex::row()
                             .with_child(
@@ -255,7 +256,7 @@ impl CopilotButton {
             move |state: &mut MouseState, style: &theme::ContextMenuItem| {
                 Flex::row()
                     .with_child(Label::new("Copilot Settings", style.label.clone()))
-                    .with_child(theme::ui::icon(icon_style.style_for(state, false)))
+                    .with_child(theme::ui::icon(icon_style.style_for(state)))
                     .align_children_center()
                     .into_any()
             },

crates/diagnostics/src/diagnostics.rs πŸ”—

@@ -1509,7 +1509,8 @@ mod tests {
             let snapshot = editor.snapshot(cx);
             snapshot
                 .blocks_in_range(0..snapshot.max_point().row())
-                .filter_map(|(row, block)| {
+                .enumerate()
+                .filter_map(|(ix, (row, block))| {
                     let name = match block {
                         TransformBlock::Custom(block) => block
                             .render(&mut BlockContext {
@@ -1520,6 +1521,7 @@ mod tests {
                                 gutter_width: 0.,
                                 line_height: 0.,
                                 em_width: 0.,
+                                block_id: ix,
                             })
                             .name()?
                             .to_string(),

crates/diagnostics/src/items.rs πŸ”—

@@ -100,7 +100,7 @@ impl View for DiagnosticIndicator {
                     .workspace
                     .status_bar
                     .diagnostic_summary
-                    .style_for(state, false);
+                    .style_for(state);
 
                 let mut summary_row = Flex::row();
                 if self.summary.error_count > 0 {
@@ -198,7 +198,7 @@ impl View for DiagnosticIndicator {
                 MouseEventHandler::<Message, _>::new(1, cx, |state, _| {
                     Label::new(
                         diagnostic.message.split('\n').next().unwrap().to_string(),
-                        message_style.style_for(state, false).text.clone(),
+                        message_style.style_for(state).text.clone(),
                     )
                     .aligned()
                     .contained()

crates/editor/src/display_map/block_map.rs πŸ”—

@@ -88,6 +88,7 @@ pub struct BlockContext<'a, 'b, 'c> {
     pub gutter_padding: f32,
     pub em_width: f32,
     pub line_height: f32,
+    pub block_id: usize,
 }
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq, PartialOrd, Ord)]
@@ -243,7 +244,7 @@ impl BlockMap {
             // Preserve any old transforms that precede this edit.
             let old_start = WrapRow(edit.old.start);
             let new_start = WrapRow(edit.new.start);
-            new_transforms.push_tree(cursor.slice(&old_start, Bias::Left, &()), &());
+            new_transforms.append(cursor.slice(&old_start, Bias::Left, &()), &());
             if let Some(transform) = cursor.item() {
                 if transform.is_isomorphic() && old_start == cursor.end(&()) {
                     new_transforms.push(transform.clone(), &());
@@ -425,7 +426,7 @@ impl BlockMap {
             push_isomorphic(&mut new_transforms, extent_after_edit);
         }
 
-        new_transforms.push_tree(cursor.suffix(&()), &());
+        new_transforms.append(cursor.suffix(&()), &());
         debug_assert_eq!(
             new_transforms.summary().input_rows,
             wrap_snapshot.max_point().row() + 1

crates/editor/src/display_map/fold_map.rs πŸ”—

@@ -115,10 +115,10 @@ impl<'a> FoldMapWriter<'a> {
             let mut new_tree = SumTree::new();
             let mut cursor = self.0.folds.cursor::<Fold>();
             for fold in folds {
-                new_tree.push_tree(cursor.slice(&fold, Bias::Right, &buffer), &buffer);
+                new_tree.append(cursor.slice(&fold, Bias::Right, &buffer), &buffer);
                 new_tree.push(fold, &buffer);
             }
-            new_tree.push_tree(cursor.suffix(&buffer), &buffer);
+            new_tree.append(cursor.suffix(&buffer), &buffer);
             new_tree
         };
 
@@ -165,10 +165,10 @@ impl<'a> FoldMapWriter<'a> {
             let mut cursor = self.0.folds.cursor::<usize>();
             let mut folds = SumTree::new();
             for fold_ix in fold_ixs_to_delete {
-                folds.push_tree(cursor.slice(&fold_ix, Bias::Right, &buffer), &buffer);
+                folds.append(cursor.slice(&fold_ix, Bias::Right, &buffer), &buffer);
                 cursor.next(&buffer);
             }
-            folds.push_tree(cursor.suffix(&buffer), &buffer);
+            folds.append(cursor.suffix(&buffer), &buffer);
             folds
         };
 
@@ -302,7 +302,7 @@ impl FoldMap {
             cursor.seek(&0, Bias::Right, &());
 
             while let Some(mut edit) = buffer_edits_iter.next() {
-                new_transforms.push_tree(cursor.slice(&edit.old.start, Bias::Left, &()), &());
+                new_transforms.append(cursor.slice(&edit.old.start, Bias::Left, &()), &());
                 edit.new.start -= edit.old.start - cursor.start();
                 edit.old.start = *cursor.start();
 
@@ -412,7 +412,7 @@ impl FoldMap {
                 }
             }
 
-            new_transforms.push_tree(cursor.suffix(&()), &());
+            new_transforms.append(cursor.suffix(&()), &());
             if new_transforms.is_empty() {
                 let text_summary = new_buffer.text_summary();
                 new_transforms.push(

crates/editor/src/display_map/wrap_map.rs πŸ”—

@@ -353,7 +353,7 @@ impl WrapSnapshot {
                         }
 
                         old_cursor.next(&());
-                        new_transforms.push_tree(
+                        new_transforms.append(
                             old_cursor.slice(&next_edit.old.start, Bias::Right, &()),
                             &(),
                         );
@@ -366,7 +366,7 @@ impl WrapSnapshot {
                         new_transforms.push_or_extend(Transform::isomorphic(summary));
                     }
                     old_cursor.next(&());
-                    new_transforms.push_tree(old_cursor.suffix(&()), &());
+                    new_transforms.append(old_cursor.suffix(&()), &());
                 }
             }
         }
@@ -500,7 +500,7 @@ impl WrapSnapshot {
                             new_transforms.push_or_extend(Transform::isomorphic(summary));
                         }
                         old_cursor.next(&());
-                        new_transforms.push_tree(
+                        new_transforms.append(
                             old_cursor.slice(
                                 &TabPoint::new(next_edit.old_rows.start, 0),
                                 Bias::Right,
@@ -517,7 +517,7 @@ impl WrapSnapshot {
                         new_transforms.push_or_extend(Transform::isomorphic(summary));
                     }
                     old_cursor.next(&());
-                    new_transforms.push_tree(old_cursor.suffix(&()), &());
+                    new_transforms.append(old_cursor.suffix(&()), &());
                 }
             }
         }

crates/editor/src/editor.rs πŸ”—

@@ -3320,15 +3320,21 @@ impl Editor {
     pub fn render_code_actions_indicator(
         &self,
         style: &EditorStyle,
-        active: bool,
+        is_active: bool,
         cx: &mut ViewContext<Self>,
     ) -> Option<AnyElement<Self>> {
         if self.available_code_actions.is_some() {
             enum CodeActions {}
             Some(
                 MouseEventHandler::<CodeActions, _>::new(0, cx, |state, _| {
-                    Svg::new("icons/bolt_8.svg")
-                        .with_color(style.code_actions.indicator.style_for(state, active).color)
+                    Svg::new("icons/bolt_8.svg").with_color(
+                        style
+                            .code_actions
+                            .indicator
+                            .in_state(is_active)
+                            .style_for(state)
+                            .color,
+                    )
                 })
                 .with_cursor_style(CursorStyle::PointingHand)
                 .with_padding(Padding::uniform(3.))
@@ -3378,10 +3384,8 @@ impl Editor {
                                     .with_color(
                                         style
                                             .indicator
-                                            .style_for(
-                                                mouse_state,
-                                                fold_status == FoldStatus::Folded,
-                                            )
+                                            .in_state(fold_status == FoldStatus::Folded)
+                                            .style_for(mouse_state)
                                             .color,
                                     )
                                     .constrained()
@@ -7949,6 +7953,7 @@ impl Deref for EditorStyle {
 
 pub fn diagnostic_block_renderer(diagnostic: Diagnostic, is_valid: bool) -> RenderBlock {
     let mut highlighted_lines = Vec::new();
+
     for (index, line) in diagnostic.message.lines().enumerate() {
         let line = match &diagnostic.source {
             Some(source) if index == 0 => {
@@ -7960,25 +7965,44 @@ pub fn diagnostic_block_renderer(diagnostic: Diagnostic, is_valid: bool) -> Rend
         };
         highlighted_lines.push(line);
     }
-
+    let message = diagnostic.message;
     Arc::new(move |cx: &mut BlockContext| {
+        let message = message.clone();
         let settings = settings::get::<ThemeSettings>(cx);
+        let tooltip_style = settings.theme.tooltip.clone();
         let theme = &settings.theme.editor;
         let style = diagnostic_style(diagnostic.severity, is_valid, theme);
         let font_size = (style.text_scale_factor * settings.buffer_font_size(cx)).round();
-        Flex::column()
-            .with_children(highlighted_lines.iter().map(|(line, highlights)| {
-                Label::new(
-                    line.clone(),
-                    style.message.clone().with_font_size(font_size),
-                )
-                .with_highlights(highlights.clone())
-                .contained()
-                .with_margin_left(cx.anchor_x)
-            }))
-            .aligned()
-            .left()
-            .into_any()
+        let anchor_x = cx.anchor_x;
+        enum BlockContextToolip {}
+        MouseEventHandler::<BlockContext, _>::new(cx.block_id, cx, |_, _| {
+            Flex::column()
+                .with_children(highlighted_lines.iter().map(|(line, highlights)| {
+                    Label::new(
+                        line.clone(),
+                        style.message.clone().with_font_size(font_size),
+                    )
+                    .with_highlights(highlights.clone())
+                    .contained()
+                    .with_margin_left(anchor_x)
+                }))
+                .aligned()
+                .left()
+                .into_any()
+        })
+        .with_cursor_style(CursorStyle::PointingHand)
+        .on_click(MouseButton::Left, move |_, _, cx| {
+            cx.write_to_clipboard(ClipboardItem::new(message.clone()));
+        })
+        // We really need to rethink this ID system...
+        .with_tooltip::<BlockContextToolip>(
+            cx.block_id,
+            "Copy diagnostic message".to_string(),
+            None,
+            tooltip_style,
+            cx,
+        )
+        .into_any()
     })
 }
 

crates/editor/src/element.rs πŸ”—

@@ -1467,6 +1467,7 @@ impl EditorElement {
         editor: &mut Editor,
         cx: &mut LayoutContext<Editor>,
     ) -> (f32, Vec<BlockLayout>) {
+        let mut block_id = 0;
         let scroll_x = snapshot.scroll_anchor.offset.x();
         let (fixed_blocks, non_fixed_blocks) = snapshot
             .blocks_in_range(rows.clone())
@@ -1474,7 +1475,7 @@ impl EditorElement {
                 TransformBlock::ExcerptHeader { .. } => false,
                 TransformBlock::Custom(block) => block.style() == BlockStyle::Fixed,
             });
-        let mut render_block = |block: &TransformBlock, width: f32| {
+        let mut render_block = |block: &TransformBlock, width: f32, block_id: usize| {
             let mut element = match block {
                 TransformBlock::Custom(block) => {
                     let align_to = block
@@ -1499,6 +1500,7 @@ impl EditorElement {
                         scroll_x,
                         gutter_width,
                         em_width,
+                        block_id,
                     })
                 }
                 TransformBlock::ExcerptHeader {
@@ -1527,7 +1529,7 @@ impl EditorElement {
 
                         enum JumpIcon {}
                         MouseEventHandler::<JumpIcon, _>::new((*id).into(), cx, |state, _| {
-                            let style = style.jump_icon.style_for(state, false);
+                            let style = style.jump_icon.style_for(state);
                             Svg::new("icons/arrow_up_right_8.svg")
                                 .with_color(style.color)
                                 .constrained()
@@ -1634,7 +1636,8 @@ impl EditorElement {
         let mut fixed_block_max_width = 0f32;
         let mut blocks = Vec::new();
         for (row, block) in fixed_blocks {
-            let element = render_block(block, f32::INFINITY);
+            let element = render_block(block, f32::INFINITY, block_id);
+            block_id += 1;
             fixed_block_max_width = fixed_block_max_width.max(element.size().x() + em_width);
             blocks.push(BlockLayout {
                 row,
@@ -1654,7 +1657,8 @@ impl EditorElement {
                     .max(gutter_width + scroll_width),
                 BlockStyle::Fixed => unreachable!(),
             };
-            let element = render_block(block, width);
+            let element = render_block(block, width, block_id);
+            block_id += 1;
             blocks.push(BlockLayout {
                 row,
                 element,
@@ -2090,7 +2094,7 @@ impl Element<Editor> for EditorElement {
                     .folds
                     .ellipses
                     .background
-                    .style_for(&mut cx.mouse_state::<FoldMarkers>(id as usize), false)
+                    .style_for(&mut cx.mouse_state::<FoldMarkers>(id as usize))
                     .color;
 
                 (id, fold, color)

crates/editor/src/multi_buffer.rs πŸ”—

@@ -1010,7 +1010,7 @@ impl MultiBuffer {
 
         let suffix = cursor.suffix(&());
         let changed_trailing_excerpt = suffix.is_empty();
-        new_excerpts.push_tree(suffix, &());
+        new_excerpts.append(suffix, &());
         drop(cursor);
         snapshot.excerpts = new_excerpts;
         snapshot.excerpt_ids = new_excerpt_ids;
@@ -1193,7 +1193,7 @@ impl MultiBuffer {
         while let Some(excerpt_id) = excerpt_ids.next() {
             // Seek to the next excerpt to remove, preserving any preceding excerpts.
             let locator = snapshot.excerpt_locator_for_id(excerpt_id);
-            new_excerpts.push_tree(cursor.slice(&Some(locator), Bias::Left, &()), &());
+            new_excerpts.append(cursor.slice(&Some(locator), Bias::Left, &()), &());
 
             if let Some(mut excerpt) = cursor.item() {
                 if excerpt.id != excerpt_id {
@@ -1245,7 +1245,7 @@ impl MultiBuffer {
         }
         let suffix = cursor.suffix(&());
         let changed_trailing_excerpt = suffix.is_empty();
-        new_excerpts.push_tree(suffix, &());
+        new_excerpts.append(suffix, &());
         drop(cursor);
         snapshot.excerpts = new_excerpts;
 
@@ -1509,7 +1509,7 @@ impl MultiBuffer {
         let mut cursor = snapshot.excerpts.cursor::<(Option<&Locator>, usize)>();
 
         for (locator, buffer, buffer_edited) in excerpts_to_edit {
-            new_excerpts.push_tree(cursor.slice(&Some(locator), Bias::Left, &()), &());
+            new_excerpts.append(cursor.slice(&Some(locator), Bias::Left, &()), &());
             let old_excerpt = cursor.item().unwrap();
             let buffer = buffer.read(cx);
             let buffer_id = buffer.remote_id();
@@ -1549,7 +1549,7 @@ impl MultiBuffer {
             new_excerpts.push(new_excerpt, &());
             cursor.next(&());
         }
-        new_excerpts.push_tree(cursor.suffix(&()), &());
+        new_excerpts.append(cursor.suffix(&()), &());
 
         drop(cursor);
         snapshot.excerpts = new_excerpts;

crates/feedback/src/deploy_feedback_button.rs πŸ”—

@@ -41,7 +41,8 @@ impl View for DeployFeedbackButton {
                         .status_bar
                         .panel_buttons
                         .button
-                        .style_for(state, active);
+                        .in_state(active)
+                        .style_for(state);
 
                     Svg::new("icons/feedback_16.svg")
                         .with_color(style.icon_color)

crates/feedback/src/submit_feedback_button.rs πŸ”—

@@ -48,7 +48,7 @@ impl View for SubmitFeedbackButton {
         let theme = theme::current(cx).clone();
         enum SubmitFeedbackButton {}
         MouseEventHandler::<SubmitFeedbackButton, Self>::new(0, cx, |state, _| {
-            let style = theme.feedback.submit_button.style_for(state, false);
+            let style = theme.feedback.submit_button.style_for(state);
             Label::new("Submit as Markdown", style.text.clone())
                 .contained()
                 .with_style(style.container)

crates/file_finder/src/file_finder.rs πŸ”—

@@ -546,7 +546,7 @@ impl PickerDelegate for FileFinderDelegate {
             .get(ix)
             .expect("Invalid matches state: no element for index {ix}");
         let theme = theme::current(cx);
-        let style = theme.picker.item.style_for(mouse_state, selected);
+        let style = theme.picker.item.in_state(selected).style_for(mouse_state);
         let (file_name, file_name_positions, full_path, full_path_positions) =
             self.labels_for_match(path_match, cx, ix);
         Flex::column()

crates/gpui/src/app.rs πŸ”—

@@ -445,7 +445,7 @@ type WindowBoundsCallback = Box<dyn FnMut(WindowBounds, Uuid, &mut WindowContext
 type KeystrokeCallback =
     Box<dyn FnMut(&Keystroke, &MatchResult, Option<&Box<dyn Action>>, &mut WindowContext) -> bool>;
 type ActiveLabeledTasksCallback = Box<dyn FnMut(&mut AppContext) -> bool>;
-type DeserializeActionCallback = fn(json: &str) -> anyhow::Result<Box<dyn Action>>;
+type DeserializeActionCallback = fn(json: serde_json::Value) -> anyhow::Result<Box<dyn Action>>;
 type WindowShouldCloseSubscriptionCallback = Box<dyn FnMut(&mut AppContext) -> bool>;
 
 pub struct AppContext {
@@ -624,14 +624,14 @@ impl AppContext {
     pub fn deserialize_action(
         &self,
         name: &str,
-        argument: Option<&str>,
+        argument: Option<serde_json::Value>,
     ) -> Result<Box<dyn Action>> {
         let callback = self
             .action_deserializers
             .get(name)
             .ok_or_else(|| anyhow!("unknown action {}", name))?
             .1;
-        callback(argument.unwrap_or("{}"))
+        callback(argument.unwrap_or_else(|| serde_json::Value::Object(Default::default())))
             .with_context(|| format!("invalid data for action {}", name))
     }
 
@@ -5573,7 +5573,7 @@ mod tests {
         let action1 = cx
             .deserialize_action(
                 "test::something::ComplexAction",
-                Some(r#"{"arg": "a", "count": 5}"#),
+                Some(serde_json::from_str(r#"{"arg": "a", "count": 5}"#).unwrap()),
             )
             .unwrap();
         let action2 = cx

crates/gpui/src/app/action.rs πŸ”—

@@ -11,7 +11,7 @@ pub trait Action: 'static {
     fn qualified_name() -> &'static str
     where
         Self: Sized;
-    fn from_json_str(json: &str) -> anyhow::Result<Box<dyn Action>>
+    fn from_json_str(json: serde_json::Value) -> anyhow::Result<Box<dyn Action>>
     where
         Self: Sized;
 }
@@ -38,7 +38,7 @@ macro_rules! actions {
             $crate::__impl_action! {
                 $namespace,
                 $name,
-                fn from_json_str(_: &str) -> $crate::anyhow::Result<Box<dyn $crate::Action>> {
+                fn from_json_str(_: $crate::serde_json::Value) -> $crate::anyhow::Result<Box<dyn $crate::Action>> {
                     Ok(Box::new(Self))
                 }
             }
@@ -58,8 +58,8 @@ macro_rules! impl_actions {
             $crate::__impl_action! {
                 $namespace,
                 $name,
-                fn from_json_str(json: &str) -> $crate::anyhow::Result<Box<dyn $crate::Action>> {
-                    Ok(Box::new($crate::serde_json::from_str::<Self>(json)?))
+                fn from_json_str(json: $crate::serde_json::Value) -> $crate::anyhow::Result<Box<dyn $crate::Action>> {
+                    Ok(Box::new($crate::serde_json::from_value::<Self>(json)?))
                 }
             }
         )*

crates/gpui/src/app/window.rs πŸ”—

@@ -394,7 +394,7 @@ impl<'a> WindowContext<'a> {
             .iter()
             .filter_map(move |(name, (type_id, deserialize))| {
                 if let Some(action_depth) = handler_depths_by_action_type.get(type_id).copied() {
-                    let action = deserialize("{}").ok()?;
+                    let action = deserialize(serde_json::Value::Object(Default::default())).ok()?;
                     let bindings = self
                         .keystroke_matcher
                         .bindings_for_action_type(*type_id)

crates/gpui/src/elements/list.rs πŸ”—

@@ -211,7 +211,7 @@ impl<V: View> Element<V> for List<V> {
         let mut cursor = old_items.cursor::<Count>();
 
         if state.rendered_range.start < new_rendered_range.start {
-            new_items.push_tree(
+            new_items.append(
                 cursor.slice(&Count(state.rendered_range.start), Bias::Right, &()),
                 &(),
             );
@@ -221,7 +221,7 @@ impl<V: View> Element<V> for List<V> {
                 cursor.next(&());
             }
         }
-        new_items.push_tree(
+        new_items.append(
             cursor.slice(&Count(new_rendered_range.start), Bias::Right, &()),
             &(),
         );
@@ -230,7 +230,7 @@ impl<V: View> Element<V> for List<V> {
         cursor.seek(&Count(new_rendered_range.end), Bias::Right, &());
 
         if new_rendered_range.end < state.rendered_range.start {
-            new_items.push_tree(
+            new_items.append(
                 cursor.slice(&Count(state.rendered_range.start), Bias::Right, &()),
                 &(),
             );
@@ -240,7 +240,7 @@ impl<V: View> Element<V> for List<V> {
             cursor.next(&());
         }
 
-        new_items.push_tree(cursor.suffix(&()), &());
+        new_items.append(cursor.suffix(&()), &());
 
         state.items = new_items;
         state.rendered_range = new_rendered_range;
@@ -413,7 +413,7 @@ impl<V: View> ListState<V> {
         old_heights.seek_forward(&Count(old_range.end), Bias::Right, &());
 
         new_heights.extend((0..count).map(|_| ListItem::Unrendered), &());
-        new_heights.push_tree(old_heights.suffix(&()), &());
+        new_heights.append(old_heights.suffix(&()), &());
         drop(old_heights);
         state.items = new_heights;
     }

crates/gpui/src/platform/mac/platform.rs πŸ”—

@@ -786,7 +786,7 @@ impl platform::Platform for MacPlatform {
 
     fn set_cursor_style(&self, style: CursorStyle) {
         unsafe {
-            let cursor: id = match style {
+            let new_cursor: id = match style {
                 CursorStyle::Arrow => msg_send![class!(NSCursor), arrowCursor],
                 CursorStyle::ResizeLeftRight => {
                     msg_send![class!(NSCursor), resizeLeftRightCursor]
@@ -795,7 +795,11 @@ impl platform::Platform for MacPlatform {
                 CursorStyle::PointingHand => msg_send![class!(NSCursor), pointingHandCursor],
                 CursorStyle::IBeam => msg_send![class!(NSCursor), IBeamCursor],
             };
-            let _: () = msg_send![cursor, set];
+
+            let old_cursor: id = msg_send![class!(NSCursor), currentCursor];
+            if new_cursor != old_cursor {
+                let _: () = msg_send![new_cursor, set];
+            }
         }
     }
 

crates/language/src/language.rs πŸ”—

@@ -17,7 +17,7 @@ use futures::{
     future::{BoxFuture, Shared},
     FutureExt, TryFutureExt as _,
 };
-use gpui::{executor::Background, AppContext, Task};
+use gpui::{executor::Background, AppContext, AsyncAppContext, Task};
 use highlight_map::HighlightMap;
 use lazy_static::lazy_static;
 use lsp::CodeActionKind;
@@ -125,27 +125,46 @@ impl CachedLspAdapter {
 
     pub async fn fetch_latest_server_version(
         &self,
-        http: Arc<dyn HttpClient>,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
-        self.adapter.fetch_latest_server_version(http).await
+        self.adapter.fetch_latest_server_version(delegate).await
+    }
+
+    pub fn will_fetch_server(
+        &self,
+        delegate: &Arc<dyn LspAdapterDelegate>,
+        cx: &mut AsyncAppContext,
+    ) -> Option<Task<Result<()>>> {
+        self.adapter.will_fetch_server(delegate, cx)
+    }
+
+    pub fn will_start_server(
+        &self,
+        delegate: &Arc<dyn LspAdapterDelegate>,
+        cx: &mut AsyncAppContext,
+    ) -> Option<Task<Result<()>>> {
+        self.adapter.will_start_server(delegate, cx)
     }
 
     pub async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        http: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         self.adapter
-            .fetch_server_binary(version, http, container_dir)
+            .fetch_server_binary(version, container_dir, delegate)
             .await
     }
 
     pub async fn cached_server_binary(
         &self,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Option<LanguageServerBinary> {
-        self.adapter.cached_server_binary(container_dir).await
+        self.adapter
+            .cached_server_binary(container_dir, delegate)
+            .await
     }
 
     pub fn code_action_kinds(&self) -> Option<Vec<CodeActionKind>> {
@@ -187,23 +206,48 @@ impl CachedLspAdapter {
     }
 }
 
+pub trait LspAdapterDelegate: Send + Sync {
+    fn show_notification(&self, message: &str, cx: &mut AppContext);
+    fn http_client(&self) -> Arc<dyn HttpClient>;
+}
+
 #[async_trait]
 pub trait LspAdapter: 'static + Send + Sync {
     async fn name(&self) -> LanguageServerName;
 
     async fn fetch_latest_server_version(
         &self,
-        http: Arc<dyn HttpClient>,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>>;
 
+    fn will_fetch_server(
+        &self,
+        _: &Arc<dyn LspAdapterDelegate>,
+        _: &mut AsyncAppContext,
+    ) -> Option<Task<Result<()>>> {
+        None
+    }
+
+    fn will_start_server(
+        &self,
+        _: &Arc<dyn LspAdapterDelegate>,
+        _: &mut AsyncAppContext,
+    ) -> Option<Task<Result<()>>> {
+        None
+    }
+
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        http: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary>;
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary>;
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary>;
 
     async fn process_diagnostics(&self, _: &mut lsp::PublishDiagnosticsParams) {}
 
@@ -513,10 +557,7 @@ pub struct LanguageRegistry {
     login_shell_env_loaded: Shared<Task<()>>,
     #[allow(clippy::type_complexity)]
     lsp_binary_paths: Mutex<
-        HashMap<
-            LanguageServerName,
-            Shared<BoxFuture<'static, Result<LanguageServerBinary, Arc<anyhow::Error>>>>,
-        >,
+        HashMap<LanguageServerName, Shared<Task<Result<LanguageServerBinary, Arc<anyhow::Error>>>>>,
     >,
     executor: Option<Arc<Background>>,
 }
@@ -812,7 +853,7 @@ impl LanguageRegistry {
         language: Arc<Language>,
         adapter: Arc<CachedLspAdapter>,
         root_path: Arc<Path>,
-        http_client: Arc<dyn HttpClient>,
+        delegate: Arc<dyn LspAdapterDelegate>,
         cx: &mut AppContext,
     ) -> Option<PendingLanguageServer> {
         let server_id = self.state.write().next_language_server_id();
@@ -860,35 +901,40 @@ impl LanguageRegistry {
             .log_err()?;
         let this = self.clone();
         let language = language.clone();
-        let http_client = http_client.clone();
         let download_dir = download_dir.clone();
         let root_path = root_path.clone();
         let adapter = adapter.clone();
         let lsp_binary_statuses = self.lsp_binary_statuses_tx.clone();
         let login_shell_env_loaded = self.login_shell_env_loaded.clone();
 
-        let task = cx.spawn(|cx| async move {
+        let task = cx.spawn(|mut cx| async move {
             login_shell_env_loaded.await;
 
-            let mut lock = this.lsp_binary_paths.lock();
-            let entry = lock
+            let entry = this
+                .lsp_binary_paths
+                .lock()
                 .entry(adapter.name.clone())
                 .or_insert_with(|| {
-                    get_binary(
-                        adapter.clone(),
-                        language.clone(),
-                        http_client,
-                        download_dir,
-                        lsp_binary_statuses,
-                    )
-                    .map_err(Arc::new)
-                    .boxed()
+                    cx.spawn(|cx| {
+                        get_binary(
+                            adapter.clone(),
+                            language.clone(),
+                            delegate.clone(),
+                            download_dir,
+                            lsp_binary_statuses,
+                            cx,
+                        )
+                        .map_err(Arc::new)
+                    })
                     .shared()
                 })
                 .clone();
-            drop(lock);
             let binary = entry.clone().map_err(|e| anyhow!(e)).await?;
 
+            if let Some(task) = adapter.will_start_server(&delegate, &mut cx) {
+                task.await?;
+            }
+
             let server = lsp::LanguageServer::new(
                 server_id,
                 &binary.path,
@@ -958,9 +1004,10 @@ impl Default for LanguageRegistry {
 async fn get_binary(
     adapter: Arc<CachedLspAdapter>,
     language: Arc<Language>,
-    http_client: Arc<dyn HttpClient>,
+    delegate: Arc<dyn LspAdapterDelegate>,
     download_dir: Arc<Path>,
     statuses: async_broadcast::Sender<(Arc<Language>, LanguageServerBinaryStatus)>,
+    mut cx: AsyncAppContext,
 ) -> Result<LanguageServerBinary> {
     let container_dir = download_dir.join(adapter.name.0.as_ref());
     if !container_dir.exists() {
@@ -969,17 +1016,24 @@ async fn get_binary(
             .context("failed to create container directory")?;
     }
 
+    if let Some(task) = adapter.will_fetch_server(&delegate, &mut cx) {
+        task.await?;
+    }
+
     let binary = fetch_latest_binary(
         adapter.clone(),
         language.clone(),
-        http_client,
+        delegate.as_ref(),
         &container_dir,
         statuses.clone(),
     )
     .await;
 
     if let Err(error) = binary.as_ref() {
-        if let Some(cached) = adapter.cached_server_binary(container_dir).await {
+        if let Some(cached) = adapter
+            .cached_server_binary(container_dir, delegate.as_ref())
+            .await
+        {
             statuses
                 .broadcast((language.clone(), LanguageServerBinaryStatus::Cached))
                 .await?;
@@ -1001,7 +1055,7 @@ async fn get_binary(
 async fn fetch_latest_binary(
     adapter: Arc<CachedLspAdapter>,
     language: Arc<Language>,
-    http_client: Arc<dyn HttpClient>,
+    delegate: &dyn LspAdapterDelegate,
     container_dir: &Path,
     lsp_binary_statuses_tx: async_broadcast::Sender<(Arc<Language>, LanguageServerBinaryStatus)>,
 ) -> Result<LanguageServerBinary> {
@@ -1012,14 +1066,12 @@ async fn fetch_latest_binary(
             LanguageServerBinaryStatus::CheckingForUpdate,
         ))
         .await?;
-    let version_info = adapter
-        .fetch_latest_server_version(http_client.clone())
-        .await?;
+    let version_info = adapter.fetch_latest_server_version(delegate).await?;
     lsp_binary_statuses_tx
         .broadcast((language.clone(), LanguageServerBinaryStatus::Downloading))
         .await?;
     let binary = adapter
-        .fetch_server_binary(version_info, http_client, container_dir.to_path_buf())
+        .fetch_server_binary(version_info, container_dir.to_path_buf(), delegate)
         .await?;
     lsp_binary_statuses_tx
         .broadcast((language.clone(), LanguageServerBinaryStatus::Downloaded))
@@ -1543,7 +1595,7 @@ impl LspAdapter for Arc<FakeLspAdapter> {
 
     async fn fetch_latest_server_version(
         &self,
-        _: Arc<dyn HttpClient>,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
         unreachable!();
     }
@@ -1551,13 +1603,17 @@ impl LspAdapter for Arc<FakeLspAdapter> {
     async fn fetch_server_binary(
         &self,
         _: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         _: PathBuf,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         unreachable!();
     }
 
-    async fn cached_server_binary(&self, _: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        _: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         unreachable!();
     }
 

crates/language/src/syntax_map.rs πŸ”—

@@ -288,7 +288,7 @@ impl SyntaxSnapshot {
                 };
                 if target.cmp(&cursor.start(), text).is_gt() {
                     let slice = cursor.slice(&target, Bias::Left, text);
-                    layers.push_tree(slice, text);
+                    layers.append(slice, text);
                 }
             }
             // If this layer follows all of the edits, then preserve it and any
@@ -303,7 +303,7 @@ impl SyntaxSnapshot {
                     Bias::Left,
                     text,
                 );
-                layers.push_tree(slice, text);
+                layers.append(slice, text);
                 continue;
             };
 
@@ -369,7 +369,7 @@ impl SyntaxSnapshot {
             cursor.next(text);
         }
 
-        layers.push_tree(cursor.suffix(&text), &text);
+        layers.append(cursor.suffix(&text), &text);
         drop(cursor);
         self.layers = layers;
     }
@@ -478,7 +478,7 @@ impl SyntaxSnapshot {
                 if bounded_position.cmp(&cursor.start(), &text).is_gt() {
                     let slice = cursor.slice(&bounded_position, Bias::Left, text);
                     if !slice.is_empty() {
-                        layers.push_tree(slice, &text);
+                        layers.append(slice, &text);
                         if changed_regions.prune(cursor.end(text), text) {
                             done = false;
                         }

crates/language_selector/src/active_buffer_language.rs πŸ”—

@@ -55,7 +55,7 @@ impl View for ActiveBufferLanguage {
 
             MouseEventHandler::<Self, Self>::new(0, cx, |state, cx| {
                 let theme = &theme::current(cx).workspace.status_bar;
-                let style = theme.active_language.style_for(state, false);
+                let style = theme.active_language.style_for(state);
                 Label::new(active_language_text, style.text.clone())
                     .contained()
                     .with_style(style.container)

crates/language_selector/src/language_selector.rs πŸ”—

@@ -180,7 +180,7 @@ impl PickerDelegate for LanguageSelectorDelegate {
     ) -> AnyElement<Picker<Self>> {
         let theme = theme::current(cx);
         let mat = &self.matches[ix];
-        let style = theme.picker.item.style_for(mouse_state, selected);
+        let style = theme.picker.item.in_state(selected).style_for(mouse_state);
         let buffer_language_name = self.buffer.read(cx).language().map(|l| l.name());
         let mut label = mat.string.clone();
         if buffer_language_name.as_deref() == Some(mat.string.as_str()) {

crates/language_tools/src/lsp_log.rs πŸ”—

@@ -681,7 +681,7 @@ impl LspLogToolbarItemView {
                     )
                 })
                 .unwrap_or_else(|| "No server selected".into());
-            let style = theme.toolbar_dropdown_menu.header.style_for(state, false);
+            let style = theme.toolbar_dropdown_menu.header.style_for(state);
             Label::new(label, style.text.clone())
                 .contained()
                 .with_style(style.container)
@@ -722,7 +722,8 @@ impl LspLogToolbarItemView {
                     let style = theme
                         .toolbar_dropdown_menu
                         .item
-                        .style_for(state, logs_selected);
+                        .in_state(logs_selected)
+                        .style_for(state);
                     Label::new(SERVER_LOGS, style.text.clone())
                         .contained()
                         .with_style(style.container)
@@ -739,7 +740,8 @@ impl LspLogToolbarItemView {
                     let style = theme
                         .toolbar_dropdown_menu
                         .item
-                        .style_for(state, rpc_trace_selected);
+                        .in_state(rpc_trace_selected)
+                        .style_for(state);
                     Flex::row()
                         .with_child(
                             Label::new(RPC_MESSAGES, style.text.clone())

crates/language_tools/src/syntax_tree_view.rs πŸ”—

@@ -565,7 +565,7 @@ impl SyntaxTreeToolbarItemView {
     ) -> impl Element<Self> {
         enum ToggleMenu {}
         MouseEventHandler::<ToggleMenu, Self>::new(0, cx, move |state, _| {
-            let style = theme.toolbar_dropdown_menu.header.style_for(state, false);
+            let style = theme.toolbar_dropdown_menu.header.style_for(state);
             Flex::row()
                 .with_child(
                     Label::new(active_layer.language.name().to_string(), style.text.clone())
@@ -601,7 +601,8 @@ impl SyntaxTreeToolbarItemView {
             let style = theme
                 .toolbar_dropdown_menu
                 .item
-                .style_for(state, is_selected);
+                .in_state(is_selected)
+                .style_for(state);
             Flex::row()
                 .with_child(
                     Label::new(layer.language.name().to_string(), style.text.clone())

crates/lsp/src/lsp.rs πŸ”—

@@ -33,7 +33,7 @@ const JSON_RPC_VERSION: &str = "2.0";
 const CONTENT_LEN_HEADER: &str = "Content-Length: ";
 
 type NotificationHandler = Box<dyn Send + FnMut(Option<usize>, &str, AsyncAppContext)>;
-type ResponseHandler = Box<dyn Send + FnOnce(Result<&str, Error>)>;
+type ResponseHandler = Box<dyn Send + FnOnce(Result<String, Error>)>;
 type IoHandler = Box<dyn Send + FnMut(bool, &str)>;
 
 pub struct LanguageServer {
@@ -103,14 +103,14 @@ struct Notification<'a, T> {
     params: T,
 }
 
-#[derive(Deserialize)]
+#[derive(Debug, Clone, Deserialize)]
 struct AnyNotification<'a> {
     #[serde(default)]
     id: Option<usize>,
     #[serde(borrow)]
     method: &'a str,
-    #[serde(borrow)]
-    params: &'a RawValue,
+    #[serde(borrow, default)]
+    params: Option<&'a RawValue>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
@@ -157,9 +157,12 @@ impl LanguageServer {
                     "unhandled notification {}:\n{}",
                     notification.method,
                     serde_json::to_string_pretty(
-                        &Value::from_str(notification.params.get()).unwrap()
+                        &notification
+                            .params
+                            .and_then(|params| Value::from_str(params.get()).ok())
+                            .unwrap_or(Value::Null)
                     )
-                    .unwrap()
+                    .unwrap(),
                 );
             },
         );
@@ -279,7 +282,11 @@ impl LanguageServer {
 
             if let Ok(msg) = serde_json::from_slice::<AnyNotification>(&buffer) {
                 if let Some(handler) = notification_handlers.lock().get_mut(msg.method) {
-                    handler(msg.id, msg.params.get(), cx.clone());
+                    handler(
+                        msg.id,
+                        &msg.params.map(|params| params.get()).unwrap_or("null"),
+                        cx.clone(),
+                    );
                 } else {
                     on_unhandled_notification(msg);
                 }
@@ -295,9 +302,9 @@ impl LanguageServer {
                     if let Some(error) = error {
                         handler(Err(error));
                     } else if let Some(result) = result {
-                        handler(Ok(result.get()));
+                        handler(Ok(result.get().into()));
                     } else {
-                        handler(Ok("null"));
+                        handler(Ok("null".into()));
                     }
                 }
             } else {
@@ -450,11 +457,13 @@ impl LanguageServer {
             let response_handlers = self.response_handlers.clone();
             let next_id = AtomicUsize::new(self.next_id.load(SeqCst));
             let outbound_tx = self.outbound_tx.clone();
+            let executor = self.executor.clone();
             let mut output_done = self.output_done_rx.lock().take().unwrap();
             let shutdown_request = Self::request_internal::<request::Shutdown>(
                 &next_id,
                 &response_handlers,
                 &outbound_tx,
+                &executor,
                 (),
             );
             let exit = Self::notify_internal::<notification::Exit>(&outbound_tx, ());
@@ -651,6 +660,7 @@ impl LanguageServer {
             &self.next_id,
             &self.response_handlers,
             &self.outbound_tx,
+            &self.executor,
             params,
         )
     }
@@ -659,6 +669,7 @@ impl LanguageServer {
         next_id: &AtomicUsize,
         response_handlers: &Mutex<Option<HashMap<usize, ResponseHandler>>>,
         outbound_tx: &channel::Sender<String>,
+        executor: &Arc<executor::Background>,
         params: T::Params,
     ) -> impl 'static + Future<Output = Result<T::Result>>
     where
@@ -679,15 +690,20 @@ impl LanguageServer {
             .as_mut()
             .ok_or_else(|| anyhow!("server shut down"))
             .map(|handlers| {
+                let executor = executor.clone();
                 handlers.insert(
                     id,
                     Box::new(move |result| {
-                        let response = match result {
-                            Ok(response) => serde_json::from_str(response)
-                                .context("failed to deserialize response"),
-                            Err(error) => Err(anyhow!("{}", error.message)),
-                        };
-                        let _ = tx.send(response);
+                        executor
+                            .spawn(async move {
+                                let response = match result {
+                                    Ok(response) => serde_json::from_str(&response)
+                                        .context("failed to deserialize response"),
+                                    Err(error) => Err(anyhow!("{}", error.message)),
+                                };
+                                let _ = tx.send(response);
+                            })
+                            .detach();
                     }),
                 );
             });
@@ -828,7 +844,13 @@ impl LanguageServer {
                 cx,
                 move |msg| {
                     notifications_tx
-                        .try_send((msg.method.to_string(), msg.params.get().to_string()))
+                        .try_send((
+                            msg.method.to_string(),
+                            msg.params
+                                .map(|raw_value| raw_value.get())
+                                .unwrap_or("null")
+                                .to_string(),
+                        ))
                         .ok();
                 },
             )),

crates/outline/src/outline.rs πŸ”—

@@ -204,7 +204,7 @@ impl PickerDelegate for OutlineViewDelegate {
         cx: &AppContext,
     ) -> AnyElement<Picker<Self>> {
         let theme = theme::current(cx);
-        let style = theme.picker.item.style_for(mouse_state, selected);
+        let style = theme.picker.item.in_state(selected).style_for(mouse_state);
         let string_match = &self.matches[ix];
         let outline_item = &self.outline.items[string_match.candidate_id];
 

crates/project/src/project.rs πŸ”—

@@ -38,9 +38,9 @@ use language::{
     },
     range_from_lsp, range_to_lsp, Anchor, Bias, Buffer, CachedLspAdapter, CodeAction, CodeLabel,
     Completion, Diagnostic, DiagnosticEntry, DiagnosticSet, Diff, Event as BufferEvent, File as _,
-    Language, LanguageRegistry, LanguageServerName, LocalFile, OffsetRangeExt, Operation, Patch,
-    PendingLanguageServer, PointUtf16, TextBufferSnapshot, ToOffset, ToPointUtf16, Transaction,
-    Unclipped,
+    Language, LanguageRegistry, LanguageServerName, LocalFile, LspAdapterDelegate, OffsetRangeExt,
+    Operation, Patch, PendingLanguageServer, PointUtf16, TextBufferSnapshot, ToOffset,
+    ToPointUtf16, Transaction, Unclipped,
 };
 use log::error;
 use lsp::{
@@ -75,8 +75,8 @@ use std::{
 };
 use terminals::Terminals;
 use util::{
-    debug_panic, defer, merge_json_value_into, paths::LOCAL_SETTINGS_RELATIVE_PATH, post_inc,
-    ResultExt, TryFutureExt as _,
+    debug_panic, defer, http::HttpClient, merge_json_value_into,
+    paths::LOCAL_SETTINGS_RELATIVE_PATH, post_inc, ResultExt, TryFutureExt as _,
 };
 
 pub use fs::*;
@@ -252,6 +252,7 @@ pub enum Event {
     LanguageServerAdded(LanguageServerId),
     LanguageServerRemoved(LanguageServerId),
     LanguageServerLog(LanguageServerId, String),
+    Notification(String),
     ActiveEntryChanged(Option<ProjectEntryId>),
     WorktreeAdded,
     WorktreeRemoved(WorktreeId),
@@ -435,6 +436,11 @@ pub enum FormatTrigger {
     Manual,
 }
 
+struct ProjectLspAdapterDelegate {
+    project: ModelHandle<Project>,
+    http_client: Arc<dyn HttpClient>,
+}
+
 impl FormatTrigger {
     fn from_proto(value: i32) -> FormatTrigger {
         match value {
@@ -2407,7 +2413,7 @@ impl Project {
                 language.clone(),
                 adapter.clone(),
                 worktree_path.clone(),
-                self.client.http_client(),
+                ProjectLspAdapterDelegate::new(self, cx),
                 cx,
             ) {
                 Some(pending_server) => pending_server,
@@ -7188,6 +7194,26 @@ impl<P: AsRef<Path>> From<(WorktreeId, P)> for ProjectPath {
     }
 }
 
+impl ProjectLspAdapterDelegate {
+    fn new(project: &Project, cx: &ModelContext<Project>) -> Arc<Self> {
+        Arc::new(Self {
+            project: cx.handle(),
+            http_client: project.client.http_client(),
+        })
+    }
+}
+
+impl LspAdapterDelegate for ProjectLspAdapterDelegate {
+    fn show_notification(&self, message: &str, cx: &mut AppContext) {
+        self.project
+            .update(cx, |_, cx| cx.emit(Event::Notification(message.to_owned())));
+    }
+
+    fn http_client(&self) -> Arc<dyn HttpClient> {
+        self.http_client.clone()
+    }
+}
+
 fn split_operations(
     mut operations: Vec<proto::Operation>,
 ) -> impl Iterator<Item = Vec<proto::Operation>> {

crates/project/src/worktree.rs πŸ”—

@@ -1470,7 +1470,7 @@ impl Snapshot {
                     break;
                 }
             }
-            new_entries_by_path.push_tree(cursor.suffix(&()), &());
+            new_entries_by_path.append(cursor.suffix(&()), &());
             new_entries_by_path
         };
 
@@ -2259,7 +2259,7 @@ impl BackgroundScannerState {
             let mut cursor = self.snapshot.entries_by_path.cursor::<TraversalProgress>();
             new_entries = cursor.slice(&TraversalTarget::Path(path), Bias::Left, &());
             removed_entries = cursor.slice(&TraversalTarget::PathSuccessor(path), Bias::Left, &());
-            new_entries.push_tree(cursor.suffix(&()), &());
+            new_entries.append(cursor.suffix(&()), &());
         }
         self.snapshot.entries_by_path = new_entries;
 

crates/project_panel/src/project_panel.rs πŸ”—

@@ -1253,7 +1253,10 @@ impl ProjectPanel {
         let show_editor = details.is_editing && !details.is_processing;
 
         MouseEventHandler::<Self, _>::new(entry_id.to_usize(), cx, |state, cx| {
-            let mut style = entry_style.style_for(state, details.is_selected).clone();
+            let mut style = entry_style
+                .in_state(details.is_selected)
+                .style_for(state)
+                .clone();
 
             if cx
                 .global::<DragAndDrop<Workspace>>()
@@ -1264,7 +1267,7 @@ impl ProjectPanel {
                     .filter(|destination| details.path.starts_with(destination))
                     .is_some()
             {
-                style = entry_style.active.clone().unwrap();
+                style = entry_style.active_state().default.clone();
             }
 
             let row_container_style = if show_editor {
@@ -1405,9 +1408,11 @@ impl View for ProjectPanel {
                         let button_style = theme.open_project_button.clone();
                         let context_menu_item_style = theme::current(cx).context_menu.item.clone();
                         move |state, cx| {
-                            let button_style = button_style.style_for(state, false).clone();
-                            let context_menu_item =
-                                context_menu_item_style.style_for(state, true).clone();
+                            let button_style = button_style.style_for(state).clone();
+                            let context_menu_item = context_menu_item_style
+                                .active_state()
+                                .style_for(state)
+                                .clone();
 
                             theme::ui::keystroke_label(
                                 "Open a project",

crates/project_symbols/src/project_symbols.rs πŸ”—

@@ -196,7 +196,7 @@ impl PickerDelegate for ProjectSymbolsDelegate {
     ) -> AnyElement<Picker<Self>> {
         let theme = theme::current(cx);
         let style = &theme.picker.item;
-        let current_style = style.style_for(mouse_state, selected);
+        let current_style = style.in_state(selected).style_for(mouse_state);
 
         let string_match = &self.matches[ix];
         let symbol = &self.symbols[string_match.candidate_id];
@@ -229,7 +229,10 @@ impl PickerDelegate for ProjectSymbolsDelegate {
             .with_child(
                 // Avoid styling the path differently when it is selected, since
                 // the symbol's syntax highlighting doesn't change when selected.
-                Label::new(path.to_string(), style.default.label.clone()),
+                Label::new(
+                    path.to_string(),
+                    style.inactive_state().default.label.clone(),
+                ),
             )
             .contained()
             .with_style(current_style.container)

crates/recent_projects/src/recent_projects.rs πŸ”—

@@ -173,7 +173,7 @@ impl PickerDelegate for RecentProjectsDelegate {
         cx: &gpui::AppContext,
     ) -> AnyElement<Picker<Self>> {
         let theme = theme::current(cx);
-        let style = theme.picker.item.style_for(mouse_state, selected);
+        let style = theme.picker.item.in_state(selected).style_for(mouse_state);
 
         let string_match = &self.matches[ix];
 

crates/rope/src/rope.rs πŸ”—

@@ -53,7 +53,7 @@ impl Rope {
             }
         }
 
-        self.chunks.push_tree(chunks.suffix(&()), &());
+        self.chunks.append(chunks.suffix(&()), &());
         self.check_invariants();
     }
 

crates/search/src/buffer_search.rs πŸ”—

@@ -328,7 +328,11 @@ impl BufferSearchBar {
         Some(
             MouseEventHandler::<Self, _>::new(option as usize, cx, |state, cx| {
                 let theme = theme::current(cx);
-                let style = theme.search.option_button.style_for(state, is_active);
+                let style = theme
+                    .search
+                    .option_button
+                    .in_state(is_active)
+                    .style_for(state);
                 Label::new(icon, style.text.clone())
                     .contained()
                     .with_style(style.container)
@@ -371,7 +375,7 @@ impl BufferSearchBar {
         enum NavButton {}
         MouseEventHandler::<NavButton, _>::new(direction as usize, cx, |state, cx| {
             let theme = theme::current(cx);
-            let style = theme.search.option_button.style_for(state, false);
+            let style = theme.search.option_button.inactive_state().style_for(state);
             Label::new(icon, style.text.clone())
                 .contained()
                 .with_style(style.container)
@@ -403,7 +407,7 @@ impl BufferSearchBar {
 
         enum CloseButton {}
         MouseEventHandler::<CloseButton, _>::new(0, cx, |state, _| {
-            let style = theme.dismiss_button.style_for(state, false);
+            let style = theme.dismiss_button.style_for(state);
             Svg::new("icons/x_mark_8.svg")
                 .with_color(style.color)
                 .constrained()

crates/search/src/project_search.rs πŸ”—

@@ -896,7 +896,7 @@ impl ProjectSearchBar {
         enum NavButton {}
         MouseEventHandler::<NavButton, _>::new(direction as usize, cx, |state, cx| {
             let theme = theme::current(cx);
-            let style = theme.search.option_button.style_for(state, false);
+            let style = theme.search.option_button.inactive_state().style_for(state);
             Label::new(icon, style.text.clone())
                 .contained()
                 .with_style(style.container)
@@ -927,7 +927,11 @@ impl ProjectSearchBar {
         let is_active = self.is_option_enabled(option, cx);
         MouseEventHandler::<Self, _>::new(option as usize, cx, |state, cx| {
             let theme = theme::current(cx);
-            let style = theme.search.option_button.style_for(state, is_active);
+            let style = theme
+                .search
+                .option_button
+                .in_state(is_active)
+                .style_for(state);
             Label::new(icon, style.text.clone())
                 .contained()
                 .with_style(style.container)

crates/settings/Cargo.toml πŸ”—

@@ -21,7 +21,7 @@ util = { path = "../util" }
 
 anyhow.workspace = true
 futures.workspace = true
-json_comments = "0.2"
+serde_json_lenient = {version = "0.1", features = ["preserve_order", "raw_value"]}
 lazy_static.workspace = true
 postage.workspace = true
 rust-embed.workspace = true
@@ -37,6 +37,6 @@ tree-sitter-json = "*"
 [dev-dependencies]
 gpui = { path = "../gpui", features = ["test-support"] }
 fs = { path = "../fs", features = ["test-support"] }
-
+indoc.workspace = true
 pretty_assertions = "1.3.0"
 unindent.workspace = true

crates/settings/src/keymap_file.rs πŸ”—

@@ -1,5 +1,5 @@
 use crate::{settings_store::parse_json_with_comments, SettingsAssets};
-use anyhow::{Context, Result};
+use anyhow::{anyhow, Context, Result};
 use collections::BTreeMap;
 use gpui::{keymap_matcher::Binding, AppContext};
 use schemars::{
@@ -8,7 +8,7 @@ use schemars::{
     JsonSchema,
 };
 use serde::Deserialize;
-use serde_json::{value::RawValue, Value};
+use serde_json::Value;
 use util::{asset_str, ResultExt};
 
 #[derive(Deserialize, Default, Clone, JsonSchema)]
@@ -24,7 +24,7 @@ pub struct KeymapBlock {
 
 #[derive(Deserialize, Default, Clone)]
 #[serde(transparent)]
-pub struct KeymapAction(Box<RawValue>);
+pub struct KeymapAction(Value);
 
 impl JsonSchema for KeymapAction {
     fn schema_name() -> String {
@@ -37,11 +37,12 @@ impl JsonSchema for KeymapAction {
 }
 
 #[derive(Deserialize)]
-struct ActionWithData(Box<str>, Box<RawValue>);
+struct ActionWithData(Box<str>, Value);
 
 impl KeymapFile {
     pub fn load_asset(asset_path: &str, cx: &mut AppContext) -> Result<()> {
         let content = asset_str::<SettingsAssets>(asset_path);
+
         Self::parse(content.as_ref())?.add_to_cx(cx)
     }
 
@@ -54,18 +55,27 @@ impl KeymapFile {
             let bindings = bindings
                 .into_iter()
                 .filter_map(|(keystroke, action)| {
-                    let action = action.0.get();
+                    let action = action.0;
 
                     // This is a workaround for a limitation in serde: serde-rs/json#497
                     // We want to deserialize the action data as a `RawValue` so that we can
                     // deserialize the action itself dynamically directly from the JSON
                     // string. But `RawValue` currently does not work inside of an untagged enum.
-                    if action.starts_with('[') {
-                        let ActionWithData(name, data) = serde_json::from_str(action).log_err()?;
-                        cx.deserialize_action(&name, Some(data.get()))
+                    if let Value::Array(items) = action {
+                        let Ok([name, data]): Result<[serde_json::Value; 2], _> = items.try_into() else {
+                            return Some(Err(anyhow!("Expected array of length 2")));
+                        };
+                        let serde_json::Value::String(name) = name else {
+                            return Some(Err(anyhow!("Expected first item in array to be a string.")))
+                        };
+                        cx.deserialize_action(
+                            &name,
+                            Some(data),
+                        )
+                    } else if let Value::String(name) = action {
+                        cx.deserialize_action(&name, None)
                     } else {
-                        let name = serde_json::from_str(action).log_err()?;
-                        cx.deserialize_action(name, None)
+                        return Some(Err(anyhow!("Expected two-element array, got {:?}", action)));
                     }
                     .with_context(|| {
                         format!(
@@ -118,3 +128,24 @@ impl KeymapFile {
         serde_json::to_value(root_schema).unwrap()
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use crate::KeymapFile;
+
+    #[test]
+    fn can_deserialize_keymap_with_trailing_comma() {
+        let json = indoc::indoc! {"[
+              // Standard macOS bindings
+              {
+                \"bindings\": {
+                  \"up\": \"menu::SelectPrev\",
+                },
+              },
+            ]
+                  "
+
+        };
+        KeymapFile::parse(json).unwrap();
+    }
+}

crates/settings/src/settings_store.rs πŸ”—

@@ -834,11 +834,8 @@ fn to_pretty_json(value: &impl Serialize, indent_size: usize, indent_prefix_len:
 }
 
 pub fn parse_json_with_comments<T: DeserializeOwned>(content: &str) -> Result<T> {
-    Ok(serde_json::from_reader(
-        json_comments::CommentSettings::c_style().strip_comments(content.as_bytes()),
-    )?)
+    Ok(serde_json_lenient::from_str(content)?)
 }
-
 #[cfg(test)]
 mod tests {
     use super::*;

crates/sum_tree/src/cursor.rs πŸ”—

@@ -669,7 +669,7 @@ impl<'a, T: Item> SeekAggregate<'a, T> for () {
 impl<'a, T: Item> SeekAggregate<'a, T> for SliceSeekAggregate<T> {
     fn begin_leaf(&mut self) {}
     fn end_leaf(&mut self, cx: &<T::Summary as Summary>::Context) {
-        self.tree.push_tree(
+        self.tree.append(
             SumTree(Arc::new(Node::Leaf {
                 summary: mem::take(&mut self.leaf_summary),
                 items: mem::take(&mut self.leaf_items),
@@ -689,7 +689,7 @@ impl<'a, T: Item> SeekAggregate<'a, T> for SliceSeekAggregate<T> {
         _: &T::Summary,
         cx: &<T::Summary as Summary>::Context,
     ) {
-        self.tree.push_tree(tree.clone(), cx);
+        self.tree.append(tree.clone(), cx);
     }
 }
 

crates/sum_tree/src/sum_tree.rs πŸ”—

@@ -268,7 +268,7 @@ impl<T: Item> SumTree<T> {
 
         for item in iter {
             if leaf.is_some() && leaf.as_ref().unwrap().items().len() == 2 * TREE_BASE {
-                self.push_tree(SumTree(Arc::new(leaf.take().unwrap())), cx);
+                self.append(SumTree(Arc::new(leaf.take().unwrap())), cx);
             }
 
             if leaf.is_none() {
@@ -295,13 +295,13 @@ impl<T: Item> SumTree<T> {
         }
 
         if leaf.is_some() {
-            self.push_tree(SumTree(Arc::new(leaf.take().unwrap())), cx);
+            self.append(SumTree(Arc::new(leaf.take().unwrap())), cx);
         }
     }
 
     pub fn push(&mut self, item: T, cx: &<T::Summary as Summary>::Context) {
         let summary = item.summary();
-        self.push_tree(
+        self.append(
             SumTree(Arc::new(Node::Leaf {
                 summary: summary.clone(),
                 items: ArrayVec::from_iter(Some(item)),
@@ -311,11 +311,11 @@ impl<T: Item> SumTree<T> {
         );
     }
 
-    pub fn push_tree(&mut self, other: Self, cx: &<T::Summary as Summary>::Context) {
+    pub fn append(&mut self, other: Self, cx: &<T::Summary as Summary>::Context) {
         if !other.0.is_leaf() || !other.0.items().is_empty() {
             if self.0.height() < other.0.height() {
                 for tree in other.0.child_trees() {
-                    self.push_tree(tree.clone(), cx);
+                    self.append(tree.clone(), cx);
                 }
             } else if let Some(split_tree) = self.push_tree_recursive(other, cx) {
                 *self = Self::from_child_trees(self.clone(), split_tree, cx);
@@ -512,7 +512,7 @@ impl<T: KeyedItem> SumTree<T> {
                 }
             }
             new_tree.push(item, cx);
-            new_tree.push_tree(cursor.suffix(cx), cx);
+            new_tree.append(cursor.suffix(cx), cx);
             new_tree
         };
         replaced
@@ -529,7 +529,7 @@ impl<T: KeyedItem> SumTree<T> {
                     cursor.next(cx);
                 }
             }
-            new_tree.push_tree(cursor.suffix(cx), cx);
+            new_tree.append(cursor.suffix(cx), cx);
             new_tree
         };
         removed
@@ -563,7 +563,7 @@ impl<T: KeyedItem> SumTree<T> {
                 {
                     new_tree.extend(buffered_items.drain(..), cx);
                     let slice = cursor.slice(&new_key, Bias::Left, cx);
-                    new_tree.push_tree(slice, cx);
+                    new_tree.append(slice, cx);
                     old_item = cursor.item();
                 }
 
@@ -583,7 +583,7 @@ impl<T: KeyedItem> SumTree<T> {
             }
 
             new_tree.extend(buffered_items, cx);
-            new_tree.push_tree(cursor.suffix(cx), cx);
+            new_tree.append(cursor.suffix(cx), cx);
             new_tree
         };
 
@@ -719,7 +719,7 @@ mod tests {
         let mut tree2 = SumTree::new();
         tree2.extend(50..100, &());
 
-        tree1.push_tree(tree2, &());
+        tree1.append(tree2, &());
         assert_eq!(
             tree1.items(&()),
             (0..20).chain(50..100).collect::<Vec<u8>>()
@@ -766,7 +766,7 @@ mod tests {
                     let mut new_tree = cursor.slice(&Count(splice_start), Bias::Right, &());
                     new_tree.extend(new_items, &());
                     cursor.seek(&Count(splice_end), Bias::Right, &());
-                    new_tree.push_tree(cursor.slice(&tree_end, Bias::Right, &()), &());
+                    new_tree.append(cursor.slice(&tree_end, Bias::Right, &()), &());
                     new_tree
                 };
 

crates/sum_tree/src/tree_map.rs πŸ”—

@@ -67,7 +67,7 @@ impl<K: Clone + Debug + Default + Ord, V: Clone + Debug> TreeMap<K, V> {
             removed = Some(cursor.item().unwrap().value.clone());
             cursor.next(&());
         }
-        new_tree.push_tree(cursor.suffix(&()), &());
+        new_tree.append(cursor.suffix(&()), &());
         drop(cursor);
         self.0 = new_tree;
         removed
@@ -79,7 +79,7 @@ impl<K: Clone + Debug + Default + Ord, V: Clone + Debug> TreeMap<K, V> {
         let mut cursor = self.0.cursor::<MapKeyRef<'_, K>>();
         let mut new_tree = cursor.slice(&start, Bias::Left, &());
         cursor.seek(&end, Bias::Left, &());
-        new_tree.push_tree(cursor.suffix(&()), &());
+        new_tree.append(cursor.suffix(&()), &());
         drop(cursor);
         self.0 = new_tree;
     }
@@ -117,7 +117,7 @@ impl<K: Clone + Debug + Default + Ord, V: Clone + Debug> TreeMap<K, V> {
             new_tree.push(updated, &());
             cursor.next(&());
         }
-        new_tree.push_tree(cursor.suffix(&()), &());
+        new_tree.append(cursor.suffix(&()), &());
         drop(cursor);
         self.0 = new_tree;
         result

crates/text/src/text.rs πŸ”—

@@ -600,7 +600,7 @@ impl Buffer {
         let mut old_fragments = self.fragments.cursor::<FragmentTextSummary>();
         let mut new_fragments =
             old_fragments.slice(&edits.peek().unwrap().0.start, Bias::Right, &None);
-        new_ropes.push_tree(new_fragments.summary().text);
+        new_ropes.append(new_fragments.summary().text);
 
         let mut fragment_start = old_fragments.start().visible;
         for (range, new_text) in edits {
@@ -625,8 +625,8 @@ impl Buffer {
                 }
 
                 let slice = old_fragments.slice(&range.start, Bias::Right, &None);
-                new_ropes.push_tree(slice.summary().text);
-                new_fragments.push_tree(slice, &None);
+                new_ropes.append(slice.summary().text);
+                new_fragments.append(slice, &None);
                 fragment_start = old_fragments.start().visible;
             }
 
@@ -728,8 +728,8 @@ impl Buffer {
         }
 
         let suffix = old_fragments.suffix(&None);
-        new_ropes.push_tree(suffix.summary().text);
-        new_fragments.push_tree(suffix, &None);
+        new_ropes.append(suffix.summary().text);
+        new_fragments.append(suffix, &None);
         let (visible_text, deleted_text) = new_ropes.finish();
         drop(old_fragments);
 
@@ -828,7 +828,7 @@ impl Buffer {
             Bias::Left,
             &cx,
         );
-        new_ropes.push_tree(new_fragments.summary().text);
+        new_ropes.append(new_fragments.summary().text);
 
         let mut fragment_start = old_fragments.start().0.full_offset();
         for (range, new_text) in edits {
@@ -854,8 +854,8 @@ impl Buffer {
 
                 let slice =
                     old_fragments.slice(&VersionedFullOffset::Offset(range.start), Bias::Left, &cx);
-                new_ropes.push_tree(slice.summary().text);
-                new_fragments.push_tree(slice, &None);
+                new_ropes.append(slice.summary().text);
+                new_fragments.append(slice, &None);
                 fragment_start = old_fragments.start().0.full_offset();
             }
 
@@ -986,8 +986,8 @@ impl Buffer {
         }
 
         let suffix = old_fragments.suffix(&cx);
-        new_ropes.push_tree(suffix.summary().text);
-        new_fragments.push_tree(suffix, &None);
+        new_ropes.append(suffix.summary().text);
+        new_fragments.append(suffix, &None);
         let (visible_text, deleted_text) = new_ropes.finish();
         drop(old_fragments);
 
@@ -1056,8 +1056,8 @@ impl Buffer {
 
         for fragment_id in self.fragment_ids_for_edits(undo.counts.keys()) {
             let preceding_fragments = old_fragments.slice(&Some(fragment_id), Bias::Left, &None);
-            new_ropes.push_tree(preceding_fragments.summary().text);
-            new_fragments.push_tree(preceding_fragments, &None);
+            new_ropes.append(preceding_fragments.summary().text);
+            new_fragments.append(preceding_fragments, &None);
 
             if let Some(fragment) = old_fragments.item() {
                 let mut fragment = fragment.clone();
@@ -1087,8 +1087,8 @@ impl Buffer {
         }
 
         let suffix = old_fragments.suffix(&None);
-        new_ropes.push_tree(suffix.summary().text);
-        new_fragments.push_tree(suffix, &None);
+        new_ropes.append(suffix.summary().text);
+        new_fragments.append(suffix, &None);
 
         drop(old_fragments);
         let (visible_text, deleted_text) = new_ropes.finish();
@@ -2070,7 +2070,7 @@ impl<'a> RopeBuilder<'a> {
         }
     }
 
-    fn push_tree(&mut self, len: FragmentTextSummary) {
+    fn append(&mut self, len: FragmentTextSummary) {
         self.push(len.visible, true, true);
         self.push(len.deleted, false, false);
     }

crates/theme/src/theme.rs πŸ”—

@@ -128,12 +128,12 @@ pub struct Titlebar {
     pub leader_avatar: AvatarStyle,
     pub follower_avatar: AvatarStyle,
     pub inactive_avatar_grayscale: bool,
-    pub sign_in_prompt: Interactive<ContainedText>,
+    pub sign_in_prompt: Toggleable<Interactive<ContainedText>>,
     pub outdated_warning: ContainedText,
-    pub share_button: Interactive<ContainedText>,
+    pub share_button: Toggleable<Interactive<ContainedText>>,
     pub call_control: Interactive<IconButton>,
-    pub toggle_contacts_button: Interactive<IconButton>,
-    pub user_menu_button: Interactive<IconButton>,
+    pub toggle_contacts_button: Toggleable<Interactive<IconButton>>,
+    pub user_menu_button: Toggleable<Interactive<IconButton>>,
     pub toggle_contacts_badge: ContainerStyle,
 }
 
@@ -204,12 +204,12 @@ pub struct ContactList {
     pub user_query_editor: FieldEditor,
     pub user_query_editor_height: f32,
     pub add_contact_button: IconButton,
-    pub header_row: Interactive<ContainedText>,
+    pub header_row: Toggleable<Interactive<ContainedText>>,
     pub leave_call: Interactive<ContainedText>,
-    pub contact_row: Interactive<ContainerStyle>,
+    pub contact_row: Toggleable<Interactive<ContainerStyle>>,
     pub row_height: f32,
-    pub project_row: Interactive<ProjectRow>,
-    pub tree_branch: Interactive<TreeBranch>,
+    pub project_row: Toggleable<Interactive<ProjectRow>>,
+    pub tree_branch: Toggleable<Interactive<TreeBranch>>,
     pub contact_avatar: ImageStyle,
     pub contact_status_free: ContainerStyle,
     pub contact_status_busy: ContainerStyle,
@@ -251,7 +251,7 @@ pub struct DropdownMenu {
     pub container: ContainerStyle,
     pub header: Interactive<DropdownMenuItem>,
     pub section_header: ContainedText,
-    pub item: Interactive<DropdownMenuItem>,
+    pub item: Toggleable<Interactive<DropdownMenuItem>>,
     pub row_height: f32,
 }
 
@@ -270,7 +270,7 @@ pub struct DropdownMenuItem {
 pub struct TabBar {
     #[serde(flatten)]
     pub container: ContainerStyle,
-    pub pane_button: Interactive<IconButton>,
+    pub pane_button: Toggleable<Interactive<IconButton>>,
     pub pane_button_container: ContainerStyle,
     pub active_pane: TabStyles,
     pub inactive_pane: TabStyles,
@@ -359,7 +359,7 @@ pub struct Search {
     pub include_exclude_editor: FindEditor,
     pub invalid_include_exclude_editor: ContainerStyle,
     pub include_exclude_inputs: ContainedText,
-    pub option_button: Interactive<ContainedText>,
+    pub option_button: Toggleable<Interactive<ContainedText>>,
     pub match_background: Color,
     pub match_index: ContainedText,
     pub results_status: TextStyle,
@@ -395,7 +395,7 @@ pub struct StatusBarPanelButtons {
     pub group_left: ContainerStyle,
     pub group_bottom: ContainerStyle,
     pub group_right: ContainerStyle,
-    pub button: Interactive<PanelButton>,
+    pub button: Toggleable<Interactive<PanelButton>>,
 }
 
 #[derive(Deserialize, Default)]
@@ -444,10 +444,10 @@ pub struct PanelButton {
 pub struct ProjectPanel {
     #[serde(flatten)]
     pub container: ContainerStyle,
-    pub entry: Interactive<ProjectPanelEntry>,
+    pub entry: Toggleable<Interactive<ProjectPanelEntry>>,
     pub dragged_entry: ProjectPanelEntry,
-    pub ignored_entry: Interactive<ProjectPanelEntry>,
-    pub cut_entry: Interactive<ProjectPanelEntry>,
+    pub ignored_entry: Toggleable<Interactive<ProjectPanelEntry>>,
+    pub cut_entry: Toggleable<Interactive<ProjectPanelEntry>>,
     pub filename_editor: FieldEditor,
     pub indent_width: f32,
     pub open_project_button: Interactive<ContainedText>,
@@ -481,7 +481,7 @@ pub struct GitProjectStatus {
 pub struct ContextMenu {
     #[serde(flatten)]
     pub container: ContainerStyle,
-    pub item: Interactive<ContextMenuItem>,
+    pub item: Toggleable<Interactive<ContextMenuItem>>,
     pub keystroke_margin: f32,
     pub separator: ContainerStyle,
 }
@@ -498,7 +498,7 @@ pub struct ContextMenuItem {
 
 #[derive(Debug, Deserialize, Default)]
 pub struct CommandPalette {
-    pub key: Interactive<ContainedLabel>,
+    pub key: Toggleable<ContainedLabel>,
     pub keystroke_spacing: f32,
 }
 
@@ -565,7 +565,7 @@ pub struct Picker {
     pub input_editor: FieldEditor,
     pub empty_input_editor: FieldEditor,
     pub no_matches: ContainedLabel,
-    pub item: Interactive<ContainedLabel>,
+    pub item: Toggleable<Interactive<ContainedLabel>>,
 }
 
 #[derive(Clone, Debug, Deserialize, Default)]
@@ -771,13 +771,13 @@ pub struct InteractiveColor {
 #[derive(Clone, Deserialize, Default)]
 pub struct CodeActions {
     #[serde(default)]
-    pub indicator: Interactive<InteractiveColor>,
+    pub indicator: Toggleable<Interactive<InteractiveColor>>,
     pub vertical_scale: f32,
 }
 
 #[derive(Clone, Deserialize, Default)]
 pub struct Folds {
-    pub indicator: Interactive<InteractiveColor>,
+    pub indicator: Toggleable<Interactive<InteractiveColor>>,
     pub ellipses: FoldEllipses,
     pub fold_background: Color,
     pub icon_margin_scale: f32,
@@ -805,38 +805,46 @@ pub struct DiffStyle {
 #[derive(Debug, Default, Clone, Copy)]
 pub struct Interactive<T> {
     pub default: T,
-    pub hover: Option<T>,
-    pub hover_and_active: Option<T>,
+    pub hovered: Option<T>,
     pub clicked: Option<T>,
-    pub click_and_active: Option<T>,
-    pub active: Option<T>,
     pub disabled: Option<T>,
 }
 
-impl<T> Interactive<T> {
-    pub fn style_for(&self, state: &mut MouseState, active: bool) -> &T {
+#[derive(Clone, Copy, Debug, Default, Deserialize)]
+pub struct Toggleable<T> {
+    active: T,
+    inactive: T,
+}
+
+impl<T> Toggleable<T> {
+    pub fn new(active: T, inactive: T) -> Self {
+        Self { active, inactive }
+    }
+    pub fn in_state(&self, active: bool) -> &T {
         if active {
-            if state.hovered() {
-                self.hover_and_active
-                    .as_ref()
-                    .unwrap_or(self.active.as_ref().unwrap_or(&self.default))
-            } else if state.clicked() == Some(platform::MouseButton::Left) && self.clicked.is_some()
-            {
-                self.click_and_active
-                    .as_ref()
-                    .unwrap_or(self.active.as_ref().unwrap_or(&self.default))
-            } else {
-                self.active.as_ref().unwrap_or(&self.default)
-            }
-        } else if state.clicked() == Some(platform::MouseButton::Left) && self.clicked.is_some() {
+            &self.active
+        } else {
+            &self.inactive
+        }
+    }
+    pub fn active_state(&self) -> &T {
+        self.in_state(true)
+    }
+    pub fn inactive_state(&self) -> &T {
+        self.in_state(false)
+    }
+}
+
+impl<T> Interactive<T> {
+    pub fn style_for(&self, state: &mut MouseState) -> &T {
+        if state.clicked() == Some(platform::MouseButton::Left) && self.clicked.is_some() {
             self.clicked.as_ref().unwrap()
         } else if state.hovered() {
-            self.hover.as_ref().unwrap_or(&self.default)
+            self.hovered.as_ref().unwrap_or(&self.default)
         } else {
             &self.default
         }
     }
-
     pub fn disabled_style(&self) -> &T {
         self.disabled.as_ref().unwrap_or(&self.default)
     }
@@ -849,13 +857,9 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive<T> {
     {
         #[derive(Deserialize)]
         struct Helper {
-            #[serde(flatten)]
             default: Value,
-            hover: Option<Value>,
-            hover_and_active: Option<Value>,
+            hovered: Option<Value>,
             clicked: Option<Value>,
-            click_and_active: Option<Value>,
-            active: Option<Value>,
             disabled: Option<Value>,
         }
 
@@ -880,21 +884,15 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive<T> {
             }
         };
 
-        let hover = deserialize_state(json.hover)?;
-        let hover_and_active = deserialize_state(json.hover_and_active)?;
+        let hovered = deserialize_state(json.hovered)?;
         let clicked = deserialize_state(json.clicked)?;
-        let click_and_active = deserialize_state(json.click_and_active)?;
-        let active = deserialize_state(json.active)?;
         let disabled = deserialize_state(json.disabled)?;
         let default = serde_json::from_value(json.default).map_err(serde::de::Error::custom)?;
 
         Ok(Interactive {
             default,
-            hover,
-            hover_and_active,
+            hovered,
             clicked,
-            click_and_active,
-            active,
             disabled,
         })
     }

crates/theme/src/ui.rs πŸ”—

@@ -170,7 +170,7 @@ where
     F: Fn(MouseClick, &mut V, &mut EventContext<V>) + 'static,
 {
     MouseEventHandler::<Tag, V>::new(0, cx, |state, _| {
-        let style = style.style_for(state, false);
+        let style = style.style_for(state);
         Label::new(label, style.text.to_owned())
             .aligned()
             .contained()
@@ -220,13 +220,13 @@ where
                     title,
                     style
                         .title_text
-                        .style_for(&mut MouseState::default(), false)
+                        .style_for(&mut MouseState::default())
                         .clone(),
                 ))
                 .with_child(
                     // FIXME: Get a better tag type
                     MouseEventHandler::<Tag, V>::new(999999, cx, |state, _cx| {
-                        let style = style.close_icon.style_for(state, false);
+                        let style = style.close_icon.style_for(state);
                         icon(style)
                     })
                     .on_click(platform::MouseButton::Left, move |_, _, cx| {

crates/theme_selector/src/theme_selector.rs πŸ”—

@@ -208,7 +208,7 @@ impl PickerDelegate for ThemeSelectorDelegate {
         cx: &AppContext,
     ) -> AnyElement<Picker<Self>> {
         let theme = theme::current(cx);
-        let style = theme.picker.item.style_for(mouse_state, selected);
+        let style = theme.picker.item.in_state(selected).style_for(mouse_state);
 
         let theme_match = &self.matches[ix];
         Label::new(theme_match.string.clone(), style.label.clone())

crates/theme_testbench/Cargo.toml πŸ”—

@@ -1,19 +0,0 @@
-[package]
-name = "theme_testbench"
-version = "0.1.0"
-edition = "2021"
-publish = false
-
-[lib]
-path = "src/theme_testbench.rs"
-doctest = false
-
-
-[dependencies]
-gpui = { path = "../gpui" }
-theme = { path = "../theme" }
-settings = { path = "../settings" }
-workspace = { path = "../workspace" }
-project = { path = "../project" }
-
-smallvec.workspace = true

crates/theme_testbench/src/theme_testbench.rs πŸ”—

@@ -1,300 +0,0 @@
-use gpui::{
-    actions,
-    color::Color,
-    elements::{
-        AnyElement, Canvas, Container, ContainerStyle, Flex, Label, Margin, MouseEventHandler,
-        Padding, ParentElement,
-    },
-    fonts::TextStyle,
-    AppContext, Border, Element, Entity, ModelHandle, Quad, Task, View, ViewContext, ViewHandle,
-    WeakViewHandle,
-};
-use project::Project;
-use theme::{ColorScheme, Layer, Style, StyleSet, ThemeSettings};
-use workspace::{item::Item, register_deserializable_item, Pane, Workspace};
-
-actions!(theme, [DeployThemeTestbench]);
-
-pub fn init(cx: &mut AppContext) {
-    cx.add_action(ThemeTestbench::deploy);
-
-    register_deserializable_item::<ThemeTestbench>(cx)
-}
-
-pub struct ThemeTestbench {}
-
-impl ThemeTestbench {
-    pub fn deploy(
-        workspace: &mut Workspace,
-        _: &DeployThemeTestbench,
-        cx: &mut ViewContext<Workspace>,
-    ) {
-        let view = cx.add_view(|_| ThemeTestbench {});
-        workspace.add_item(Box::new(view), cx);
-    }
-
-    fn render_ramps(color_scheme: &ColorScheme) -> Flex<Self> {
-        fn display_ramp(ramp: &Vec<Color>) -> AnyElement<ThemeTestbench> {
-            Flex::row()
-                .with_children(ramp.iter().cloned().map(|color| {
-                    Canvas::new(move |scene, bounds, _, _, _| {
-                        scene.push_quad(Quad {
-                            bounds,
-                            background: Some(color),
-                            ..Default::default()
-                        });
-                    })
-                    .flex(1.0, false)
-                }))
-                .flex(1.0, false)
-                .into_any()
-        }
-
-        Flex::column()
-            .with_child(display_ramp(&color_scheme.ramps.neutral))
-            .with_child(display_ramp(&color_scheme.ramps.red))
-            .with_child(display_ramp(&color_scheme.ramps.orange))
-            .with_child(display_ramp(&color_scheme.ramps.yellow))
-            .with_child(display_ramp(&color_scheme.ramps.green))
-            .with_child(display_ramp(&color_scheme.ramps.cyan))
-            .with_child(display_ramp(&color_scheme.ramps.blue))
-            .with_child(display_ramp(&color_scheme.ramps.violet))
-            .with_child(display_ramp(&color_scheme.ramps.magenta))
-    }
-
-    fn render_layer(
-        layer_index: usize,
-        layer: &Layer,
-        cx: &mut ViewContext<Self>,
-    ) -> Container<Self> {
-        Flex::column()
-            .with_child(
-                Self::render_button_set(0, layer_index, "base", &layer.base, cx).flex(1., false),
-            )
-            .with_child(
-                Self::render_button_set(1, layer_index, "variant", &layer.variant, cx)
-                    .flex(1., false),
-            )
-            .with_child(
-                Self::render_button_set(2, layer_index, "on", &layer.on, cx).flex(1., false),
-            )
-            .with_child(
-                Self::render_button_set(3, layer_index, "accent", &layer.accent, cx)
-                    .flex(1., false),
-            )
-            .with_child(
-                Self::render_button_set(4, layer_index, "positive", &layer.positive, cx)
-                    .flex(1., false),
-            )
-            .with_child(
-                Self::render_button_set(5, layer_index, "warning", &layer.warning, cx)
-                    .flex(1., false),
-            )
-            .with_child(
-                Self::render_button_set(6, layer_index, "negative", &layer.negative, cx)
-                    .flex(1., false),
-            )
-            .contained()
-            .with_style(ContainerStyle {
-                margin: Margin {
-                    top: 10.,
-                    bottom: 10.,
-                    left: 10.,
-                    right: 10.,
-                },
-                background_color: Some(layer.base.default.background),
-                ..Default::default()
-            })
-    }
-
-    fn render_button_set(
-        set_index: usize,
-        layer_index: usize,
-        set_name: &'static str,
-        style_set: &StyleSet,
-        cx: &mut ViewContext<Self>,
-    ) -> Flex<Self> {
-        Flex::row()
-            .with_child(Self::render_button(
-                set_index * 6,
-                layer_index,
-                set_name,
-                &style_set,
-                None,
-                cx,
-            ))
-            .with_child(Self::render_button(
-                set_index * 6 + 1,
-                layer_index,
-                "hovered",
-                &style_set,
-                Some(|style_set| &style_set.hovered),
-                cx,
-            ))
-            .with_child(Self::render_button(
-                set_index * 6 + 2,
-                layer_index,
-                "pressed",
-                &style_set,
-                Some(|style_set| &style_set.pressed),
-                cx,
-            ))
-            .with_child(Self::render_button(
-                set_index * 6 + 3,
-                layer_index,
-                "active",
-                &style_set,
-                Some(|style_set| &style_set.active),
-                cx,
-            ))
-            .with_child(Self::render_button(
-                set_index * 6 + 4,
-                layer_index,
-                "disabled",
-                &style_set,
-                Some(|style_set| &style_set.disabled),
-                cx,
-            ))
-            .with_child(Self::render_button(
-                set_index * 6 + 5,
-                layer_index,
-                "inverted",
-                &style_set,
-                Some(|style_set| &style_set.inverted),
-                cx,
-            ))
-    }
-
-    fn render_button(
-        button_index: usize,
-        layer_index: usize,
-        text: &'static str,
-        style_set: &StyleSet,
-        style_override: Option<fn(&StyleSet) -> &Style>,
-        cx: &mut ViewContext<Self>,
-    ) -> AnyElement<Self> {
-        enum TestBenchButton {}
-        MouseEventHandler::<TestBenchButton, _>::new(layer_index + button_index, cx, |state, cx| {
-            let style = if let Some(style_override) = style_override {
-                style_override(&style_set)
-            } else if state.clicked().is_some() {
-                &style_set.pressed
-            } else if state.hovered() {
-                &style_set.hovered
-            } else {
-                &style_set.default
-            };
-
-            Self::render_label(text.to_string(), style, cx)
-                .contained()
-                .with_style(ContainerStyle {
-                    margin: Margin {
-                        top: 4.,
-                        bottom: 4.,
-                        left: 4.,
-                        right: 4.,
-                    },
-                    padding: Padding {
-                        top: 4.,
-                        bottom: 4.,
-                        left: 4.,
-                        right: 4.,
-                    },
-                    background_color: Some(style.background),
-                    border: Border {
-                        width: 1.,
-                        color: style.border,
-                        overlay: false,
-                        top: true,
-                        bottom: true,
-                        left: true,
-                        right: true,
-                    },
-                    corner_radius: 2.,
-                    ..Default::default()
-                })
-        })
-        .flex(1., true)
-        .into_any()
-    }
-
-    fn render_label(text: String, style: &Style, cx: &mut ViewContext<Self>) -> Label {
-        let settings = settings::get::<ThemeSettings>(cx);
-        let font_cache = cx.font_cache();
-        let family_id = settings.buffer_font_family;
-        let font_size = settings.buffer_font_size(cx);
-        let font_id = font_cache
-            .select_font(family_id, &Default::default())
-            .unwrap();
-
-        let text_style = TextStyle {
-            color: style.foreground,
-            font_family_id: family_id,
-            font_family_name: font_cache.family_name(family_id).unwrap(),
-            font_id,
-            font_size,
-            font_properties: Default::default(),
-            underline: Default::default(),
-        };
-
-        Label::new(text, text_style)
-    }
-}
-
-impl Entity for ThemeTestbench {
-    type Event = ();
-}
-
-impl View for ThemeTestbench {
-    fn ui_name() -> &'static str {
-        "ThemeTestbench"
-    }
-
-    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> AnyElement<Self> {
-        let color_scheme = &theme::current(cx).clone().color_scheme;
-
-        Flex::row()
-            .with_child(
-                Self::render_ramps(color_scheme)
-                    .contained()
-                    .with_margin_right(10.)
-                    .flex(0.1, false),
-            )
-            .with_child(
-                Flex::column()
-                    .with_child(Self::render_layer(100, &color_scheme.lowest, cx).flex(1., true))
-                    .with_child(Self::render_layer(200, &color_scheme.middle, cx).flex(1., true))
-                    .with_child(Self::render_layer(300, &color_scheme.highest, cx).flex(1., true))
-                    .flex(1., false),
-            )
-            .into_any()
-    }
-}
-
-impl Item for ThemeTestbench {
-    fn tab_content<T: View>(
-        &self,
-        _: Option<usize>,
-        style: &theme::Tab,
-        _: &AppContext,
-    ) -> AnyElement<T> {
-        Label::new("Theme Testbench", style.label.clone())
-            .aligned()
-            .contained()
-            .into_any()
-    }
-
-    fn serialized_item_kind() -> Option<&'static str> {
-        Some("ThemeTestBench")
-    }
-
-    fn deserialize(
-        _project: ModelHandle<Project>,
-        _workspace: WeakViewHandle<Workspace>,
-        _workspace_id: workspace::WorkspaceId,
-        _item_id: workspace::ItemId,
-        cx: &mut ViewContext<Pane>,
-    ) -> Task<gpui::anyhow::Result<ViewHandle<Self>>> {
-        Task::ready(Ok(cx.add_view(|_| Self {})))
-    }
-}

crates/welcome/src/base_keymap_picker.rs πŸ”—

@@ -141,7 +141,7 @@ impl PickerDelegate for BaseKeymapSelectorDelegate {
     ) -> gpui::AnyElement<Picker<Self>> {
         let theme = &theme::current(cx);
         let keymap_match = &self.matches[ix];
-        let style = theme.picker.item.style_for(mouse_state, selected);
+        let style = theme.picker.item.in_state(selected).style_for(mouse_state);
 
         Label::new(keymap_match.string.clone(), style.label.clone())
             .with_highlights(keymap_match.positions.clone())

crates/workspace/src/dock.rs πŸ”—

@@ -498,7 +498,9 @@ impl View for PanelButtons {
                     Stack::new()
                         .with_child(
                             MouseEventHandler::<Self, _>::new(panel_ix, cx, |state, cx| {
-                                let style = button_style.style_for(state, is_active);
+                                let style = button_style.in_state(is_active);
+
+                                let style = style.style_for(state);
                                 Flex::row()
                                     .with_child(
                                         Svg::new(view.icon_path(cx))

crates/workspace/src/notifications.rs πŸ”—

@@ -291,7 +291,7 @@ pub mod simple_message_notification {
                         )
                         .with_child(
                             MouseEventHandler::<Cancel, _>::new(0, cx, |state, _| {
-                                let style = theme.dismiss_button.style_for(state, false);
+                                let style = theme.dismiss_button.style_for(state);
                                 Svg::new("icons/x_mark_8.svg")
                                     .with_color(style.color)
                                     .constrained()
@@ -323,7 +323,7 @@ pub mod simple_message_notification {
                                 0,
                                 cx,
                                 |state, _| {
-                                    let style = theme.action_message.style_for(state, false);
+                                    let style = theme.action_message.style_for(state);
 
                                     Flex::row()
                                         .with_child(

crates/workspace/src/pane.rs πŸ”—

@@ -1410,7 +1410,7 @@ impl Pane {
     pub fn render_tab_bar_button<F: 'static + Fn(&mut Pane, &mut EventContext<Pane>)>(
         index: usize,
         icon: &'static str,
-        active: bool,
+        is_active: bool,
         tooltip: Option<(String, Option<Box<dyn Action>>)>,
         cx: &mut ViewContext<Pane>,
         on_click: F,
@@ -1420,7 +1420,7 @@ impl Pane {
 
         let mut button = MouseEventHandler::<TabBarButton, _>::new(index, cx, |mouse_state, cx| {
             let theme = &settings::get::<ThemeSettings>(cx).theme.workspace.tab_bar;
-            let style = theme.pane_button.style_for(mouse_state, active);
+            let style = theme.pane_button.in_state(is_active).style_for(mouse_state);
             Svg::new(icon)
                 .with_color(style.color)
                 .constrained()

crates/workspace/src/toolbar.rs πŸ”—

@@ -231,7 +231,7 @@ fn nav_button<A: Action, F: 'static + Fn(&mut Toolbar, &mut ViewContext<Toolbar>
 ) -> AnyElement<Toolbar> {
     MouseEventHandler::<A, _>::new(0, cx, |state, _| {
         let style = if enabled {
-            style.style_for(state, false)
+            style.style_for(state)
         } else {
             style.disabled_style()
         };

crates/workspace/src/workspace.rs πŸ”—

@@ -140,9 +140,11 @@ pub struct OpenPaths {
 #[derive(Clone, Deserialize, PartialEq)]
 pub struct ActivatePane(pub usize);
 
+#[derive(Deserialize)]
 pub struct Toast {
     id: usize,
     msg: Cow<'static, str>,
+    #[serde(skip)]
     on_click: Option<(Cow<'static, str>, Arc<dyn Fn(&mut WindowContext)>)>,
 }
 
@@ -183,9 +185,9 @@ impl Clone for Toast {
     }
 }
 
-pub type WorkspaceId = i64;
+impl_actions!(workspace, [ActivatePane, Toast]);
 
-impl_actions!(workspace, [ActivatePane]);
+pub type WorkspaceId = i64;
 
 pub fn init_settings(cx: &mut AppContext) {
     settings::register::<WorkspaceSettings>(cx);
@@ -553,6 +555,10 @@ impl Workspace {
                     }
                 }
 
+                project::Event::Notification(message) => this.show_notification(0, cx, |cx| {
+                    cx.add_view(|_| MessageNotification::new(message.clone()))
+                }),
+
                 _ => {}
             }
             cx.notify()

crates/zed/Cargo.toml πŸ”—

@@ -3,7 +3,7 @@ authors = ["Nathan Sobo <nathansobo@gmail.com>"]
 description = "The fast, collaborative code editor."
 edition = "2021"
 name = "zed"
-version = "0.92.0"
+version = "0.93.0"
 publish = false
 
 [lib]
@@ -62,7 +62,6 @@ text = { path = "../text" }
 terminal_view = { path = "../terminal_view" }
 theme = { path = "../theme" }
 theme_selector = { path = "../theme_selector" }
-theme_testbench = { path = "../theme_testbench" }
 util = { path = "../util" }
 vim = { path = "../vim" }
 workspace = { path = "../workspace" }

crates/zed/src/languages/c.rs πŸ”—

@@ -4,12 +4,11 @@ use futures::StreamExt;
 pub use language::*;
 use smol::fs::{self, File};
 use std::{any::Any, path::PathBuf, sync::Arc};
-use util::fs::remove_matching;
-use util::github::latest_github_release;
-use util::http::HttpClient;
-use util::ResultExt;
-
-use util::github::GitHubLspBinaryVersion;
+use util::{
+    fs::remove_matching,
+    github::{latest_github_release, GitHubLspBinaryVersion},
+    ResultExt,
+};
 
 pub struct CLspAdapter;
 
@@ -21,9 +20,9 @@ impl super::LspAdapter for CLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        http: Arc<dyn HttpClient>,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
-        let release = latest_github_release("clangd/clangd", false, http).await?;
+        let release = latest_github_release("clangd/clangd", false, delegate.http_client()).await?;
         let asset_name = format!("clangd-mac-{}.zip", release.name);
         let asset = release
             .assets
@@ -40,8 +39,8 @@ impl super::LspAdapter for CLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        http: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<GitHubLspBinaryVersion>().unwrap();
         let zip_path = container_dir.join(format!("clangd_{}.zip", version.name));
@@ -49,7 +48,8 @@ impl super::LspAdapter for CLspAdapter {
         let binary_path = version_dir.join("bin/clangd");
 
         if fs::metadata(&binary_path).await.is_err() {
-            let mut response = http
+            let mut response = delegate
+                .http_client()
                 .get(&version.url, Default::default(), true)
                 .await
                 .context("error downloading release")?;
@@ -81,7 +81,11 @@ impl super::LspAdapter for CLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let mut last_clangd_dir = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/elixir.rs πŸ”—

@@ -1,16 +1,23 @@
 use anyhow::{anyhow, Context, Result};
 use async_trait::async_trait;
 use futures::StreamExt;
+use gpui::{AsyncAppContext, Task};
 pub use language::*;
 use lsp::{CompletionItemKind, SymbolKind};
 use smol::fs::{self, File};
-use std::{any::Any, path::PathBuf, sync::Arc};
-use util::fs::remove_matching;
-use util::github::latest_github_release;
-use util::http::HttpClient;
-use util::ResultExt;
-
-use util::github::GitHubLspBinaryVersion;
+use std::{
+    any::Any,
+    path::PathBuf,
+    sync::{
+        atomic::{AtomicBool, Ordering::SeqCst},
+        Arc,
+    },
+};
+use util::{
+    fs::remove_matching,
+    github::{latest_github_release, GitHubLspBinaryVersion},
+    ResultExt,
+};
 
 pub struct ElixirLspAdapter;
 
@@ -20,11 +27,43 @@ impl LspAdapter for ElixirLspAdapter {
         LanguageServerName("elixir-ls".into())
     }
 
+    fn will_start_server(
+        &self,
+        delegate: &Arc<dyn LspAdapterDelegate>,
+        cx: &mut AsyncAppContext,
+    ) -> Option<Task<Result<()>>> {
+        static DID_SHOW_NOTIFICATION: AtomicBool = AtomicBool::new(false);
+
+        const NOTIFICATION_MESSAGE: &str = "Could not run the elixir language server, `elixir-ls`, because `elixir` was not found.";
+
+        let delegate = delegate.clone();
+        Some(cx.spawn(|mut cx| async move {
+            let elixir_output = smol::process::Command::new("elixir")
+                .args(["--version"])
+                .output()
+                .await;
+            if elixir_output.is_err() {
+                if DID_SHOW_NOTIFICATION
+                    .compare_exchange(false, true, SeqCst, SeqCst)
+                    .is_ok()
+                {
+                    cx.update(|cx| {
+                        delegate.show_notification(NOTIFICATION_MESSAGE, cx);
+                    })
+                }
+                return Err(anyhow!("cannot run elixir-ls"));
+            }
+
+            Ok(())
+        }))
+    }
+
     async fn fetch_latest_server_version(
         &self,
-        http: Arc<dyn HttpClient>,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
-        let release = latest_github_release("elixir-lsp/elixir-ls", false, http).await?;
+        let release =
+            latest_github_release("elixir-lsp/elixir-ls", false, delegate.http_client()).await?;
         let asset_name = "elixir-ls.zip";
         let asset = release
             .assets
@@ -41,8 +80,8 @@ impl LspAdapter for ElixirLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        http: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<GitHubLspBinaryVersion>().unwrap();
         let zip_path = container_dir.join(format!("elixir-ls_{}.zip", version.name));
@@ -50,7 +89,8 @@ impl LspAdapter for ElixirLspAdapter {
         let binary_path = version_dir.join("language_server.sh");
 
         if fs::metadata(&binary_path).await.is_err() {
-            let mut response = http
+            let mut response = delegate
+                .http_client()
                 .get(&version.url, Default::default(), true)
                 .await
                 .context("error downloading release")?;
@@ -88,7 +128,11 @@ impl LspAdapter for ElixirLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let mut last = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/elixir/highlights.scm πŸ”—

@@ -36,8 +36,6 @@
 
 (char) @constant
 
-(interpolation "#{" @punctuation.special "}" @punctuation.special) @embedded
-
 (escape_sequence) @string.escape
 
 [
@@ -146,3 +144,10 @@
   "<<"
   ">>"
 ] @punctuation.bracket
+
+(interpolation "#{" @punctuation.special "}" @punctuation.special) @embedded
+
+((sigil
+  (sigil_name) @_sigil_name
+  (quoted_content) @embedded)
+ (#eq? @_sigil_name "H"))

crates/zed/src/languages/go.rs πŸ”—

@@ -1,16 +1,23 @@
 use anyhow::{anyhow, Result};
 use async_trait::async_trait;
 use futures::StreamExt;
+use gpui::{AsyncAppContext, Task};
 pub use language::*;
 use lazy_static::lazy_static;
 use regex::Regex;
 use smol::{fs, process};
-use std::ffi::{OsStr, OsString};
-use std::{any::Any, ops::Range, path::PathBuf, str, sync::Arc};
-use util::fs::remove_matching;
-use util::github::latest_github_release;
-use util::http::HttpClient;
-use util::ResultExt;
+use std::{
+    any::Any,
+    ffi::{OsStr, OsString},
+    ops::Range,
+    path::PathBuf,
+    str,
+    sync::{
+        atomic::{AtomicBool, Ordering::SeqCst},
+        Arc,
+    },
+};
+use util::{fs::remove_matching, github::latest_github_release, ResultExt};
 
 fn server_binary_arguments() -> Vec<OsString> {
     vec!["-mode=stdio".into()]
@@ -31,9 +38,9 @@ impl super::LspAdapter for GoLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        http: Arc<dyn HttpClient>,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
-        let release = latest_github_release("golang/tools", false, http).await?;
+        let release = latest_github_release("golang/tools", false, delegate.http_client()).await?;
         let version: Option<String> = release.name.strip_prefix("gopls/v").map(str::to_string);
         if version.is_none() {
             log::warn!(
@@ -44,11 +51,39 @@ impl super::LspAdapter for GoLspAdapter {
         Ok(Box::new(version) as Box<_>)
     }
 
+    fn will_fetch_server(
+        &self,
+        delegate: &Arc<dyn LspAdapterDelegate>,
+        cx: &mut AsyncAppContext,
+    ) -> Option<Task<Result<()>>> {
+        static DID_SHOW_NOTIFICATION: AtomicBool = AtomicBool::new(false);
+
+        const NOTIFICATION_MESSAGE: &str =
+            "Could not install the Go language server `gopls`, because `go` was not found.";
+
+        let delegate = delegate.clone();
+        Some(cx.spawn(|mut cx| async move {
+            let install_output = process::Command::new("go").args(["version"]).output().await;
+            if install_output.is_err() {
+                if DID_SHOW_NOTIFICATION
+                    .compare_exchange(false, true, SeqCst, SeqCst)
+                    .is_ok()
+                {
+                    cx.update(|cx| {
+                        delegate.show_notification(NOTIFICATION_MESSAGE, cx);
+                    })
+                }
+                return Err(anyhow!("cannot install gopls"));
+            }
+            Ok(())
+        }))
+    }
+
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<Option<String>>().unwrap();
         let this = *self;
@@ -68,7 +103,10 @@ impl super::LspAdapter for GoLspAdapter {
                     });
                 }
             }
-        } else if let Some(path) = this.cached_server_binary(container_dir.clone()).await {
+        } else if let Some(path) = this
+            .cached_server_binary(container_dir.clone(), delegate)
+            .await
+        {
             return Ok(path);
         }
 
@@ -105,7 +143,11 @@ impl super::LspAdapter for GoLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let mut last_binary_path = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/heex/highlights.scm πŸ”—

@@ -1,17 +1,11 @@
 ; HEEx delimiters
 [
-  "%>"
   "--%>"
   "-->"
   "/>"
   "<!"
   "<!--"
   "<"
-  "<%!--"
-  "<%"
-  "<%#"
-  "<%%="
-  "<%="
   "</"
   "</:"
   "<:"
@@ -20,6 +14,15 @@
   "}"
 ] @punctuation.bracket
 
+[
+  "<%!--"
+  "<%"
+  "<%#"
+  "<%%="
+  "<%="
+  "%>"
+] @keyword
+
 ; HEEx operators are highlighted as such
 "=" @operator
 

crates/zed/src/languages/heex/injections.scm πŸ”—

@@ -1,11 +1,13 @@
-((directive (partial_expression_value) @content)
- (#set! language "elixir")
- (#set! include-children)
- (#set! combined))
-
-; Regular expression_values do not need to be combined
-((directive (expression_value) @content)
- (#set! language "elixir"))
+(
+  (directive
+    [
+      (partial_expression_value)
+      (expression_value)
+      (ending_expression_value)
+    ] @content)
+  (#set! language "elixir")
+  (#set! combined)
+)
 
 ; expressions live within HTML tags, and do not need to be combined
 ;     <link href={ Routes.static_path(..) } />

crates/zed/src/languages/html.rs πŸ”—

@@ -1,14 +1,16 @@
 use anyhow::{anyhow, Result};
 use async_trait::async_trait;
 use futures::StreamExt;
-use language::{LanguageServerBinary, LanguageServerName, LspAdapter};
+use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate};
 use node_runtime::NodeRuntime;
 use serde_json::json;
 use smol::fs;
-use std::ffi::OsString;
-use std::path::Path;
-use std::{any::Any, path::PathBuf, sync::Arc};
-use util::http::HttpClient;
+use std::{
+    any::Any,
+    ffi::OsString,
+    path::{Path, PathBuf},
+    sync::Arc,
+};
 use util::ResultExt;
 
 fn server_binary_arguments(server_path: &Path) -> Vec<OsString> {
@@ -36,7 +38,7 @@ impl LspAdapter for HtmlLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        _: Arc<dyn HttpClient>,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Any + Send>> {
         Ok(Box::new(
             self.node
@@ -48,8 +50,8 @@ impl LspAdapter for HtmlLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<String>().unwrap();
         let server_path = container_dir.join(Self::SERVER_PATH);
@@ -69,7 +71,11 @@ impl LspAdapter for HtmlLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let mut last_version_dir = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/json.rs πŸ”—

@@ -3,7 +3,9 @@ use async_trait::async_trait;
 use collections::HashMap;
 use futures::{future::BoxFuture, FutureExt, StreamExt};
 use gpui::AppContext;
-use language::{LanguageRegistry, LanguageServerBinary, LanguageServerName, LspAdapter};
+use language::{
+    LanguageRegistry, LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate,
+};
 use node_runtime::NodeRuntime;
 use serde_json::json;
 use settings::{KeymapFile, SettingsJsonSchemaParams, SettingsStore};
@@ -16,7 +18,6 @@ use std::{
     path::{Path, PathBuf},
     sync::Arc,
 };
-use util::http::HttpClient;
 use util::{paths, ResultExt};
 
 const SERVER_PATH: &'static str =
@@ -45,7 +46,7 @@ impl LspAdapter for JsonLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        _: Arc<dyn HttpClient>,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
         Ok(Box::new(
             self.node
@@ -57,8 +58,8 @@ impl LspAdapter for JsonLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<String>().unwrap();
         let server_path = container_dir.join(SERVER_PATH);
@@ -78,7 +79,11 @@ impl LspAdapter for JsonLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let mut last_version_dir = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/language_plugin.rs πŸ”—

@@ -3,10 +3,9 @@ use async_trait::async_trait;
 use collections::HashMap;
 use futures::lock::Mutex;
 use gpui::executor::Background;
-use language::{LanguageServerBinary, LanguageServerName, LspAdapter};
+use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate};
 use plugin_runtime::{Plugin, PluginBinary, PluginBuilder, WasiFn};
 use std::{any::Any, path::PathBuf, sync::Arc};
-use util::http::HttpClient;
 use util::ResultExt;
 
 #[allow(dead_code)]
@@ -72,7 +71,7 @@ impl LspAdapter for PluginLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        _: Arc<dyn HttpClient>,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
         let runtime = self.runtime.clone();
         let function = self.fetch_latest_server_version;
@@ -92,8 +91,8 @@ impl LspAdapter for PluginLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = *version.downcast::<String>().unwrap();
         let runtime = self.runtime.clone();
@@ -110,7 +109,11 @@ impl LspAdapter for PluginLspAdapter {
             .await
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         let runtime = self.runtime.clone();
         let function = self.cached_server_binary;
 

crates/zed/src/languages/lua.rs πŸ”—

@@ -3,12 +3,14 @@ use async_compression::futures::bufread::GzipDecoder;
 use async_tar::Archive;
 use async_trait::async_trait;
 use futures::{io::BufReader, StreamExt};
-use language::{LanguageServerBinary, LanguageServerName};
+use language::{LanguageServerBinary, LanguageServerName, LspAdapterDelegate};
 use smol::fs;
-use std::{any::Any, env::consts, ffi::OsString, path::PathBuf, sync::Arc};
-use util::{async_iife, github::latest_github_release, http::HttpClient, ResultExt};
-
-use util::github::GitHubLspBinaryVersion;
+use std::{any::Any, env::consts, ffi::OsString, path::PathBuf};
+use util::{
+    async_iife,
+    github::{latest_github_release, GitHubLspBinaryVersion},
+    ResultExt,
+};
 
 #[derive(Copy, Clone)]
 pub struct LuaLspAdapter;
@@ -28,9 +30,11 @@ impl super::LspAdapter for LuaLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        http: Arc<dyn HttpClient>,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
-        let release = latest_github_release("LuaLS/lua-language-server", false, http).await?;
+        let release =
+            latest_github_release("LuaLS/lua-language-server", false, delegate.http_client())
+                .await?;
         let version = release.name.clone();
         let platform = match consts::ARCH {
             "x86_64" => "x64",
@@ -53,15 +57,16 @@ impl super::LspAdapter for LuaLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        http: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<GitHubLspBinaryVersion>().unwrap();
 
         let binary_path = container_dir.join("bin/lua-language-server");
 
         if fs::metadata(&binary_path).await.is_err() {
-            let mut response = http
+            let mut response = delegate
+                .http_client()
                 .get(&version.url, Default::default(), true)
                 .await
                 .map_err(|err| anyhow!("error downloading release: {}", err))?;
@@ -81,7 +86,11 @@ impl super::LspAdapter for LuaLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         async_iife!({
             let mut last_binary_path = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/python.rs πŸ”—

@@ -1,7 +1,7 @@
 use anyhow::{anyhow, Result};
 use async_trait::async_trait;
 use futures::StreamExt;
-use language::{LanguageServerBinary, LanguageServerName, LspAdapter};
+use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate};
 use node_runtime::NodeRuntime;
 use smol::fs;
 use std::{
@@ -10,7 +10,6 @@ use std::{
     path::{Path, PathBuf},
     sync::Arc,
 };
-use util::http::HttpClient;
 use util::ResultExt;
 
 fn server_binary_arguments(server_path: &Path) -> Vec<OsString> {
@@ -37,7 +36,7 @@ impl LspAdapter for PythonLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        _: Arc<dyn HttpClient>,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Any + Send>> {
         Ok(Box::new(self.node.npm_package_latest_version("pyright").await?) as Box<_>)
     }
@@ -45,8 +44,8 @@ impl LspAdapter for PythonLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<String>().unwrap();
         let server_path = container_dir.join(Self::SERVER_PATH);
@@ -63,7 +62,11 @@ impl LspAdapter for PythonLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let mut last_version_dir = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/ruby.rs πŸ”—

@@ -1,8 +1,7 @@
 use anyhow::{anyhow, Result};
 use async_trait::async_trait;
-use language::{LanguageServerBinary, LanguageServerName, LspAdapter};
+use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate};
 use std::{any::Any, path::PathBuf, sync::Arc};
-use util::http::HttpClient;
 
 pub struct RubyLanguageServer;
 
@@ -14,7 +13,7 @@ impl LspAdapter for RubyLanguageServer {
 
     async fn fetch_latest_server_version(
         &self,
-        _: Arc<dyn HttpClient>,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Any + Send>> {
         Ok(Box::new(()))
     }
@@ -22,13 +21,17 @@ impl LspAdapter for RubyLanguageServer {
     async fn fetch_server_binary(
         &self,
         _version: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         _container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         Err(anyhow!("solargraph must be installed manually"))
     }
 
-    async fn cached_server_binary(&self, _container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        _: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         Some(LanguageServerBinary {
             path: "solargraph".into(),
             arguments: vec!["stdio".into()],

crates/zed/src/languages/rust.rs πŸ”—

@@ -7,10 +7,11 @@ use lazy_static::lazy_static;
 use regex::Regex;
 use smol::fs::{self, File};
 use std::{any::Any, borrow::Cow, env::consts, path::PathBuf, str, sync::Arc};
-use util::fs::remove_matching;
-use util::github::{latest_github_release, GitHubLspBinaryVersion};
-use util::http::HttpClient;
-use util::ResultExt;
+use util::{
+    fs::remove_matching,
+    github::{latest_github_release, GitHubLspBinaryVersion},
+    ResultExt,
+};
 
 pub struct RustLspAdapter;
 
@@ -22,9 +23,11 @@ impl LspAdapter for RustLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        http: Arc<dyn HttpClient>,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
-        let release = latest_github_release("rust-analyzer/rust-analyzer", false, http).await?;
+        let release =
+            latest_github_release("rust-analyzer/rust-analyzer", false, delegate.http_client())
+                .await?;
         let asset_name = format!("rust-analyzer-{}-apple-darwin.gz", consts::ARCH);
         let asset = release
             .assets
@@ -40,14 +43,15 @@ impl LspAdapter for RustLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        http: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<GitHubLspBinaryVersion>().unwrap();
         let destination_path = container_dir.join(format!("rust-analyzer-{}", version.name));
 
         if fs::metadata(&destination_path).await.is_err() {
-            let mut response = http
+            let mut response = delegate
+                .http_client()
                 .get(&version.url, Default::default(), true)
                 .await
                 .map_err(|err| anyhow!("error downloading release: {}", err))?;
@@ -69,7 +73,11 @@ impl LspAdapter for RustLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let mut last = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/typescript.rs πŸ”—

@@ -4,7 +4,7 @@ use async_tar::Archive;
 use async_trait::async_trait;
 use futures::{future::BoxFuture, FutureExt};
 use gpui::AppContext;
-use language::{LanguageServerBinary, LanguageServerName, LspAdapter};
+use language::{LanguageServerBinary, LanguageServerName, LspAdapter, LspAdapterDelegate};
 use lsp::CodeActionKind;
 use node_runtime::NodeRuntime;
 use serde_json::{json, Value};
@@ -16,7 +16,7 @@ use std::{
     path::{Path, PathBuf},
     sync::Arc,
 };
-use util::{fs::remove_matching, github::latest_github_release, http::HttpClient};
+use util::{fs::remove_matching, github::latest_github_release};
 use util::{github::GitHubLspBinaryVersion, ResultExt};
 
 fn typescript_server_binary_arguments(server_path: &Path) -> Vec<OsString> {
@@ -58,7 +58,7 @@ impl LspAdapter for TypeScriptLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        _: Arc<dyn HttpClient>,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
         Ok(Box::new(TypeScriptVersions {
             typescript_version: self.node.npm_package_latest_version("typescript").await?,
@@ -72,8 +72,8 @@ impl LspAdapter for TypeScriptLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<TypeScriptVersions>().unwrap();
         let server_path = container_dir.join(Self::NEW_SERVER_PATH);
@@ -99,7 +99,11 @@ impl LspAdapter for TypeScriptLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let old_server_path = container_dir.join(Self::OLD_SERVER_PATH);
             let new_server_path = container_dir.join(Self::NEW_SERVER_PATH);
@@ -204,12 +208,13 @@ impl LspAdapter for EsLintLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        http: Arc<dyn HttpClient>,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Send + Any>> {
         // At the time of writing the latest vscode-eslint release was released in 2020 and requires
         // special custom LSP protocol extensions be handled to fully initialize. Download the latest
         // prerelease instead to sidestep this issue
-        let release = latest_github_release("microsoft/vscode-eslint", true, http).await?;
+        let release =
+            latest_github_release("microsoft/vscode-eslint", true, delegate.http_client()).await?;
         Ok(Box::new(GitHubLspBinaryVersion {
             name: release.name,
             url: release.tarball_url,
@@ -219,8 +224,8 @@ impl LspAdapter for EsLintLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        http: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        delegate: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<GitHubLspBinaryVersion>().unwrap();
         let destination_path = container_dir.join(format!("vscode-eslint-{}", version.name));
@@ -229,7 +234,8 @@ impl LspAdapter for EsLintLspAdapter {
         if fs::metadata(&server_path).await.is_err() {
             remove_matching(&container_dir, |entry| entry != destination_path).await;
 
-            let mut response = http
+            let mut response = delegate
+                .http_client()
                 .get(&version.url, Default::default(), true)
                 .await
                 .map_err(|err| anyhow!("error downloading release: {}", err))?;
@@ -257,7 +263,11 @@ impl LspAdapter for EsLintLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             // This is unfortunate but we don't know what the version is to build a path directly
             let mut dir = fs::read_dir(&container_dir).await?;

crates/zed/src/languages/yaml.rs πŸ”—

@@ -4,6 +4,7 @@ use futures::{future::BoxFuture, FutureExt, StreamExt};
 use gpui::AppContext;
 use language::{
     language_settings::all_language_settings, LanguageServerBinary, LanguageServerName, LspAdapter,
+    LspAdapterDelegate,
 };
 use node_runtime::NodeRuntime;
 use serde_json::Value;
@@ -15,7 +16,6 @@ use std::{
     path::{Path, PathBuf},
     sync::Arc,
 };
-use util::http::HttpClient;
 use util::ResultExt;
 
 fn server_binary_arguments(server_path: &Path) -> Vec<OsString> {
@@ -42,7 +42,7 @@ impl LspAdapter for YamlLspAdapter {
 
     async fn fetch_latest_server_version(
         &self,
-        _: Arc<dyn HttpClient>,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<Box<dyn 'static + Any + Send>> {
         Ok(Box::new(
             self.node
@@ -54,8 +54,8 @@ impl LspAdapter for YamlLspAdapter {
     async fn fetch_server_binary(
         &self,
         version: Box<dyn 'static + Send + Any>,
-        _: Arc<dyn HttpClient>,
         container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
     ) -> Result<LanguageServerBinary> {
         let version = version.downcast::<String>().unwrap();
         let server_path = container_dir.join(Self::SERVER_PATH);
@@ -72,7 +72,11 @@ impl LspAdapter for YamlLspAdapter {
         })
     }
 
-    async fn cached_server_binary(&self, container_dir: PathBuf) -> Option<LanguageServerBinary> {
+    async fn cached_server_binary(
+        &self,
+        container_dir: PathBuf,
+        _: &dyn LspAdapterDelegate,
+    ) -> Option<LanguageServerBinary> {
         (|| async move {
             let mut last_version_dir = None;
             let mut entries = fs::read_dir(&container_dir).await?;

crates/zed/src/main.rs πŸ”—

@@ -154,7 +154,6 @@ fn main() {
         search::init(cx);
         vim::init(cx);
         terminal_view::init(cx);
-        theme_testbench::init(cx);
         copilot::init(http.clone(), node_runtime, cx);
         ai::init(cx);
 

docs/zed/syntax-highlighting.md πŸ”—

@@ -0,0 +1,79 @@
+# Syntax Highlighting in Zed
+
+This doc is a work in progress!
+
+## Defining syntax highlighting rules
+
+We use tree-sitter queries to match certian properties to highlight.
+
+### Simple Example:
+
+```scheme
+(property_identifier) @property
+```
+
+```ts
+const font: FontFamily = {
+    weight: "normal",
+    underline: false,
+    italic: false,
+}
+```
+
+Match a property identifier and highlight it using the identifier `@property`. In the above example, `weight`, `underline`, and `italic` would be highlighted.
+
+### Complex example:
+
+```scheme
+(_
+  return_type: (type_annotation
+    [
+      (type_identifier) @type.return
+      (generic_type
+          name: (type_identifier) @type.return)
+    ]))
+```
+
+```ts
+function buildDefaultSyntax(colorScheme: ColorScheme): Partial<Syntax> {
+    // ...
+}
+```
+
+Match a function return type, and highlight the type using the identifier `@type.return`. In the above example, `Partial` would be highlighted.
+
+### Example - Typescript
+
+Here is an example portion of our `highlights.scm` for TypeScript:
+
+```scheme
+; crates/zed/src/languages/typescript/highlights.scm
+
+; Variables
+
+(identifier) @variable
+
+; Properties
+
+(property_identifier) @property
+
+; Function and method calls
+
+(call_expression
+  function: (identifier) @function)
+
+(call_expression
+  function: (member_expression
+    property: (property_identifier) @function.method))
+
+; Function and method definitions
+
+(function
+  name: (identifier) @function)
+(function_declaration
+  name: (identifier) @function)
+(method_definition
+  name: (property_identifier) @function.method)
+
+; ...
+```

styles/.zed/settings.json πŸ”—

@@ -0,0 +1,20 @@
+// Folder-specific settings
+//
+// For a full list of overridable settings, and general information on folder-specific settings,
+// see the documentation: https://docs.zed.dev/configuration/configuring-zed#folder-specific-settings
+{
+    "languages": {
+        "TypeScript": {
+            "tab_size": 4
+        },
+        "TSX": {
+            "tab_size": 4
+        },
+        "JavaScript": {
+            "tab_size": 4
+        },
+        "JSON": {
+            "tab_size": 4
+        }
+    }
+}

styles/package-lock.json πŸ”—

@@ -18,9 +18,34 @@
                 "chroma-js": "^2.4.2",
                 "deepmerge": "^4.3.0",
                 "toml": "^3.0.0",
-                "ts-node": "^10.9.1"
+                "ts-deepmerge": "^6.0.3",
+                "ts-node": "^10.9.1",
+                "utility-types": "^3.10.0",
+                "vitest": "^0.32.0"
+            },
+            "devDependencies": {
+                "@vitest/coverage-v8": "^0.32.0"
+            }
+        },
+        "node_modules/@ampproject/remapping": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+            "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.0",
+                "@jridgewell/trace-mapping": "^0.3.9"
+            },
+            "engines": {
+                "node": ">=6.0.0"
             }
         },
+        "node_modules/@bcoe/v8-coverage": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+            "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+            "dev": true
+        },
         "node_modules/@cspotcode/source-map-support": {
             "version": "0.8.1",
             "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -32,6 +57,359 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@esbuild/android-arm": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
+            "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-arm64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz",
+            "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/android-x64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz",
+            "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/darwin-arm64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
+            "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/darwin-x64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz",
+            "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/freebsd-arm64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz",
+            "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/freebsd-x64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz",
+            "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-arm": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz",
+            "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==",
+            "cpu": [
+                "arm"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-arm64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz",
+            "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-ia32": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz",
+            "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-loong64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz",
+            "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==",
+            "cpu": [
+                "loong64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-mips64el": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz",
+            "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==",
+            "cpu": [
+                "mips64el"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-ppc64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz",
+            "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==",
+            "cpu": [
+                "ppc64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-riscv64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz",
+            "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==",
+            "cpu": [
+                "riscv64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-s390x": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz",
+            "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==",
+            "cpu": [
+                "s390x"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/linux-x64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
+            "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/netbsd-x64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz",
+            "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "netbsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/openbsd-x64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz",
+            "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "openbsd"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/sunos-x64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz",
+            "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "sunos"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-arm64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz",
+            "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==",
+            "cpu": [
+                "arm64"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-ia32": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz",
+            "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==",
+            "cpu": [
+                "ia32"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@esbuild/win32-x64": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz",
+            "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==",
+            "cpu": [
+                "x64"
+            ],
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@istanbuljs/schema": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+            "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+            "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/set-array": "^1.0.1",
+                "@jridgewell/sourcemap-codec": "^1.4.10",
+                "@jridgewell/trace-mapping": "^0.3.9"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/@jridgewell/resolve-uri": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
@@ -40,6 +418,15 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/@jridgewell/set-array": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+            "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/@jridgewell/sourcemap-codec": {
             "version": "1.4.14",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
@@ -79,16 +466,124 @@
             "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
             "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ=="
         },
+        "node_modules/@types/chai": {
+            "version": "4.3.5",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
+            "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng=="
+        },
+        "node_modules/@types/chai-subset": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz",
+            "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==",
+            "dependencies": {
+                "@types/chai": "*"
+            }
+        },
         "node_modules/@types/chroma-js": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.0.tgz",
             "integrity": "sha512-JklMxityrwjBTjGY2anH8JaTx3yjRU3/sEHSblLH1ba5lqcSh1LnImXJZO5peJfXyqKYWjHTGy4s5Wz++hARrw=="
         },
+        "node_modules/@types/istanbul-lib-coverage": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
+            "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+            "dev": true
+        },
         "node_modules/@types/node": {
             "version": "18.14.1",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz",
             "integrity": "sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ=="
         },
+        "node_modules/@vitest/coverage-v8": {
+            "version": "0.32.0",
+            "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-0.32.0.tgz",
+            "integrity": "sha512-VXXlWq9X/NbsoP/l/CHLBjutsFFww1UY1qEhzGjn/DY7Tqe+z0Nu8XKc8im/XUAmjiWsh2XV7sy/F0IKAl4eaw==",
+            "dev": true,
+            "dependencies": {
+                "@ampproject/remapping": "^2.2.1",
+                "@bcoe/v8-coverage": "^0.2.3",
+                "istanbul-lib-coverage": "^3.2.0",
+                "istanbul-lib-report": "^3.0.0",
+                "istanbul-lib-source-maps": "^4.0.1",
+                "istanbul-reports": "^3.1.5",
+                "magic-string": "^0.30.0",
+                "picocolors": "^1.0.0",
+                "std-env": "^3.3.2",
+                "test-exclude": "^6.0.0",
+                "v8-to-istanbul": "^9.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            },
+            "peerDependencies": {
+                "vitest": ">=0.32.0 <1"
+            }
+        },
+        "node_modules/@vitest/expect": {
+            "version": "0.32.0",
+            "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.32.0.tgz",
+            "integrity": "sha512-VxVHhIxKw9Lux+O9bwLEEk2gzOUe93xuFHy9SzYWnnoYZFYg1NfBtnfnYWiJN7yooJ7KNElCK5YtA7DTZvtXtg==",
+            "dependencies": {
+                "@vitest/spy": "0.32.0",
+                "@vitest/utils": "0.32.0",
+                "chai": "^4.3.7"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/runner": {
+            "version": "0.32.0",
+            "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-0.32.0.tgz",
+            "integrity": "sha512-QpCmRxftHkr72xt5A08xTEs9I4iWEXIOCHWhQQguWOKE4QH7DXSKZSOFibuwEIMAD7G0ERvtUyQn7iPWIqSwmw==",
+            "dependencies": {
+                "@vitest/utils": "0.32.0",
+                "concordance": "^5.0.4",
+                "p-limit": "^4.0.0",
+                "pathe": "^1.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/snapshot": {
+            "version": "0.32.0",
+            "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-0.32.0.tgz",
+            "integrity": "sha512-yCKorPWjEnzpUxQpGlxulujTcSPgkblwGzAUEL+z01FTUg/YuCDZ8dxr9sHA08oO2EwxzHXNLjQKWJ2zc2a19Q==",
+            "dependencies": {
+                "magic-string": "^0.30.0",
+                "pathe": "^1.1.0",
+                "pretty-format": "^27.5.1"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/spy": {
+            "version": "0.32.0",
+            "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.32.0.tgz",
+            "integrity": "sha512-MruAPlM0uyiq3d53BkwTeShXY0rYEfhNGQzVO5GHBmmX3clsxcWp79mMnkOVcV244sNTeDcHbcPFWIjOI4tZvw==",
+            "dependencies": {
+                "tinyspy": "^2.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
+        "node_modules/@vitest/utils": {
+            "version": "0.32.0",
+            "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.32.0.tgz",
+            "integrity": "sha512-53yXunzx47MmbuvcOPpLaVljHaeSu1G2dHdmy7+9ngMnQIkBQcvwOcoclWFnxDMxFbnq8exAfh3aKSZaK71J5A==",
+            "dependencies": {
+                "concordance": "^5.0.4",
+                "loupe": "^2.3.6",
+                "pretty-format": "^27.5.1"
+            },
+            "funding": {
+                "url": "https://opencollective.com/vitest"
+            }
+        },
         "node_modules/acorn": {
             "version": "8.8.2",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -108,11 +603,38 @@
                 "node": ">=0.4.0"
             }
         },
+        "node_modules/ansi-regex": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
         "node_modules/arg": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
             "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
         },
+        "node_modules/assertion-error": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+            "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/ayu": {
             "version": "8.0.1",
             "resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz",
@@ -123,11 +645,40 @@
                 "nonenumerable": "^1.1.1"
             }
         },
+        "node_modules/balanced-match": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true
+        },
         "node_modules/bezier-easing": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
             "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
         },
+        "node_modules/blueimp-md5": {
+            "version": "2.19.0",
+            "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
+            "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
+        },
+        "node_modules/brace-expansion": {
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+            "dev": true,
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/cac": {
+            "version": "6.7.14",
+            "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+            "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/case-anything": {
             "version": "2.1.10",
             "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
@@ -139,16 +690,109 @@
                 "url": "https://github.com/sponsors/mesqueeb"
             }
         },
+        "node_modules/chai": {
+            "version": "4.3.7",
+            "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz",
+            "integrity": "sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==",
+            "dependencies": {
+                "assertion-error": "^1.1.0",
+                "check-error": "^1.0.2",
+                "deep-eql": "^4.1.2",
+                "get-func-name": "^2.0.0",
+                "loupe": "^2.3.1",
+                "pathval": "^1.1.1",
+                "type-detect": "^4.0.5"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/check-error": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
+            "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/chroma-js": {
             "version": "2.4.2",
             "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
             "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
         },
+        "node_modules/concat-map": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+            "dev": true
+        },
+        "node_modules/concordance": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/concordance/-/concordance-5.0.4.tgz",
+            "integrity": "sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==",
+            "dependencies": {
+                "date-time": "^3.1.0",
+                "esutils": "^2.0.3",
+                "fast-diff": "^1.2.0",
+                "js-string-escape": "^1.0.1",
+                "lodash": "^4.17.15",
+                "md5-hex": "^3.0.1",
+                "semver": "^7.3.2",
+                "well-known-symbols": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10.18.0 <11 || >=12.14.0 <13 || >=14"
+            }
+        },
+        "node_modules/convert-source-map": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+            "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+            "dev": true
+        },
         "node_modules/create-require": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
             "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
         },
+        "node_modules/date-time": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz",
+            "integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==",
+            "dependencies": {
+                "time-zone": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/debug": {
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+            "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+            "dependencies": {
+                "ms": "2.1.2"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/deep-eql": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
+            "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
+            "dependencies": {
+                "type-detect": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/deepmerge": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
@@ -165,21 +809,577 @@
                 "node": ">=0.3.1"
             }
         },
+        "node_modules/esbuild": {
+            "version": "0.17.19",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
+            "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
+            "hasInstallScript": true,
+            "bin": {
+                "esbuild": "bin/esbuild"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "optionalDependencies": {
+                "@esbuild/android-arm": "0.17.19",
+                "@esbuild/android-arm64": "0.17.19",
+                "@esbuild/android-x64": "0.17.19",
+                "@esbuild/darwin-arm64": "0.17.19",
+                "@esbuild/darwin-x64": "0.17.19",
+                "@esbuild/freebsd-arm64": "0.17.19",
+                "@esbuild/freebsd-x64": "0.17.19",
+                "@esbuild/linux-arm": "0.17.19",
+                "@esbuild/linux-arm64": "0.17.19",
+                "@esbuild/linux-ia32": "0.17.19",
+                "@esbuild/linux-loong64": "0.17.19",
+                "@esbuild/linux-mips64el": "0.17.19",
+                "@esbuild/linux-ppc64": "0.17.19",
+                "@esbuild/linux-riscv64": "0.17.19",
+                "@esbuild/linux-s390x": "0.17.19",
+                "@esbuild/linux-x64": "0.17.19",
+                "@esbuild/netbsd-x64": "0.17.19",
+                "@esbuild/openbsd-x64": "0.17.19",
+                "@esbuild/sunos-x64": "0.17.19",
+                "@esbuild/win32-arm64": "0.17.19",
+                "@esbuild/win32-ia32": "0.17.19",
+                "@esbuild/win32-x64": "0.17.19"
+            }
+        },
+        "node_modules/esutils": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/fast-diff": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+            "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
+        },
+        "node_modules/fs.realpath": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+            "dev": true
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+            "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+            "hasInstallScript": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/get-func-name": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
+            "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "dev": true,
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/html-escaper": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+            "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+            "dev": true
+        },
+        "node_modules/inflight": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+            "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+            "dev": true,
+            "dependencies": {
+                "once": "^1.3.0",
+                "wrappy": "1"
+            }
+        },
+        "node_modules/inherits": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+            "dev": true
+        },
+        "node_modules/istanbul-lib-coverage": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+            "integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/istanbul-lib-report": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+            "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+            "dev": true,
+            "dependencies": {
+                "istanbul-lib-coverage": "^3.0.0",
+                "make-dir": "^3.0.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/istanbul-lib-source-maps": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+            "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+            "dev": true,
+            "dependencies": {
+                "debug": "^4.1.1",
+                "istanbul-lib-coverage": "^3.0.0",
+                "source-map": "^0.6.1"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/istanbul-reports": {
+            "version": "3.1.5",
+            "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz",
+            "integrity": "sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==",
+            "dev": true,
+            "dependencies": {
+                "html-escaper": "^2.0.0",
+                "istanbul-lib-report": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/js-string-escape": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
+            "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==",
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/jsonc-parser": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+            "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+        },
+        "node_modules/local-pkg": {
+            "version": "0.4.3",
+            "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+            "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "node_modules/loupe": {
+            "version": "2.3.6",
+            "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
+            "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
+            "dependencies": {
+                "get-func-name": "^2.0.0"
+            }
+        },
+        "node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/magic-string": {
+            "version": "0.30.0",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
+            "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.4.13"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/make-dir": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+            "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+            "dev": true,
+            "dependencies": {
+                "semver": "^6.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/make-dir/node_modules/semver": {
+            "version": "6.3.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "dev": true,
+            "bin": {
+                "semver": "bin/semver.js"
+            }
+        },
         "node_modules/make-error": {
             "version": "1.3.6",
             "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
             "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
         },
+        "node_modules/md5-hex": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
+            "integrity": "sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==",
+            "dependencies": {
+                "blueimp-md5": "^2.10.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/mlly": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.3.0.tgz",
+            "integrity": "sha512-HT5mcgIQKkOrZecOjOX3DJorTikWXwsBfpcr/MGBkhfWcjiqvnaL/9ppxvIUXfjT6xt4DVIAsN9fMUz1ev4bIw==",
+            "dependencies": {
+                "acorn": "^8.8.2",
+                "pathe": "^1.1.0",
+                "pkg-types": "^1.0.3",
+                "ufo": "^1.1.2"
+            }
+        },
+        "node_modules/ms": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.6",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+            "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
         "node_modules/nonenumerable": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz",
             "integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q=="
         },
+        "node_modules/once": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+            "dev": true,
+            "dependencies": {
+                "wrappy": "1"
+            }
+        },
+        "node_modules/p-limit": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+            "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+            "dependencies": {
+                "yocto-queue": "^1.0.0"
+            },
+            "engines": {
+                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/path-is-absolute": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/pathe": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
+            "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q=="
+        },
+        "node_modules/pathval": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+            "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/picocolors": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+        },
+        "node_modules/pkg-types": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
+            "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+            "dependencies": {
+                "jsonc-parser": "^3.2.0",
+                "mlly": "^1.2.0",
+                "pathe": "^1.1.0"
+            }
+        },
+        "node_modules/postcss": {
+            "version": "8.4.24",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+            "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "dependencies": {
+                "nanoid": "^3.3.6",
+                "picocolors": "^1.0.0",
+                "source-map-js": "^1.0.2"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/pretty-format": {
+            "version": "27.5.1",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+            "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+            "dependencies": {
+                "ansi-regex": "^5.0.1",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^17.0.1"
+            },
+            "engines": {
+                "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+            }
+        },
+        "node_modules/react-is": {
+            "version": "17.0.2",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+            "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        },
+        "node_modules/rollup": {
+            "version": "3.25.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.1.tgz",
+            "integrity": "sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==",
+            "bin": {
+                "rollup": "dist/bin/rollup"
+            },
+            "engines": {
+                "node": ">=14.18.0",
+                "npm": ">=8.0.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/semver": {
+            "version": "7.5.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.2.tgz",
+            "integrity": "sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==",
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/siginfo": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+            "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g=="
+        },
+        "node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/source-map-js": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/stackback": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+            "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="
+        },
+        "node_modules/std-env": {
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz",
+            "integrity": "sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg=="
+        },
+        "node_modules/strip-literal": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz",
+            "integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==",
+            "dependencies": {
+                "acorn": "^8.8.2"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/test-exclude": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+            "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+            "dev": true,
+            "dependencies": {
+                "@istanbuljs/schema": "^0.1.2",
+                "glob": "^7.1.4",
+                "minimatch": "^3.0.4"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/time-zone": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz",
+            "integrity": "sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/tinybench": {
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
+            "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA=="
+        },
+        "node_modules/tinypool": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.5.0.tgz",
+            "integrity": "sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/tinyspy": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz",
+            "integrity": "sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
         "node_modules/toml": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
             "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w=="
         },
+        "node_modules/ts-deepmerge": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/ts-deepmerge/-/ts-deepmerge-6.0.3.tgz",
+            "integrity": "sha512-MBBJL0UK/mMnZRONMz4J1CRu5NsGtsh+gR1nkn8KLE9LXo/PCzeHhQduhNary8m5/m9ryOOyFwVKxq81cPlaow==",
+            "engines": {
+                "node": ">=14.13.1"
+            }
+        },
         "node_modules/ts-node": {
             "version": "10.9.1",
             "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",

styles/package.json πŸ”—

@@ -6,7 +6,8 @@
     "scripts": {
         "build": "ts-node ./src/buildThemes.ts",
         "build-licenses": "ts-node ./src/buildLicenses.ts",
-        "build-tokens": "ts-node ./src/buildTokens.ts"
+        "build-tokens": "ts-node ./src/buildTokens.ts",
+        "test": "vitest"
     },
     "author": "",
     "license": "ISC",
@@ -20,12 +21,18 @@
         "chroma-js": "^2.4.2",
         "deepmerge": "^4.3.0",
         "toml": "^3.0.0",
-        "ts-node": "^10.9.1"
+        "ts-deepmerge": "^6.0.3",
+        "ts-node": "^10.9.1",
+        "utility-types": "^3.10.0",
+        "vitest": "^0.32.0"
     },
     "prettier": {
         "semi": false,
         "printWidth": 80,
         "htmlWhitespaceSensitivity": "strict",
         "tabWidth": 4
+    },
+    "devDependencies": {
+        "@vitest/coverage-v8": "^0.32.0"
     }
 }

styles/src/buildTokens.ts πŸ”—

@@ -1,13 +1,13 @@
-import * as fs from "fs";
-import * as path from "path";
-import { ColorScheme, createColorScheme } from "./common";
-import { themes } from "./themes";
-import { slugify } from "./utils/slugify";
-import { colorSchemeTokens } from "./theme/tokens/colorScheme";
+import * as fs from "fs"
+import * as path from "path"
+import { ColorScheme, createColorScheme } from "./common"
+import { themes } from "./themes"
+import { slugify } from "./utils/slugify"
+import { colorSchemeTokens } from "./theme/tokens/colorScheme"
 
-const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens");
-const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json");
-const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json");
+const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens")
+const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json")
+const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json")
 
 function clearTokens(tokensDirectory: string) {
     if (!fs.existsSync(tokensDirectory)) {
@@ -22,64 +22,66 @@ function clearTokens(tokensDirectory: string) {
 }
 
 type TokenSet = {
-    id: string;
-    name: string;
-    selectedTokenSets: { [key: string]: "enabled" };
-};
+    id: string
+    name: string
+    selectedTokenSets: { [key: string]: "enabled" }
+}
 
-function buildTokenSetOrder(colorSchemes: ColorScheme[]): { tokenSetOrder: string[] } {
-    const tokenSetOrder: string[] = colorSchemes.map(
-        (scheme) => scheme.name.toLowerCase().replace(/\s+/g, "_")
-    );
-    return { tokenSetOrder };
+function buildTokenSetOrder(colorSchemes: ColorScheme[]): {
+    tokenSetOrder: string[]
+} {
+    const tokenSetOrder: string[] = colorSchemes.map((scheme) =>
+        scheme.name.toLowerCase().replace(/\s+/g, "_")
+    )
+    return { tokenSetOrder }
 }
 
 function buildThemesIndex(colorSchemes: ColorScheme[]): TokenSet[] {
     const themesIndex: TokenSet[] = colorSchemes.map((scheme, index) => {
         const id = `${scheme.isLight ? "light" : "dark"}_${scheme.name
             .toLowerCase()
-            .replace(/\s+/g, "_")}_${index}`;
-        const selectedTokenSets: { [key: string]: "enabled" } = {};
-        const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_");
-        selectedTokenSets[tokenSet] = "enabled";
+            .replace(/\s+/g, "_")}_${index}`
+        const selectedTokenSets: { [key: string]: "enabled" } = {}
+        const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_")
+        selectedTokenSets[tokenSet] = "enabled"
 
         return {
             id,
             name: `${scheme.name} - ${scheme.isLight ? "Light" : "Dark"}`,
             selectedTokenSets,
-        };
-    });
+        }
+    })
 
-    return themesIndex;
+    return themesIndex
 }
 
 function writeTokens(colorSchemes: ColorScheme[], tokensDirectory: string) {
-    clearTokens(tokensDirectory);
+    clearTokens(tokensDirectory)
 
     for (const colorScheme of colorSchemes) {
-        const fileName = slugify(colorScheme.name) + ".json";
-        const tokens = colorSchemeTokens(colorScheme);
-        const tokensJSON = JSON.stringify(tokens, null, 2);
-        const outPath = path.join(tokensDirectory, fileName);
-        fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 });
-        console.log(`- ${outPath} created`);
+        const fileName = slugify(colorScheme.name) + ".json"
+        const tokens = colorSchemeTokens(colorScheme)
+        const tokensJSON = JSON.stringify(tokens, null, 2)
+        const outPath = path.join(tokensDirectory, fileName)
+        fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 })
+        console.log(`- ${outPath} created`)
     }
 
-    const themeIndexData = buildThemesIndex(colorSchemes);
+    const themeIndexData = buildThemesIndex(colorSchemes)
 
-    const themesJSON = JSON.stringify(themeIndexData, null, 2);
-    fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 });
-    console.log(`- ${TOKENS_FILE} created`);
+    const themesJSON = JSON.stringify(themeIndexData, null, 2)
+    fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 })
+    console.log(`- ${TOKENS_FILE} created`)
 
-    const tokenSetOrderData = buildTokenSetOrder(colorSchemes);
+    const tokenSetOrderData = buildTokenSetOrder(colorSchemes)
 
-    const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2);
-    fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 });
-    console.log(`- ${METADATA_FILE} created`);
+    const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2)
+    fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 })
+    console.log(`- ${METADATA_FILE} created`)
 }
 
 const colorSchemes: ColorScheme[] = themes.map((theme) =>
     createColorScheme(theme)
-);
+)
 
-writeTokens(colorSchemes, TOKENS_DIRECTORY);
+writeTokens(colorSchemes, TOKENS_DIRECTORY)

styles/src/element/index.ts πŸ”—

@@ -0,0 +1,4 @@
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"
+
+export { interactive, toggleable }

styles/src/element/interactive.test.ts πŸ”—

@@ -0,0 +1,56 @@
+import {
+    NOT_ENOUGH_STATES_ERROR,
+    NO_DEFAULT_OR_BASE_ERROR,
+    interactive,
+} from "./interactive"
+import { describe, it, expect } from "vitest"
+
+describe("interactive", () => {
+    it("creates an Interactive<Element> with base properties and states", () => {
+        const result = interactive({
+            base: { fontSize: 10, color: "#FFFFFF" },
+            state: {
+                hovered: { color: "#EEEEEE" },
+                clicked: { color: "#CCCCCC" },
+            },
+        })
+
+        expect(result).toEqual({
+            default: { color: "#FFFFFF", fontSize: 10 },
+            hovered: { color: "#EEEEEE", fontSize: 10 },
+            clicked: { color: "#CCCCCC", fontSize: 10 },
+        })
+    })
+
+    it("creates an Interactive<Element> with no base properties", () => {
+        const result = interactive({
+            state: {
+                default: { color: "#FFFFFF", fontSize: 10 },
+                hovered: { color: "#EEEEEE" },
+                clicked: { color: "#CCCCCC" },
+            },
+        })
+
+        expect(result).toEqual({
+            default: { color: "#FFFFFF", fontSize: 10 },
+            hovered: { color: "#EEEEEE", fontSize: 10 },
+            clicked: { color: "#CCCCCC", fontSize: 10 },
+        })
+    })
+
+    it("throws error when both default and base are missing", () => {
+        const state = {
+            hovered: { color: "blue" },
+        }
+
+        expect(() => interactive({ state })).toThrow(NO_DEFAULT_OR_BASE_ERROR)
+    })
+
+    it("throws error when no other state besides default is present", () => {
+        const state = {
+            default: { fontSize: 10 },
+        }
+
+        expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR)
+    })
+})

styles/src/element/interactive.ts πŸ”—

@@ -0,0 +1,97 @@
+import merge from "ts-deepmerge"
+import { DeepPartial } from "utility-types"
+
+type InteractiveState =
+    | "default"
+    | "hovered"
+    | "clicked"
+    | "selected"
+    | "disabled"
+
+type Interactive<T> = {
+    default: T
+    hovered?: T
+    clicked?: T
+    selected?: T
+    disabled?: T
+}
+
+export const NO_DEFAULT_OR_BASE_ERROR =
+    "An interactive object must have a default state, or a base property."
+export const NOT_ENOUGH_STATES_ERROR =
+    "An interactive object must have a default and at least one other state."
+
+interface InteractiveProps<T> {
+    base?: T
+    state: Partial<Record<InteractiveState, DeepPartial<T>>>
+}
+
+/**
+ * Helper function for creating Interactive<T> objects that works with Toggle<T>-like behavior.
+ * It takes a default object to be used as the value for `default` field and fills out other fields
+ * with fields from either `base` or from the `state` object which contains values for specific states.
+ * Notably, it does not touch `hover`, `clicked`, `selected` and `disabled` states if there are no modifications for them.
+ *
+ * @param defaultObj Object to be used as the value for the `default` field.
+ * @param base Optional object containing base fields to be included in the resulting object.
+ * @param state Object containing optional modified fields to be included in the resulting object for each state.
+ * @returns Interactive<T> object with fields from `base` and `state`.
+ */
+export function interactive<T extends Object>({
+    base,
+    state,
+}: InteractiveProps<T>): Interactive<T> {
+    if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR)
+
+    let defaultState: T
+
+    if (state.default && base) {
+        defaultState = merge(base, state.default) as T
+    } else {
+        defaultState = base ? base : (state.default as T)
+    }
+
+    let interactiveObj: Interactive<T> = {
+        default: defaultState,
+    }
+
+    let stateCount = 0
+
+    if (state.hovered !== undefined) {
+        interactiveObj.hovered = merge(
+            interactiveObj.default,
+            state.hovered
+        ) as T
+        stateCount++
+    }
+
+    if (state.clicked !== undefined) {
+        interactiveObj.clicked = merge(
+            interactiveObj.default,
+            state.clicked
+        ) as T
+        stateCount++
+    }
+
+    if (state.selected !== undefined) {
+        interactiveObj.selected = merge(
+            interactiveObj.default,
+            state.selected
+        ) as T
+        stateCount++
+    }
+
+    if (state.disabled !== undefined) {
+        interactiveObj.disabled = merge(
+            interactiveObj.default,
+            state.disabled
+        ) as T
+        stateCount++
+    }
+
+    if (stateCount < 1) {
+        throw new Error(NOT_ENOUGH_STATES_ERROR)
+    }
+
+    return interactiveObj
+}

styles/src/element/toggle.test.ts πŸ”—

@@ -0,0 +1,52 @@
+import {
+    NO_ACTIVE_ERROR,
+    NO_INACTIVE_OR_BASE_ERROR,
+    toggleable,
+} from "./toggle"
+import { describe, it, expect } from "vitest"
+
+describe("toggleable", () => {
+    it("creates a Toggleable<Element> with base properties and states", () => {
+        const result = toggleable({
+            base: { background: "#000000", color: "#CCCCCC" },
+            state: {
+                active: { color: "#FFFFFF" },
+            },
+        })
+
+        expect(result).toEqual({
+            inactive: { background: "#000000", color: "#CCCCCC" },
+            active: { background: "#000000", color: "#FFFFFF" },
+        })
+    })
+
+    it("creates a Toggleable<Element> with no base properties", () => {
+        const result = toggleable({
+            state: {
+                inactive: { background: "#000000", color: "#CCCCCC" },
+                active: { background: "#000000", color: "#FFFFFF" },
+            },
+        })
+
+        expect(result).toEqual({
+            inactive: { background: "#000000", color: "#CCCCCC" },
+            active: { background: "#000000", color: "#FFFFFF" },
+        })
+    })
+
+    it("throws error when both inactive and base are missing", () => {
+        const state = {
+            active: { background: "#000000", color: "#FFFFFF" },
+        }
+
+        expect(() => toggleable({ state })).toThrow(NO_INACTIVE_OR_BASE_ERROR)
+    })
+
+    it("throws error when no active state is present", () => {
+        const state = {
+            inactive: { background: "#000000", color: "#CCCCCC" },
+        }
+
+        expect(() => toggleable({ state })).toThrow(NO_ACTIVE_ERROR)
+    })
+})

styles/src/element/toggle.ts πŸ”—

@@ -0,0 +1,47 @@
+import merge from "ts-deepmerge"
+import { DeepPartial } from "utility-types"
+
+type ToggleState = "inactive" | "active"
+
+type Toggleable<T> = Record<ToggleState, T>
+
+export const NO_INACTIVE_OR_BASE_ERROR =
+    "A toggleable object must have an inactive state, or a base property."
+export const NO_ACTIVE_ERROR = "A toggleable object must have an active state."
+
+interface ToggleableProps<T> {
+    base?: T
+    state: Partial<Record<ToggleState, DeepPartial<T>>>
+}
+
+/**
+ * Helper function for creating Toggleable objects.
+ * @template T The type of the object being toggled.
+ * @param props Object containing the base (inactive) state and state modifications to create the active state.
+ * @returns A Toggleable object containing both the inactive and active states.
+ * @example
+ * ```
+ * toggleable({
+ *   base: { background: "#000000", text: "#CCCCCC" },
+ *   state: { active: { text: "#CCCCCC" } },
+ * })
+ * ```
+ */
+export function toggleable<T extends object>(
+    props: ToggleableProps<T>
+): Toggleable<T> {
+    const { base, state } = props
+
+    if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
+    if (!state.active) throw new Error(NO_ACTIVE_ERROR)
+
+    const inactiveState = base
+        ? ((state.inactive ? merge(base, state.inactive) : base) as T)
+        : (state.inactive as T)
+
+    const toggleObj: Toggleable<T> = {
+        inactive: inactiveState,
+        active: merge(base ?? {}, state.active) as T,
+    }
+    return toggleObj
+}

styles/src/styleTree/app.ts πŸ”—

@@ -1,4 +1,3 @@
-import { text } from "./components"
 import contactFinder from "./contactFinder"
 import contactsPopover from "./contactsPopover"
 import commandPalette from "./commandPalette"

styles/src/styleTree/assistant.ts πŸ”—

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { text, border, background, foreground } from "./components"
 import editor from "./editor"
+import { interactive } from "../element"
 
 export default function assistant(colorScheme: ColorScheme) {
     const layer = colorScheme.highest
@@ -15,13 +16,28 @@ export default function assistant(colorScheme: ColorScheme) {
             background: editor(colorScheme).background,
         },
         userSender: {
-            ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
+            default: {
+                ...text(layer, "sans", "default", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
         },
         assistantSender: {
-            ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
+            default: {
+                ...text(layer, "sans", "accent", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
         },
         systemSender: {
-            ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
+            default: {
+                ...text(layer, "sans", "variant", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
         },
         sentAt: {
             margin: { top: 2, left: 8 },
@@ -30,16 +46,20 @@ export default function assistant(colorScheme: ColorScheme) {
         modelInfoContainer: {
             margin: { right: 16, top: 4 },
         },
-        model: {
-            background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
-            padding: 4,
-            cornerRadius: 4,
-            ...text(layer, "sans", "default", { size: "xs" }),
-            hover: {
-                background: background(layer, "on", "hovered"),
+        model: interactive({
+            base: {
+                background: background(layer, "on"),
+                border: border(layer, "on", { overlay: true }),
+                padding: 4,
+                cornerRadius: 4,
+                ...text(layer, "sans", "default", { size: "xs" }),
             },
-        },
+            state: {
+                hovered: {
+                    background: background(layer, "on", "hovered"),
+                },
+            },
+        }),
         remainingTokens: {
             background: background(layer, "on"),
             border: border(layer, "on", { overlay: true }),

styles/src/styleTree/commandPalette.ts πŸ”—

@@ -1,12 +1,13 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { text, background } from "./components"
+import { toggleable } from "../element"
 
 export default function commandPalette(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
-    return {
-        keystrokeSpacing: 8,
-        key: {
+
+    const key = toggleable({
+        base: {
             text: text(layer, "mono", "variant", "default", { size: "xs" }),
             cornerRadius: 2,
             background: background(layer, "on"),
@@ -21,10 +22,21 @@ export default function commandPalette(colorScheme: ColorScheme) {
                 bottom: 1,
                 left: 2,
             },
+        },
+        state: {
             active: {
                 text: text(layer, "mono", "on", "default", { size: "xs" }),
                 background: withOpacity(background(layer, "on"), 0.2),
             },
         },
+    })
+
+    return {
+        keystrokeSpacing: 8,
+        // TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
+        key: {
+            inactive: { ...key.inactive },
+            active: key.active,
+        },
     }
 }

styles/src/styleTree/components.ts πŸ”—

@@ -85,7 +85,7 @@ export function foreground(
     return getStyle(layer, styleSetOrStyles, style).foreground
 }
 
-interface Text {
+interface Text extends Object {
     family: keyof typeof fontFamilies
     color: string
     size: number

styles/src/styleTree/contactList.ts πŸ”—

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
-
+import { interactive, toggleable } from "../element"
 export default function contactsPanel(colorScheme: ColorScheme) {
     const nameMargin = 8
     const sidePadding = 12
@@ -71,47 +71,85 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         },
         rowHeight: 28,
         sectionIconSize: 8,
-        headerRow: {
-            ...text(layer, "mono", { size: "sm" }),
-            margin: { top: 14 },
-            padding: {
-                left: sidePadding,
-                right: sidePadding,
-            },
-            active: {
-                ...text(layer, "mono", "active", { size: "sm" }),
-                background: background(layer, "active"),
-            },
-        },
-        leaveCall: {
-            background: background(layer),
-            border: border(layer),
-            cornerRadius: 6,
-            margin: {
-                top: 1,
-            },
-            padding: {
-                top: 1,
-                bottom: 1,
-                left: 7,
-                right: 7,
-            },
-            ...text(layer, "sans", "variant", { size: "xs" }),
-            hover: {
-                ...text(layer, "sans", "hovered", { size: "xs" }),
-                background: background(layer, "hovered"),
-                border: border(layer, "hovered"),
-            },
-        },
+        headerRow: toggleable({
+            base: interactive({
+                base: {
+                    ...text(layer, "mono", { size: "sm" }),
+                    margin: { top: 14 },
+                    padding: {
+                        left: sidePadding,
+                        right: sidePadding,
+                    },
+                    background: background(layer, "default"), // posiewic: breaking change
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
+            }),
+            state: {
+                active: {
+                    default: {
+                        ...text(layer, "mono", "active", { size: "sm" }),
+                        background: background(layer, "active"),
+                    },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                },
+            },
+        }),
+        leaveCall: interactive({
+            base: {
+                background: background(layer),
+                border: border(layer),
+                cornerRadius: 6,
+                margin: {
+                    top: 1,
+                },
+                padding: {
+                    top: 1,
+                    bottom: 1,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "variant", { size: "xs" }),
+            },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "hovered", { size: "xs" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "hovered"),
+                },
+            },
+        }),
         contactRow: {
-            padding: {
-                left: sidePadding,
-                right: sidePadding,
+            inactive: {
+                default: {
+                    padding: {
+                        left: sidePadding,
+                        right: sidePadding,
+                    },
+                },
             },
             active: {
-                background: background(layer, "active"),
+                default: {
+                    background: background(layer, "active"),
+                    padding: {
+                        left: sidePadding,
+                        right: sidePadding,
+                    },
+                },
             },
         },
+
         contactAvatar: {
             cornerRadius: 10,
             width: 18,
@@ -135,12 +173,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
             },
         },
         contactButtonSpacing: nameMargin,
-        contactButton: {
-            ...contactButton,
-            hover: {
-                background: background(layer, "hovered"),
-            },
-        },
+        contactButton: interactive({
+            base: { ...contactButton },
+            state: {
+                hovered: {
+                    background: background(layer, "hovered"),
+                },
+            },
+        }),
         disabledButton: {
             ...contactButton,
             background: background(layer, "on"),
@@ -149,34 +189,52 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         callingIndicator: {
             ...text(layer, "mono", "variant", { size: "xs" }),
         },
-        treeBranch: {
-            color: borderColor(layer),
-            width: 1,
-            hover: {
-                color: borderColor(layer),
-            },
-            active: {
-                color: borderColor(layer),
-            },
-        },
-        projectRow: {
-            ...projectRow,
-            background: background(layer),
-            icon: {
-                margin: { left: nameMargin },
-                color: foreground(layer, "variant"),
-                width: 12,
-            },
-            name: {
-                ...projectRow.name,
-                ...text(layer, "mono", { size: "sm" }),
-            },
-            hover: {
-                background: background(layer, "hovered"),
-            },
-            active: {
-                background: background(layer, "active"),
+        treeBranch: toggleable({
+            base: interactive({
+                base: {
+                    color: borderColor(layer),
+                    width: 1,
+                },
+                state: {
+                    hovered: {
+                        color: borderColor(layer),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        color: borderColor(layer),
+                    },
+                },
+            },
+        }),
+        projectRow: toggleable({
+            base: interactive({
+                base: {
+                    ...projectRow,
+                    background: background(layer),
+                    icon: {
+                        margin: { left: nameMargin },
+                        color: foreground(layer, "variant"),
+                        width: 12,
+                    },
+                    name: {
+                        ...projectRow.name,
+                        ...text(layer, "mono", { size: "sm" }),
+                    },
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: { background: background(layer, "active") },
+                },
             },
-        },
+        }),
     }
 }

styles/src/styleTree/contactNotification.ts πŸ”—

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, foreground, text } from "./components"
-
+import { interactive } from "../element"
 const avatarSize = 12
 const headerPadding = 8
 
@@ -21,24 +21,32 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
             ...text(layer, "sans", { size: "xs" }),
             margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
         },
-        button: {
-            ...text(layer, "sans", "on", { size: "xs" }),
-            background: background(layer, "on"),
-            padding: 4,
-            cornerRadius: 6,
-            margin: { left: 6 },
-            hover: {
-                background: background(layer, "on", "hovered"),
+        button: interactive({
+            base: {
+                ...text(layer, "sans", "on", { size: "xs" }),
+                background: background(layer, "on"),
+                padding: 4,
+                cornerRadius: 6,
+                margin: { left: 6 },
             },
-        },
+
+            state: {
+                hovered: {
+                    background: background(layer, "on", "hovered"),
+                },
+            },
+        }),
+
         dismissButton: {
-            color: foreground(layer, "variant"),
-            iconWidth: 8,
-            iconHeight: 8,
-            buttonWidth: 8,
-            buttonHeight: 8,
-            hover: {
-                color: foreground(layer, "hovered"),
+            default: {
+                color: foreground(layer, "variant"),
+                iconWidth: 8,
+                iconHeight: 8,
+                buttonWidth: 8,
+                buttonHeight: 8,
+                hover: {
+                    color: foreground(layer, "hovered"),
+                },
             },
         },
     }

styles/src/styleTree/contextMenu.ts πŸ”—

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, text } from "./components"
+import { interactive, toggleable } from "../element"
 
 export default function contextMenu(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
@@ -10,37 +11,54 @@ export default function contextMenu(colorScheme: ColorScheme) {
         shadow: colorScheme.popoverShadow,
         border: border(layer),
         keystrokeMargin: 30,
-        item: {
-            iconSpacing: 8,
-            iconWidth: 14,
-            padding: { left: 6, right: 6, top: 2, bottom: 2 },
-            cornerRadius: 6,
-            label: text(layer, "sans", { size: "sm" }),
-            keystroke: {
-                ...text(layer, "sans", "variant", {
-                    size: "sm",
-                    weight: "bold",
-                }),
-                padding: { left: 3, right: 3 },
-            },
-            hover: {
-                background: background(layer, "hovered"),
-                label: text(layer, "sans", "hovered", { size: "sm" }),
-                keystroke: {
-                    ...text(layer, "sans", "hovered", {
-                        size: "sm",
-                        weight: "bold",
-                    }),
-                    padding: { left: 3, right: 3 },
+        item: toggleable({
+            base: interactive({
+                base: {
+                    iconSpacing: 8,
+                    iconWidth: 14,
+                    padding: { left: 6, right: 6, top: 2, bottom: 2 },
+                    cornerRadius: 6,
+                    label: text(layer, "sans", { size: "sm" }),
+                    keystroke: {
+                        ...text(layer, "sans", "variant", {
+                            size: "sm",
+                            weight: "bold",
+                        }),
+                        padding: { left: 3, right: 3 },
+                    },
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                        label: text(layer, "sans", "hovered", { size: "sm" }),
+                        keystroke: {
+                            ...text(layer, "sans", "hovered", {
+                                size: "sm",
+                                weight: "bold",
+                            }),
+                            padding: { left: 3, right: 3 },
+                        },
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        background: background(layer, "active"),
+                    },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                    clicked: {
+                        background: background(layer, "pressed"),
+                    },
                 },
             },
-            active: {
-                background: background(layer, "active"),
-            },
-            activeHover: {
-                background: background(layer, "active"),
-            },
-        },
+        }),
+
         separator: {
             background: borderColor(layer),
             margin: { top: 2, bottom: 2 },

styles/src/styleTree/copilot.ts πŸ”—

@@ -1,60 +1,69 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, svg, text } from "./components"
-
+import { interactive } from "../element"
 export default function copilot(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
 
     let content_width = 264
 
-    let ctaButton = {
+    let ctaButton =
         // Copied from welcome screen. FIXME: Move this into a ZDS component
-        background: background(layer),
-        border: border(layer, "default"),
-        cornerRadius: 4,
-        margin: {
-            top: 4,
-            bottom: 4,
-            left: 8,
-            right: 8,
-        },
-        padding: {
-            top: 3,
-            bottom: 3,
-            left: 7,
-            right: 7,
-        },
-        ...text(layer, "sans", "default", { size: "sm" }),
-        hover: {
-            ...text(layer, "sans", "default", { size: "sm" }),
-            background: background(layer, "hovered"),
-            border: border(layer, "active"),
-        },
-    }
+        interactive({
+            base: {
+                background: background(layer),
+                border: border(layer, "default"),
+                cornerRadius: 4,
+                margin: {
+                    top: 4,
+                    bottom: 4,
+                    left: 8,
+                    right: 8,
+                },
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "default", { size: "sm" }),
+            },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "default", { size: "sm" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "active"),
+                },
+            },
+        })
 
     return {
-        outLinkIcon: {
-            icon: svg(
-                foreground(layer, "variant"),
-                "icons/link_out_12.svg",
-                12,
-                12
-            ),
-            container: {
-                cornerRadius: 6,
-                padding: { left: 6 },
-            },
-            hover: {
+        outLinkIcon: interactive({
+            base: {
                 icon: svg(
-                    foreground(layer, "hovered"),
+                    foreground(layer, "variant"),
                     "icons/link_out_12.svg",
                     12,
                     12
                 ),
+                container: {
+                    cornerRadius: 6,
+                    padding: { left: 6 },
+                },
             },
-        },
+            state: {
+                hovered: {
+                    icon: {
+                        color: foreground(layer, "hovered"),
+                    },
+                },
+            },
+        }),
+
         modal: {
             titleText: {
-                ...text(layer, "sans", { size: "xs", weight: "bold" }),
+                default: {
+                    ...text(layer, "sans", { size: "xs", weight: "bold" }),
+                },
             },
             titlebar: {
                 background: background(colorScheme.lowest),
@@ -75,42 +84,46 @@ export default function copilot(colorScheme: ColorScheme) {
                     bottom: 8,
                 },
             },
-            closeIcon: {
-                icon: svg(
-                    foreground(layer, "variant"),
-                    "icons/x_mark_8.svg",
-                    8,
-                    8
-                ),
-                container: {
-                    cornerRadius: 2,
-                    padding: {
-                        top: 4,
-                        bottom: 4,
-                        left: 4,
-                        right: 4,
-                    },
-                    margin: {
-                        right: 0,
-                    },
-                },
-                hover: {
+            closeIcon: interactive({
+                base: {
                     icon: svg(
-                        foreground(layer, "on"),
+                        foreground(layer, "variant"),
                         "icons/x_mark_8.svg",
                         8,
                         8
                     ),
+                    container: {
+                        cornerRadius: 2,
+                        padding: {
+                            top: 4,
+                            bottom: 4,
+                            left: 4,
+                            right: 4,
+                        },
+                        margin: {
+                            right: 0,
+                        },
+                    },
                 },
-                clicked: {
-                    icon: svg(
-                        foreground(layer, "base"),
-                        "icons/x_mark_8.svg",
-                        8,
-                        8
-                    ),
+                state: {
+                    hovered: {
+                        icon: svg(
+                            foreground(layer, "on"),
+                            "icons/x_mark_8.svg",
+                            8,
+                            8
+                        ),
+                    },
+                    clicked: {
+                        icon: svg(
+                            foreground(layer, "base"),
+                            "icons/x_mark_8.svg",
+                            8,
+                            8
+                        ),
+                    },
                 },
-            },
+            }),
             dimensions: {
                 width: 280,
                 height: 280,
@@ -185,28 +198,32 @@ export default function copilot(colorScheme: ColorScheme) {
                         },
                     },
                     right: (content_width * 1) / 3,
-                    rightContainer: {
-                        border: border(colorScheme.lowest, "inverted", {
-                            bottom: false,
-                            right: false,
-                            top: false,
-                            left: true,
-                        }),
-                        padding: {
-                            top: 3,
-                            bottom: 5,
-                            left: 8,
-                            right: 0,
-                        },
-                        hover: {
-                            border: border(layer, "active", {
+                    rightContainer: interactive({
+                        base: {
+                            border: border(colorScheme.lowest, "inverted", {
                                 bottom: false,
                                 right: false,
                                 top: false,
                                 left: true,
                             }),
+                            padding: {
+                                top: 3,
+                                bottom: 5,
+                                left: 8,
+                                right: 0,
+                            },
                         },
-                    },
+                        state: {
+                            hovered: {
+                                border: border(layer, "active", {
+                                    bottom: false,
+                                    right: false,
+                                    top: false,
+                                    left: true,
+                                }),
+                            },
+                        },
+                    }),
                 },
             },
 

styles/src/styleTree/editor.ts πŸ”—

@@ -4,6 +4,7 @@ import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
 import { buildSyntax } from "../theme/syntax"
+import { interactive, toggleable } from "../element"
 
 export default function editor(colorScheme: ColorScheme) {
     const { isLight } = colorScheme
@@ -48,46 +49,76 @@ export default function editor(colorScheme: ColorScheme) {
         // Inline autocomplete suggestions, Co-pilot suggestions, etc.
         suggestion: syntax.predictive,
         codeActions: {
-            indicator: {
-                color: foreground(layer, "variant"),
-
-                clicked: {
-                    color: foreground(layer, "base"),
-                },
-                hover: {
-                    color: foreground(layer, "on"),
-                },
-                active: {
-                    color: foreground(layer, "on"),
+            indicator: toggleable({
+                base: interactive({
+                    base: {
+                        color: foreground(layer, "variant"),
+                    },
+                    state: {
+                        hovered: {
+                            color: foreground(layer, "variant", "hovered"),
+                        },
+                        clicked: {
+                            color: foreground(layer, "variant", "pressed"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            color: foreground(layer, "accent"),
+                        },
+                        hovered: {
+                            color: foreground(layer, "accent", "hovered"),
+                        },
+                        clicked: {
+                            color: foreground(layer, "accent", "pressed"),
+                        },
+                    },
                 },
-            },
+            }),
+
             verticalScale: 0.55,
         },
         folds: {
             iconMarginScale: 2.5,
             foldedIcon: "icons/chevron_right_8.svg",
             foldableIcon: "icons/chevron_down_8.svg",
-            indicator: {
-                color: foreground(layer, "variant"),
-
-                clicked: {
-                    color: foreground(layer, "base"),
-                },
-                hover: {
-                    color: foreground(layer, "on"),
-                },
-                active: {
-                    color: foreground(layer, "on"),
+            indicator: toggleable({
+                base: interactive({
+                    base: {
+                        color: foreground(layer, "variant"),
+                    },
+                    state: {
+                        hovered: {
+                            color: foreground(layer, "on"),
+                        },
+                        clicked: {
+                            color: foreground(layer, "base"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            color: foreground(layer, "default"),
+                        },
+                        hovered: {
+                            color: foreground(layer, "variant"),
+                        },
+                    },
                 },
-            },
+            }),
             ellipses: {
                 textColor: colorScheme.ramps.neutral(0.71).hex(),
                 cornerRadiusFactor: 0.15,
                 background: {
                     // Copied from hover_popover highlight
-                    color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
+                    default: {
+                        color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
+                    },
 
-                    hover: {
+                    hovered: {
                         color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
                     },
 
@@ -223,21 +254,26 @@ export default function editor(colorScheme: ColorScheme) {
             color: syntax.linkUri.color,
             underline: syntax.linkUri.underline,
         },
-        jumpIcon: {
-            color: foreground(layer, "on"),
-            iconWidth: 20,
-            buttonWidth: 20,
-            cornerRadius: 6,
-            padding: {
-                top: 6,
-                bottom: 6,
-                left: 6,
-                right: 6,
+        jumpIcon: interactive({
+            base: {
+                color: foreground(layer, "on"),
+                iconWidth: 20,
+                buttonWidth: 20,
+                cornerRadius: 6,
+                padding: {
+                    top: 6,
+                    bottom: 6,
+                    left: 6,
+                    right: 6,
+                },
             },
-            hover: {
-                background: background(layer, "on", "hovered"),
+            state: {
+                hovered: {
+                    background: background(layer, "on", "hovered"),
+                },
             },
-        },
+        }),
+
         scrollbar: {
             width: 12,
             minHeightFactor: 1.0,

styles/src/styleTree/feedback.ts πŸ”—

@@ -1,35 +1,40 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
+import { interactive } from "../element"
 
 export default function feedback(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
 
     return {
-        submit_button: {
-            ...text(layer, "mono", "on"),
-            background: background(layer, "on"),
-            cornerRadius: 6,
-            border: border(layer, "on"),
-            margin: {
-                right: 4,
+        submit_button: interactive({
+            base: {
+                ...text(layer, "mono", "on"),
+                background: background(layer, "on"),
+                cornerRadius: 6,
+                border: border(layer, "on"),
+                margin: {
+                    right: 4,
+                },
+                padding: {
+                    bottom: 2,
+                    left: 10,
+                    right: 10,
+                    top: 2,
+                },
             },
-            padding: {
-                bottom: 2,
-                left: 10,
-                right: 10,
-                top: 2,
+            state: {
+                clicked: {
+                    ...text(layer, "mono", "on", "pressed"),
+                    background: background(layer, "on", "pressed"),
+                    border: border(layer, "on", "pressed"),
+                },
+                hovered: {
+                    ...text(layer, "mono", "on", "hovered"),
+                    background: background(layer, "on", "hovered"),
+                    border: border(layer, "on", "hovered"),
+                },
             },
-            clicked: {
-                ...text(layer, "mono", "on", "pressed"),
-                background: background(layer, "on", "pressed"),
-                border: border(layer, "on", "pressed"),
-            },
-            hover: {
-                ...text(layer, "mono", "on", "hovered"),
-                background: background(layer, "on", "hovered"),
-                border: border(layer, "on", "hovered"),
-            },
-        },
+        }),
         button_margin: 8,
         info_text_default: text(layer, "sans", "default", { size: "xs" }),
         link_text_default: text(layer, "sans", "default", {

styles/src/styleTree/picker.ts πŸ”—

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, text } from "./components"
+import { interactive, toggleable } from "../element"
 
 export default function picker(colorScheme: ColorScheme): any {
     let layer = colorScheme.lowest
@@ -38,35 +39,65 @@ export default function picker(colorScheme: ColorScheme): any {
             ...container,
             padding: {},
         },
-        item: {
-            padding: {
-                bottom: 4,
-                left: 12,
-                right: 12,
-                top: 4,
-            },
-            margin: {
-                top: 1,
-                left: 4,
-                right: 4,
-            },
-            cornerRadius: 8,
-            text: text(layer, "sans", "variant"),
-            highlightText: text(layer, "sans", "accent", { weight: "bold" }),
-            active: {
-                background: withOpacity(
-                    background(layer, "base", "active"),
-                    0.5
-                ),
-                text: text(layer, "sans", "base", "active"),
-                highlightText: text(layer, "sans", "accent", {
-                    weight: "bold",
-                }),
+        item: toggleable({
+            base: interactive({
+                base: {
+                    padding: {
+                        bottom: 4,
+                        left: 12,
+                        right: 12,
+                        top: 4,
+                    },
+                    margin: {
+                        top: 1,
+                        left: 4,
+                        right: 4,
+                    },
+                    cornerRadius: 8,
+                    text: text(layer, "sans", "variant"),
+                    highlightText: text(layer, "sans", "accent", {
+                        weight: "bold",
+                    }),
+                },
+                state: {
+                    hovered: {
+                        background: withOpacity(
+                            background(layer, "hovered"),
+                            0.5
+                        ),
+                    },
+                    clicked: {
+                        background: withOpacity(
+                            background(layer, "pressed"),
+                            0.5
+                        ),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        background: withOpacity(
+                            background(layer, "base", "active"),
+                            0.5
+                        ),
+                    },
+                    hovered: {
+                        background: withOpacity(
+                            background(layer, "hovered"),
+                            0.5
+                        ),
+                    },
+                    clicked: {
+                        background: withOpacity(
+                            background(layer, "pressed"),
+                            0.5
+                        ),
+                    },
+                },
             },
-            hover: {
-                background: withOpacity(background(layer, "hovered"), 0.5),
-            },
-        },
+        }),
+
         inputEditor,
         emptyInputEditor,
         noMatches: {

styles/src/styleTree/projectPanel.ts πŸ”—

@@ -1,7 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
-
+import { interactive, toggleable } from "../element"
 export default function projectPanel(colorScheme: ColorScheme) {
     const { isLight } = colorScheme
 
@@ -28,48 +28,79 @@ export default function projectPanel(colorScheme: ColorScheme) {
         },
     }
 
-    let entry = {
-        ...baseEntry,
-        text: text(layer, "mono", "variant", { size: "sm" }),
-        hover: {
-            background: background(layer, "variant", "hovered"),
+    const default_entry = interactive({
+        base: {
+            ...baseEntry,
+            text: text(layer, "mono", "variant", { size: "sm" }),
+            status,
         },
-        active: {
-            background: colorScheme.isLight
-                ? withOpacity(background(layer, "active"), 0.5)
-                : background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
+        state: {
+            default: {
+                background: background(layer),
+            },
+            hovered: {
+                background: background(layer, "variant", "hovered"),
+            },
+            clicked: {
+                background: background(layer, "variant", "pressed"),
+            },
         },
-        activeHover: {
-            background: background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
+    })
+
+    let entry = toggleable({
+        base: default_entry,
+        state: {
+            active: interactive({
+                base: {
+                    ...default_entry,
+                },
+                state: {
+                    default: {
+                        background: background(colorScheme.lowest),
+                    },
+                    hovered: {
+                        background: background(colorScheme.lowest, "hovered"),
+                    },
+                    clicked: {
+                        background: background(colorScheme.lowest, "pressed"),
+                    },
+                },
+            }),
         },
-        status,
-    }
+    })
 
     return {
-        openProjectButton: {
-            background: background(layer),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            margin: {
-                top: 16,
-                left: 16,
-                right: 16,
-            },
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
-            ...text(layer, "sans", "default", { size: "sm" }),
-            hover: {
-                ...text(layer, "sans", "default", { size: "sm" }),
-                background: background(layer, "hovered"),
+        openProjectButton: interactive({
+            base: {
+                background: background(layer),
                 border: border(layer, "active"),
+                cornerRadius: 4,
+                margin: {
+                    top: 16,
+                    left: 16,
+                    right: 16,
+                },
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "default", { size: "sm" }),
             },
-        },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "default", { size: "sm" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "active"),
+                },
+                clicked: {
+                    ...text(layer, "sans", "default", { size: "sm" }),
+                    background: background(layer, "pressed"),
+                    border: border(layer, "active"),
+                },
+            },
+        }),
         background: background(layer),
         padding: { left: 6, right: 6, top: 0, bottom: 6 },
         indentWidth: 12,
@@ -94,8 +125,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
             ...entry,
             text: text(layer, "mono", "disabled"),
             active: {
-                background: background(layer, "active"),
-                text: text(layer, "mono", "disabled", { size: "sm" }),
+                ...entry.active,
+                default: {
+                    ...entry.active.default,
+                    background: background(layer, "active"),
+                    text: text(layer, "mono", "disabled", { size: "sm" }),
+                },
             },
         },
         filenameEditor: {

styles/src/styleTree/search.ts πŸ”—

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
+import { interactive, toggleable } from "../element"
 
 export default function search(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
@@ -35,36 +36,50 @@ export default function search(colorScheme: ColorScheme) {
     return {
         // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
         matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
-        optionButton: {
-            ...text(layer, "mono", "on"),
-            background: background(layer, "on"),
-            cornerRadius: 6,
-            border: border(layer, "on"),
-            margin: {
-                right: 4,
-            },
-            padding: {
-                bottom: 2,
-                left: 10,
-                right: 10,
-                top: 2,
-            },
-            active: {
-                ...text(layer, "mono", "on", "inverted"),
-                background: background(layer, "on", "inverted"),
-                border: border(layer, "on", "inverted"),
-            },
-            clicked: {
-                ...text(layer, "mono", "on", "pressed"),
-                background: background(layer, "on", "pressed"),
-                border: border(layer, "on", "pressed"),
+        optionButton: toggleable({
+            base: interactive({
+                base: {
+                    ...text(layer, "mono", "on"),
+                    background: background(layer, "on"),
+                    cornerRadius: 6,
+                    border: border(layer, "on"),
+                    margin: {
+                        right: 4,
+                    },
+                    padding: {
+                        bottom: 2,
+                        left: 10,
+                        right: 10,
+                        top: 2,
+                    },
+                },
+                state: {
+                    hovered: {
+                        ...text(layer, "mono", "on", "hovered"),
+                        background: background(layer, "on", "hovered"),
+                        border: border(layer, "on", "hovered"),
+                    },
+                    clicked: {
+                        ...text(layer, "mono", "on", "pressed"),
+                        background: background(layer, "on", "pressed"),
+                        border: border(layer, "on", "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        ...text(layer, "mono", "accent"),
+                    },
+                    hovered: {
+                        ...text(layer, "mono", "accent", "hovered"),
+                    },
+                    clicked: {
+                        ...text(layer, "mono", "accent", "pressed"),
+                    },
+                },
             },
-            hover: {
-                ...text(layer, "mono", "on", "hovered"),
-                background: background(layer, "on", "hovered"),
-                border: border(layer, "on", "hovered"),
-            },
-        },
+        }),
         editor,
         invalidEditor: {
             ...editor,
@@ -97,17 +112,24 @@ export default function search(colorScheme: ColorScheme) {
             ...text(layer, "mono", "on"),
             size: 18,
         },
-        dismissButton: {
-            color: foreground(layer, "variant"),
-            iconWidth: 12,
-            buttonWidth: 14,
-            padding: {
-                left: 10,
-                right: 10,
+        dismissButton: interactive({
+            base: {
+                color: foreground(layer, "variant"),
+                iconWidth: 12,
+                buttonWidth: 14,
+                padding: {
+                    left: 10,
+                    right: 10,
+                },
             },
-            hover: {
-                color: foreground(layer, "hovered"),
+            state: {
+                hovered: {
+                    color: foreground(layer, "hovered"),
+                },
+                clicked: {
+                    color: foreground(layer, "pressed"),
+                },
             },
-        },
+        }),
     }
 }

styles/src/styleTree/simpleMessageNotification.ts πŸ”—

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
+import { interactive } from "../element"
 
 const headerPadding = 8
 
@@ -12,33 +13,41 @@ export default function simpleMessageNotification(
             ...text(layer, "sans", { size: "xs" }),
             margin: { left: headerPadding, right: headerPadding },
         },
-        actionMessage: {
-            ...text(layer, "sans", { size: "xs" }),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
-
-            margin: { left: headerPadding, top: 6, bottom: 6 },
-            hover: {
-                ...text(layer, "sans", "default", { size: "xs" }),
-                background: background(layer, "hovered"),
+        actionMessage: interactive({
+            base: {
+                ...text(layer, "sans", { size: "xs" }),
                 border: border(layer, "active"),
+                cornerRadius: 4,
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+
+                margin: { left: headerPadding, top: 6, bottom: 6 },
             },
-        },
-        dismissButton: {
-            color: foreground(layer),
-            iconWidth: 8,
-            iconHeight: 8,
-            buttonWidth: 8,
-            buttonHeight: 8,
-            hover: {
-                color: foreground(layer, "hovered"),
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "default", { size: "xs" }),
+                    background: background(layer, "hovered"),
+                    border: border(layer, "active"),
+                },
             },
-        },
+        }),
+        dismissButton: interactive({
+            base: {
+                color: foreground(layer),
+                iconWidth: 8,
+                iconHeight: 8,
+                buttonWidth: 8,
+                buttonHeight: 8,
+            },
+            state: {
+                hovered: {
+                    color: foreground(layer, "hovered"),
+                },
+            },
+        }),
     }
 }

styles/src/styleTree/statusBar.ts πŸ”—

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
-
+import { interactive, toggleable } from "../element"
 export default function statusBar(colorScheme: ColorScheme) {
     let layer = colorScheme.lowest
 
@@ -25,95 +25,123 @@ export default function statusBar(colorScheme: ColorScheme) {
         },
         border: border(layer, { top: true, overlay: true }),
         cursorPosition: text(layer, "sans", "variant"),
-        activeLanguage: {
-            padding: { left: 6, right: 6 },
-            ...text(layer, "sans", "variant"),
-            hover: {
-                ...text(layer, "sans", "on"),
+        activeLanguage: interactive({
+            base: {
+                padding: { left: 6, right: 6 },
+                ...text(layer, "sans", "variant"),
             },
-        },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "on"),
+                },
+            },
+        }),
         autoUpdateProgressMessage: text(layer, "sans", "variant"),
         autoUpdateDoneMessage: text(layer, "sans", "variant"),
-        lspStatus: {
-            ...diagnosticStatusContainer,
-            iconSpacing: 4,
-            iconWidth: 14,
-            height: 18,
-            message: text(layer, "sans"),
-            iconColor: foreground(layer),
-            hover: {
+        lspStatus: interactive({
+            base: {
+                ...diagnosticStatusContainer,
+                iconSpacing: 4,
+                iconWidth: 14,
+                height: 18,
                 message: text(layer, "sans"),
                 iconColor: foreground(layer),
-                background: background(layer, "hovered"),
             },
-        },
-        diagnosticMessage: {
-            ...text(layer, "sans"),
-            hover: text(layer, "sans", "hovered"),
-        },
-        diagnosticSummary: {
-            height: 20,
-            iconWidth: 16,
-            iconSpacing: 2,
-            summarySpacing: 6,
-            text: text(layer, "sans", { size: "sm" }),
-            iconColorOk: foreground(layer, "variant"),
-            iconColorWarning: foreground(layer, "warning"),
-            iconColorError: foreground(layer, "negative"),
-            containerOk: {
-                cornerRadius: 6,
-                padding: { top: 3, bottom: 3, left: 7, right: 7 },
-            },
-            containerWarning: {
-                ...diagnosticStatusContainer,
-                background: background(layer, "warning"),
-                border: border(layer, "warning"),
+            state: {
+                hovered: {
+                    message: text(layer, "sans"),
+                    iconColor: foreground(layer),
+                    background: background(layer, "hovered"),
+                },
             },
-            containerError: {
-                ...diagnosticStatusContainer,
-                background: background(layer, "negative"),
-                border: border(layer, "negative"),
+        }),
+        diagnosticMessage: interactive({
+            base: {
+                ...text(layer, "sans"),
             },
-            hover: {
-                iconColorOk: foreground(layer, "on"),
+            state: { hovered: text(layer, "sans", "hovered") },
+        }),
+        diagnosticSummary: interactive({
+            base: {
+                height: 20,
+                iconWidth: 16,
+                iconSpacing: 2,
+                summarySpacing: 6,
+                text: text(layer, "sans", { size: "sm" }),
+                iconColorOk: foreground(layer, "variant"),
+                iconColorWarning: foreground(layer, "warning"),
+                iconColorError: foreground(layer, "negative"),
                 containerOk: {
                     cornerRadius: 6,
                     padding: { top: 3, bottom: 3, left: 7, right: 7 },
-                    background: background(layer, "on", "hovered"),
                 },
                 containerWarning: {
                     ...diagnosticStatusContainer,
-                    background: background(layer, "warning", "hovered"),
-                    border: border(layer, "warning", "hovered"),
+                    background: background(layer, "warning"),
+                    border: border(layer, "warning"),
                 },
                 containerError: {
                     ...diagnosticStatusContainer,
-                    background: background(layer, "negative", "hovered"),
-                    border: border(layer, "negative", "hovered"),
+                    background: background(layer, "negative"),
+                    border: border(layer, "negative"),
                 },
             },
-        },
+            state: {
+                hovered: {
+                    iconColorOk: foreground(layer, "on"),
+                    containerOk: {
+                        background: background(layer, "on", "hovered"),
+                    },
+                    containerWarning: {
+                        background: background(layer, "warning", "hovered"),
+                        border: border(layer, "warning", "hovered"),
+                    },
+                    containerError: {
+                        background: background(layer, "negative", "hovered"),
+                        border: border(layer, "negative", "hovered"),
+                    },
+                },
+            },
+        }),
         panelButtons: {
             groupLeft: {},
             groupBottom: {},
             groupRight: {},
-            button: {
-                ...statusContainer,
-                iconSize: 16,
-                iconColor: foreground(layer, "variant"),
-                label: {
-                    margin: { left: 6 },
-                    ...text(layer, "sans", { size: "sm" }),
-                },
-                hover: {
-                    iconColor: foreground(layer, "hovered"),
-                    background: background(layer, "variant"),
+            button: toggleable({
+                base: interactive({
+                    base: {
+                        ...statusContainer,
+                        iconSize: 16,
+                        iconColor: foreground(layer, "variant"),
+                        label: {
+                            margin: { left: 6 },
+                            ...text(layer, "sans", { size: "sm" }),
+                        },
+                    },
+                    state: {
+                        hovered: {
+                            iconColor: foreground(layer, "hovered"),
+                            background: background(layer, "variant"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            iconColor: foreground(layer, "active"),
+                            background: background(layer, "active"),
+                        },
+                        hovered: {
+                            iconColor: foreground(layer, "hovered"),
+                            background: background(layer, "hovered"),
+                        },
+                        clicked: {
+                            iconColor: foreground(layer, "pressed"),
+                            background: background(layer, "pressed"),
+                        },
+                    },
                 },
-                active: {
-                    iconColor: foreground(layer, "active"),
-                    background: background(layer, "active"),
-                },
-            },
+            }),
             badge: {
                 cornerRadius: 3,
                 padding: 2,

styles/src/styleTree/tabBar.ts πŸ”—

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
+import { interactive, toggleable } from "../element"
 
 export default function tabBar(colorScheme: ColorScheme) {
     const height = 32
@@ -87,17 +88,36 @@ export default function tabBar(colorScheme: ColorScheme) {
             inactiveTab: inactivePaneInactiveTab,
         },
         draggedTab,
-        paneButton: {
-            color: foreground(layer, "variant"),
-            iconWidth: 12,
-            buttonWidth: activePaneActiveTab.height,
-            hover: {
-                color: foreground(layer, "hovered"),
+        paneButton: toggleable({
+            base: interactive({
+                base: {
+                    color: foreground(layer, "variant"),
+                    iconWidth: 12,
+                    buttonWidth: activePaneActiveTab.height,
+                },
+                state: {
+                    hovered: {
+                        color: foreground(layer, "hovered"),
+                    },
+                    clicked: {
+                        color: foreground(layer, "pressed"),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        color: foreground(layer, "accent"),
+                    },
+                    hovered: {
+                        color: foreground(layer, "hovered"),
+                    },
+                    clicked: {
+                        color: foreground(layer, "pressed"),
+                    },
+                },
             },
-            active: {
-                color: foreground(layer, "accent"),
-            },
-        },
+        }),
         paneButtonContainer: {
             background: tab.background,
             border: {

styles/src/styleTree/toggle.ts πŸ”—

@@ -0,0 +1,47 @@
+import merge from "ts-deepmerge"
+
+type ToggleState = "inactive" | "active"
+
+type Toggleable<T> = Record<ToggleState, T>
+
+const NO_INACTIVE_OR_BASE_ERROR =
+    "A toggleable object must have an inactive state, or a base property."
+const NO_ACTIVE_ERROR = "A toggleable object must have an active state."
+
+interface ToggleableProps<T> {
+    base?: T
+    state: Partial<Record<ToggleState, T>>
+}
+
+/**
+ * Helper function for creating Toggleable objects.
+ * @template T The type of the object being toggled.
+ * @param props Object containing the base (inactive) state and state modifications to create the active state.
+ * @returns A Toggleable object containing both the inactive and active states.
+ * @example
+ * ```
+ * toggleable({
+ *   base: { background: "#000000", text: "#CCCCCC" },
+ *   state: { active: { text: "#CCCCCC" } },
+ * })
+ * ```
+ */
+export function toggleable<T extends object>(
+    props: ToggleableProps<T>
+): Toggleable<T> {
+    const { base, state } = props
+
+    if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
+    if (!state.active) throw new Error(NO_ACTIVE_ERROR)
+
+    const inactiveState = base
+        ? ((state.inactive ? merge(base, state.inactive) : base) as T)
+        : (state.inactive as T)
+
+    const toggleObj: Toggleable<T> = {
+        inactive: inactiveState,
+        active: merge(base ?? {}, state.active) as T,
+    }
+
+    return toggleObj
+}

styles/src/styleTree/toolbarDropdownMenu.ts πŸ”—

@@ -1,6 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
-
+import { interactive, toggleable } from "../element"
 export default function dropdownMenu(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
 
@@ -9,38 +9,56 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
         background: background(layer),
         border: border(layer),
         shadow: colorScheme.popoverShadow,
-        header: {
-            ...text(layer, "sans", { size: "sm" }),
-            secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
-            secondaryTextSpacing: 10,
-            padding: { left: 8, right: 8, top: 2, bottom: 2 },
-            cornerRadius: 6,
-            background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
-            hover: {
-                background: background(layer, "hovered"),
-                ...text(layer, "sans", "hovered", { size: "sm" }),
-            }
-        },
+        header: interactive({
+            base: {
+                ...text(layer, "sans", { size: "sm" }),
+                secondaryText: text(layer, "sans", {
+                    size: "sm",
+                    color: "#aaaaaa",
+                }),
+                secondaryTextSpacing: 10,
+                padding: { left: 8, right: 8, top: 2, bottom: 2 },
+                cornerRadius: 6,
+                background: background(layer, "on"),
+            },
+            state: {
+                hovered: {
+                    background: background(layer, "hovered"),
+                },
+                clicked: {
+                    background: background(layer, "pressed"),
+                },
+            },
+        }),
         sectionHeader: {
             ...text(layer, "sans", { size: "sm" }),
             padding: { left: 8, right: 8, top: 8, bottom: 8 },
         },
-        item: {
-            ...text(layer, "sans", { size: "sm" }),
-            secondaryTextSpacing: 10,
-            secondaryText: text(layer, "sans", { size: "sm" }),
-            padding: { left: 18, right: 18, top: 2, bottom: 2 },
-            hover: {
-                background: background(layer, "hovered"),
-                ...text(layer, "sans", "hovered", { size: "sm" }),
-            },
-            active: {
-                background: background(layer, "active"),
+        item: toggleable({
+            base: interactive({
+                base: {
+                    ...text(layer, "sans", { size: "sm" }),
+                    secondaryTextSpacing: 10,
+                    secondaryText: text(layer, "sans", { size: "sm" }),
+                    padding: { left: 18, right: 18, top: 2, bottom: 2 },
+                },
+                state: {
+                    hovered: {
+                        background: background(layer, "hovered"),
+                        ...text(layer, "sans", "hovered", { size: "sm" }),
+                    },
+                },
+            }),
+            state: {
+                active: {
+                    default: {
+                        background: background(layer, "active"),
+                    },
+                    hovered: {
+                        background: background(layer, "hovered"),
+                    },
+                },
             },
-            activeHover: {
-                background: background(layer, "active"),
-            },
-        },
+        }),
     }
 }

styles/src/styleTree/updateNotification.ts πŸ”—

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { foreground, text } from "./components"
+import { interactive } from "../element"
 
 const headerPadding = 8
 
@@ -10,22 +11,30 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
             ...text(layer, "sans", { size: "xs" }),
             margin: { left: headerPadding, right: headerPadding },
         },
-        actionMessage: {
-            ...text(layer, "sans", { size: "xs" }),
-            margin: { left: headerPadding, top: 6, bottom: 6 },
-            hover: {
-                color: foreground(layer, "hovered"),
+        actionMessage: interactive({
+            base: {
+                ...text(layer, "sans", { size: "xs" }),
+                margin: { left: headerPadding, top: 6, bottom: 6 },
             },
-        },
-        dismissButton: {
-            color: foreground(layer),
-            iconWidth: 8,
-            iconHeight: 8,
-            buttonWidth: 8,
-            buttonHeight: 8,
-            hover: {
-                color: foreground(layer, "hovered"),
+            state: {
+                hovered: {
+                    color: foreground(layer, "hovered"),
+                },
             },
-        },
+        }),
+        dismissButton: interactive({
+            base: {
+                color: foreground(layer),
+                iconWidth: 8,
+                iconHeight: 8,
+                buttonWidth: 8,
+                buttonHeight: 8,
+            },
+            state: {
+                hovered: {
+                    color: foreground(layer, "hovered"),
+                },
+            },
+        }),
     }
 }

styles/src/styleTree/welcome.ts πŸ”—

@@ -8,6 +8,7 @@ import {
     TextProperties,
     svg,
 } from "./components"
+import { interactive } from "../element"
 
 export default function welcome(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
@@ -63,27 +64,31 @@ export default function welcome(colorScheme: ColorScheme) {
                 bottom: 2,
             },
         },
-        button: {
-            background: background(layer),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            margin: {
-                top: 4,
-                bottom: 4,
-            },
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
-            ...text(layer, "sans", "default", interactive_text_size),
-            hover: {
-                ...text(layer, "sans", "default", interactive_text_size),
-                background: background(layer, "hovered"),
+        button: interactive({
+            base: {
+                background: background(layer),
                 border: border(layer, "active"),
+                cornerRadius: 4,
+                margin: {
+                    top: 4,
+                    bottom: 4,
+                },
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(layer, "sans", "default", interactive_text_size),
             },
-        },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "default", interactive_text_size),
+                    background: background(layer, "hovered"),
+                },
+            },
+        }),
+
         usageNote: {
             ...text(layer, "sans", "variant", { size: "2xs" }),
             padding: {

styles/src/styleTree/workspace.ts πŸ”—

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
+import { toggleable } from "../element"
 import {
     background,
     border,
@@ -10,65 +11,89 @@ import {
 } from "./components"
 import statusBar from "./statusBar"
 import tabBar from "./tabBar"
-
+import { interactive } from "../element"
+import merge from "ts-deepmerge"
 export default function workspace(colorScheme: ColorScheme) {
     const layer = colorScheme.lowest
     const isLight = colorScheme.isLight
     const itemSpacing = 8
-    const titlebarButton = {
-        cornerRadius: 6,
-        padding: {
-            top: 1,
-            bottom: 1,
-            left: 8,
-            right: 8,
-        },
-        ...text(layer, "sans", "variant", { size: "xs" }),
-        background: background(layer, "variant"),
-        border: border(layer),
-        hover: {
-            ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
-            background: background(layer, "variant", "hovered"),
-            border: border(layer, "variant", "hovered"),
-        },
-        clicked: {
-            ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
-            background: background(layer, "variant", "pressed"),
-            border: border(layer, "variant", "pressed"),
-        },
-        active: {
-            ...text(layer, "sans", "variant", "active", { size: "xs" }),
-            background: background(layer, "variant", "active"),
-            border: border(layer, "variant", "active"),
-        },
-    }
-    const signInButton = {
-        cornerRadius: 6,
-        padding: {
-            top: 1,
-            bottom: 1,
-            left: 8,
-            right: 8,
-        },
-        ...text(layer, "sans", "variant", { size: "xs" }),
-        background: background(layer, "variant"),
-        //border: border(layer),
-        hover: {
-            ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
-            background: background(layer, "variant", "hovered"),
-            //border: border(layer, "variant", "hovered"),
-        },
-        clicked: {
-            ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
-            background: background(layer, "variant", "pressed"),
-            //border: border(layer, "variant", "pressed"),
-        },
-        active: {
-            ...text(layer, "sans", "variant", "active", { size: "xs" }),
-            background: background(layer, "variant", "active"),
-            //border: border(layer, "variant", "active"),
-        },
-    }
+    const titlebarButton = toggleable({
+        base: interactive({
+            base: {
+                cornerRadius: 6,
+                padding: {
+                    top: 1,
+                    bottom: 1,
+                    left: 8,
+                    right: 8,
+                },
+                ...text(layer, "sans", "variant", { size: "xs" }),
+                background: background(layer, "variant"),
+                border: border(layer),
+            },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "variant", "hovered", {
+                        size: "xs",
+                    }),
+                    background: background(layer, "variant", "hovered"),
+                    border: border(layer, "variant", "hovered"),
+                },
+                clicked: {
+                    ...text(layer, "sans", "variant", "pressed", {
+                        size: "xs",
+                    }),
+                    background: background(layer, "variant", "pressed"),
+                    border: border(layer, "variant", "pressed"),
+                },
+            },
+        }),
+        state: {
+            active: {
+                default: {
+                    ...text(layer, "sans", "variant", "active", { size: "xs" }),
+                    background: background(layer, "variant", "active"),
+                    border: border(layer, "variant", "active"),
+                },
+            },
+        }
+    });
+    const signInButton = toggleable({
+        base: interactive({
+            base: {
+                cornerRadius: 6,
+                padding: {
+                    top: 1,
+                    bottom: 1,
+                    left: 8,
+                    right: 8,
+                },
+                ...text(layer, "sans", "variant", { size: "xs" }),
+                background: background(layer, "variant"),
+            },
+            state: {
+                hovered: {
+                    ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
+                    background: background(layer, "variant", "hovered"),
+                    //border: border(layer, "variant", "hovered"),
+                },
+                clicked: {
+                    ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
+                    background: background(layer, "variant", "pressed"),
+                    //border: border(layer, "variant", "pressed"),
+                }
+            }
+        }),
+        state: {
+            active: {
+                default: {
+                    ...text(layer, "sans", "variant", "active", { size: "xs" }),
+                    background: background(layer, "variant", "active"),
+                    //border: border(layer, "variant", "active"),
+                }
+            },
+        }
+    });
     const avatarWidth = 18
     const avatarOuterWidth = avatarWidth + 4
     const followerAvatarWidth = 14
@@ -105,19 +130,24 @@ export default function workspace(colorScheme: ColorScheme) {
                 },
                 cornerRadius: 4,
             },
-            keyboardHint: {
-                ...text(layer, "sans", "variant", { size: "sm" }),
-                padding: {
-                    top: 3,
-                    left: 8,
-                    right: 8,
-                    bottom: 3,
+            keyboardHint: interactive({
+                base: {
+                    ...text(layer, "sans", "variant", { size: "sm" }),
+                    padding: {
+                        top: 3,
+                        left: 8,
+                        right: 8,
+                        bottom: 3,
+                    },
+                    cornerRadius: 8,
                 },
-                cornerRadius: 8,
-                hover: {
-                    ...text(layer, "sans", "active", { size: "sm" }),
+                state: {
+                    hovered: {
+                        ...text(layer, "sans", "active", { size: "sm" }),
+                    },
                 },
-            },
+            }),
+
             keyboardHintWidth: 320,
         },
         joiningProjectAvatar: {
@@ -228,12 +258,18 @@ export default function workspace(colorScheme: ColorScheme) {
 
             // Sign in buttom
             // FlatButton, Variant
-            signInPrompt: {
-                margin: {
-                    left: itemSpacing,
+            signInPrompt: merge(titlebarButton, {
+                inactive: {
+                    default: {
+                        margin: {
+                            left: itemSpacing,
+                        },
+                    },
                 },
-                ...signInButton,
-            },
+
+                signInButton,
+
+            }),
 
             // Offline Indicator
             offlineIcon: {
@@ -261,44 +297,69 @@ export default function workspace(colorScheme: ColorScheme) {
                 },
                 cornerRadius: 6,
             },
-            callControl: {
-                cornerRadius: 6,
-                color: foreground(layer, "variant"),
-                iconWidth: 12,
-                buttonWidth: 20,
-                hover: {
-                    background: background(layer, "variant", "hovered"),
-                    color: foreground(layer, "variant", "hovered"),
+            callControl: interactive({
+                base: {
+                    cornerRadius: 6,
+                    color: foreground(layer, "variant"),
+                    iconWidth: 12,
+                    buttonWidth: 20,
                 },
-                active: {
-                    background: background(layer, "variant", "active"),
-                    color: foreground(layer, "variant", "active"),
+                state: {
+                    hovered: {
+                        background: background(layer, "variant", "hovered"),
+                        color: foreground(layer, "variant", "hovered"),
+                    },
                 },
-            },
-            toggleContactsButton: {
-                margin: { left: itemSpacing },
-                cornerRadius: 6,
-                color: foreground(layer, "variant"),
-                iconWidth: 14,
-                buttonWidth: 20,
-                active: {
-                    background: background(layer, "variant", "active"),
-                    color: foreground(layer, "variant", "active"),
+            }),
+            toggleContactsButton: toggleable({
+                base: interactive({
+                    base: {
+                        margin: { left: itemSpacing },
+                        cornerRadius: 6,
+                        color: foreground(layer, "variant"),
+                        iconWidth: 14,
+                        buttonWidth: 20,
+                    },
+                    state: {
+                        clicked: {
+                            background: background(layer, "variant", "pressed"),
+                        },
+                        hovered: {
+                            background: background(layer, "variant", "hovered"),
+                        },
+                    },
+                }),
+                state: {
+                    active: {
+                        default: {
+                            background: background(layer, "on", "default"),
+                        },
+                        hovered: {
+                            background: background(layer, "on", "hovered"),
+                        },
+                        clicked: {
+                            background: background(layer, "on", "pressed"),
+                        },
+                    },
                 },
-                clicked: {
-                    background: background(layer, "variant", "pressed"),
-                    color: foreground(layer, "variant", "pressed"),
+            }),
+            userMenuButton: merge(titlebarButton, {
+                inactive: {
+                    default: {
+                        buttonWidth: 20,
+                        iconWidth: 12,
+                    },
                 },
-                hover: {
-                    background: background(layer, "variant", "hovered"),
-                    color: foreground(layer, "variant", "hovered"),
+                active: {
+                    default: {
+                        iconWidth: 12,
+                        button_width: 20,
+                        background: background(layer, "variant", "active"),
+                        color: foreground(layer, "variant", "active"),
+                    }
                 },
-            },
-            userMenuButton: {
-                buttonWidth: 20,
-                iconWidth: 12,
-                ...titlebarButton,
-            },
+            }),
+
             toggleContactsBadge: {
                 cornerRadius: 3,
                 padding: 2,
@@ -316,12 +377,45 @@ export default function workspace(colorScheme: ColorScheme) {
             background: background(colorScheme.highest),
             border: border(colorScheme.highest, { bottom: true }),
             itemSpacing: 8,
-            navButton: {
-                color: foreground(colorScheme.highest, "on"),
-                iconWidth: 12,
-                buttonWidth: 24,
+            navButton: interactive({
+                base: {
+                    color: foreground(colorScheme.highest, "on"),
+                    iconWidth: 12,
+                    buttonWidth: 24,
+                    cornerRadius: 6,
+                },
+                state: {
+                    hovered: {
+                        color: foreground(colorScheme.highest, "on", "hovered"),
+                        background: background(
+                            colorScheme.highest,
+                            "on",
+                            "hovered"
+                        ),
+                    },
+                    disabled: {
+                        color: foreground(
+                            colorScheme.highest,
+                            "on",
+                            "disabled"
+                        ),
+                    },
+                },
+            }),
+            padding: { left: 8, right: 8, top: 4, bottom: 4 },
+        },
+        breadcrumbHeight: 24,
+        breadcrumbs: interactive({
+            base: {
+                ...text(colorScheme.highest, "sans", "variant"),
                 cornerRadius: 6,
-                hover: {
+                padding: {
+                    left: 6,
+                    right: 6,
+                },
+            },
+            state: {
+                hovered: {
                     color: foreground(colorScheme.highest, "on", "hovered"),
                     background: background(
                         colorScheme.highest,
@@ -329,25 +423,8 @@ export default function workspace(colorScheme: ColorScheme) {
                         "hovered"
                     ),
                 },
-                disabled: {
-                    color: foreground(colorScheme.highest, "on", "disabled"),
-                },
-            },
-            padding: { left: 8, right: 8, top: 4, bottom: 4 },
-        },
-        breadcrumbHeight: 24,
-        breadcrumbs: {
-            ...text(colorScheme.highest, "sans", "variant"),
-            cornerRadius: 6,
-            padding: {
-                left: 6,
-                right: 6,
             },
-            hover: {
-                color: foreground(colorScheme.highest, "on", "hovered"),
-                background: background(colorScheme.highest, "on", "hovered"),
-            },
-        },
+        }),
         disconnectedOverlay: {
             ...text(layer, "sans"),
             background: withOpacity(background(layer), 0.8),

styles/src/theme/syntax.ts πŸ”—

@@ -129,8 +129,6 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
         [key: string]: Omit<SyntaxHighlightStyle, "color">
     } = {}
 
-    const light = colorScheme.isLight
-
     // then spread the default to each style
     for (const key of Object.keys({} as Syntax)) {
         syntax[key as keyof Syntax] = {

styles/src/theme/tokens/colorScheme.ts πŸ”—

@@ -1,9 +1,19 @@
-import { SingleBoxShadowToken, SingleColorToken, SingleOtherToken, TokenTypes } from "@tokens-studio/types"
-import { ColorScheme, Shadow, SyntaxHighlightStyle, ThemeSyntax } from "../colorScheme"
+import {
+    SingleBoxShadowToken,
+    SingleColorToken,
+    SingleOtherToken,
+    TokenTypes,
+} from "@tokens-studio/types"
+import {
+    ColorScheme,
+    Shadow,
+    SyntaxHighlightStyle,
+    ThemeSyntax,
+} from "../colorScheme"
 import { LayerToken, layerToken } from "./layer"
 import { PlayersToken, playersToken } from "./players"
 import { colorToken } from "./token"
-import { Syntax } from "../syntax";
+import { Syntax } from "../syntax"
 import editor from "../../styleTree/editor"
 
 interface ColorSchemeTokens {
@@ -18,27 +28,32 @@ interface ColorSchemeTokens {
     syntax?: Partial<ThemeSyntaxColorTokens>
 }
 
-const createShadowToken = (shadow: Shadow, tokenName: string): SingleBoxShadowToken => {
+const createShadowToken = (
+    shadow: Shadow,
+    tokenName: string
+): SingleBoxShadowToken => {
     return {
         name: tokenName,
         type: TokenTypes.BOX_SHADOW,
-        value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`
-    };
-};
+        value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`,
+    }
+}
 
 const popoverShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
-    const shadow = colorScheme.popoverShadow;
-    return createShadowToken(shadow, "popoverShadow");
-};
+    const shadow = colorScheme.popoverShadow
+    return createShadowToken(shadow, "popoverShadow")
+}
 
 const modalShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
-    const shadow = colorScheme.modalShadow;
-    return createShadowToken(shadow, "modalShadow");
-};
+    const shadow = colorScheme.modalShadow
+    return createShadowToken(shadow, "modalShadow")
+}
 
 type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken>
 
-function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens {
+function syntaxHighlightStyleColorTokens(
+    syntax: Syntax
+): ThemeSyntaxColorTokens {
     const styleKeys = Object.keys(syntax) as (keyof Syntax)[]
 
     return styleKeys.reduce((acc, styleKey) => {
@@ -46,13 +61,16 @@ function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens
         // This can happen because we have a "constructor" property on the syntax object
         // and a "constructor" property on the prototype of the syntax object
         // To work around this just assert that the type of the style is not a function
-        if (!syntax[styleKey] || typeof syntax[styleKey] === 'function') return acc;
-        const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>;
-        return { ...acc, [styleKey]: colorToken(styleKey, color) };
-    }, {} as ThemeSyntaxColorTokens);
+        if (!syntax[styleKey] || typeof syntax[styleKey] === "function")
+            return acc
+        const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>
+        return { ...acc, [styleKey]: colorToken(styleKey, color) }
+    }, {} as ThemeSyntaxColorTokens)
 }
 
-const syntaxTokens = (colorScheme: ColorScheme): ColorSchemeTokens['syntax'] => {
+const syntaxTokens = (
+    colorScheme: ColorScheme
+): ColorSchemeTokens["syntax"] => {
     const syntax = editor(colorScheme).syntax
 
     return syntaxHighlightStyleColorTokens(syntax)

styles/src/theme/tokens/layer.ts πŸ”—

@@ -1,11 +1,11 @@
-import { SingleColorToken } from "@tokens-studio/types";
-import { Layer, Style, StyleSet } from "../colorScheme";
-import { colorToken } from "./token";
+import { SingleColorToken } from "@tokens-studio/types"
+import { Layer, Style, StyleSet } from "../colorScheme"
+import { colorToken } from "./token"
 
 interface StyleToken {
-    background: SingleColorToken,
-    border: SingleColorToken,
-    foreground: SingleColorToken,
+    background: SingleColorToken
+    border: SingleColorToken
+    foreground: SingleColorToken
 }
 
 interface StyleSetToken {
@@ -37,24 +37,27 @@ export const styleToken = (style: Style, name: string): StyleToken => {
     return token
 }
 
-export const styleSetToken = (styleSet: StyleSet, name: string): StyleSetToken => {
-    const token: StyleSetToken = {} as StyleSetToken;
+export const styleSetToken = (
+    styleSet: StyleSet,
+    name: string
+): StyleSetToken => {
+    const token: StyleSetToken = {} as StyleSetToken
 
     for (const style in styleSet) {
-        const s = style as keyof StyleSet;
-        token[s] = styleToken(styleSet[s], `${name}${style}`);
+        const s = style as keyof StyleSet
+        token[s] = styleToken(styleSet[s], `${name}${style}`)
     }
 
-    return token;
+    return token
 }
 
 export const layerToken = (layer: Layer, name: string): LayerToken => {
-    const token: LayerToken = {} as LayerToken;
+    const token: LayerToken = {} as LayerToken
 
     for (const styleSet in layer) {
-        const s = styleSet as keyof Layer;
-        token[s] = styleSetToken(layer[s], `${name}${styleSet}`);
+        const s = styleSet as keyof Layer
+        token[s] = styleSetToken(layer[s], `${name}${styleSet}`)
     }
 
-    return token;
+    return token
 }

styles/src/theme/tokens/players.ts πŸ”—

@@ -6,13 +6,21 @@ export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
 
 export type PlayersToken = Record<keyof Players, PlayerToken>
 
-function buildPlayerToken(colorScheme: ColorScheme, index: number): PlayerToken {
-
+function buildPlayerToken(
+    colorScheme: ColorScheme,
+    index: number
+): PlayerToken {
     const playerNumber = index.toString() as keyof Players
 
     return {
-        selection: colorToken(`player${index}Selection`, colorScheme.players[playerNumber].selection),
-        cursor: colorToken(`player${index}Cursor`, colorScheme.players[playerNumber].cursor),
+        selection: colorToken(
+            `player${index}Selection`,
+            colorScheme.players[playerNumber].selection
+        ),
+        cursor: colorToken(
+            `player${index}Cursor`,
+            colorScheme.players[playerNumber].cursor
+        ),
     }
 }
 
@@ -24,5 +32,5 @@ export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({
     "4": buildPlayerToken(colorScheme, 4),
     "5": buildPlayerToken(colorScheme, 5),
     "6": buildPlayerToken(colorScheme, 6),
-    "7": buildPlayerToken(colorScheme, 7)
+    "7": buildPlayerToken(colorScheme, 7),
 })

styles/src/theme/tokens/token.ts πŸ”—

@@ -1,6 +1,10 @@
 import { SingleColorToken, TokenTypes } from "@tokens-studio/types"
 
-export function colorToken(name: string, value: string, description?: string): SingleColorToken {
+export function colorToken(
+    name: string,
+    value: string,
+    description?: string
+): SingleColorToken {
     const token: SingleColorToken = {
         name,
         type: TokenTypes.COLOR,
@@ -8,7 +12,8 @@ export function colorToken(name: string, value: string, description?: string): S
         description,
     }
 
-    if (!token.value || token.value === '') throw new Error("Color token must have a value")
+    if (!token.value || token.value === "")
+        throw new Error("Color token must have a value")
 
     return token
 }

styles/src/themes/rose-pine/common.ts πŸ”—

@@ -0,0 +1,75 @@
+import { ThemeSyntax } from "../../common";
+
+export const color = {
+    default: {
+        base: '#191724',
+        surface: '#1f1d2e',
+        overlay: '#26233a',
+        muted: '#6e6a86',
+        subtle: '#908caa',
+        text: '#e0def4',
+        love: '#eb6f92',
+        gold: '#f6c177',
+        rose: '#ebbcba',
+        pine: '#31748f',
+        foam: '#9ccfd8',
+        iris: '#c4a7e7',
+        highlightLow: '#21202e',
+        highlightMed: '#403d52',
+        highlightHigh: '#524f67',
+    },
+    moon: {
+        base: '#232136',
+        surface: '#2a273f',
+        overlay: '#393552',
+        muted: '#6e6a86',
+        subtle: '#908caa',
+        text: '#e0def4',
+        love: '#eb6f92',
+        gold: '#f6c177',
+        rose: '#ea9a97',
+        pine: '#3e8fb0',
+        foam: '#9ccfd8',
+        iris: '#c4a7e7',
+        highlightLow: '#2a283e',
+        highlightMed: '#44415a',
+        highlightHigh: '#56526e',
+    },
+    dawn: {
+        base: "#faf4ed",
+        surface: "#fffaf3",
+        overlay: "#f2e9e1",
+        muted: "#9893a5",
+        subtle: "#797593",
+        text: "#575279",
+        love: "#b4637a",
+        gold: "#ea9d34",
+        rose: "#d7827e",
+        pine: "#286983",
+        foam: "#56949f",
+        iris: "#907aa9",
+        highlightLow: "#f4ede8",
+        highlightMed: "#dfdad9",
+        highlightHigh: "#cecacd",
+    }
+};
+
+export const syntax = (c: typeof color.default): Partial<ThemeSyntax> => {
+    return {
+        comment: { color: c.muted },
+        operator: { color: c.pine },
+        punctuation: { color: c.subtle },
+        variable: { color: c.text },
+        string: { color: c.gold },
+        type: { color: c.foam },
+        "type.builtin": { color: c.foam },
+        boolean: { color: c.rose },
+        function: { color: c.rose },
+        keyword: { color: c.pine },
+        tag: { color: c.foam },
+        "function.method": { color: c.rose },
+        title: { color: c.gold },
+        linkText: { color: c.foam, italic: false },
+        linkUri: { color: c.rose },
+    }
+}

styles/src/themes/rose-pine/rose-pine-dawn.ts πŸ”—

@@ -6,6 +6,13 @@ import {
     ThemeConfig,
 } from "../../common"
 
+import { color as c, syntax } from "./common";
+
+const color = c.dawn
+
+const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
+const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
+
 export const theme: ThemeConfig = {
     name: "RosΓ© Pine Dawn",
     author: "edunfelt",
@@ -14,26 +21,17 @@ export const theme: ThemeConfig = {
     licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
     licenseFile: `${__dirname}/LICENSE`,
     inputColor: {
-        neutral: chroma
-            .scale([
-                "#575279",
-                "#797593",
-                "#9893A5",
-                "#B5AFB8",
-                "#D3CCCC",
-                "#F2E9E1",
-                "#FFFAF3",
-                "#FAF4ED",
-            ])
-            .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
-        red: colorRamp(chroma("#B4637A")),
-        orange: colorRamp(chroma("#D7827E")),
-        yellow: colorRamp(chroma("#EA9D34")),
-        green: colorRamp(chroma("#679967")),
-        cyan: colorRamp(chroma("#286983")),
-        blue: colorRamp(chroma("#56949F")),
-        violet: colorRamp(chroma("#907AA9")),
-        magenta: colorRamp(chroma("#79549F")),
+        neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text].reverse()).domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
+        red: colorRamp(chroma(color.love)),
+        orange: colorRamp(chroma(color.iris)),
+        yellow: colorRamp(chroma(color.gold)),
+        green: colorRamp(chroma(green)),
+        cyan: colorRamp(chroma(color.pine)),
+        blue: colorRamp(chroma(color.foam)),
+        violet: colorRamp(chroma(color.iris)),
+        magenta: colorRamp(chroma(magenta)),
     },
-    override: { syntax: {} },
+    override: {
+        syntax: syntax(color)
+    }
 }

styles/src/themes/rose-pine/rose-pine-moon.ts πŸ”—

@@ -6,6 +6,13 @@ import {
     ThemeConfig,
 } from "../../common"
 
+import { color as c, syntax } from "./common";
+
+const color = c.moon
+
+const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
+const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
+
 export const theme: ThemeConfig = {
     name: "RosΓ© Pine Moon",
     author: "edunfelt",
@@ -14,26 +21,17 @@ export const theme: ThemeConfig = {
     licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
     licenseFile: `${__dirname}/LICENSE`,
     inputColor: {
-        neutral: chroma
-            .scale([
-                "#232136",
-                "#2A273F",
-                "#393552",
-                "#3E3A53",
-                "#56526C",
-                "#6E6A86",
-                "#908CAA",
-                "#E0DEF4",
-            ])
-            .domain([0, 0.3, 0.55, 1]),
-        red: colorRamp(chroma("#EB6F92")),
-        orange: colorRamp(chroma("#EBBCBA")),
-        yellow: colorRamp(chroma("#F6C177")),
-        green: colorRamp(chroma("#8DBD8D")),
-        cyan: colorRamp(chroma("#409BBE")),
-        blue: colorRamp(chroma("#9CCFD8")),
-        violet: colorRamp(chroma("#C4A7E7")),
-        magenta: colorRamp(chroma("#AB6FE9")),
+        neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]).domain([0, 0.3, 0.55, 1]),
+        red: colorRamp(chroma(color.love)),
+        orange: colorRamp(chroma(color.iris)),
+        yellow: colorRamp(chroma(color.gold)),
+        green: colorRamp(chroma(green)),
+        cyan: colorRamp(chroma(color.pine)),
+        blue: colorRamp(chroma(color.foam)),
+        violet: colorRamp(chroma(color.iris)),
+        magenta: colorRamp(chroma(magenta)),
     },
-    override: { syntax: {} },
+    override: {
+        syntax: syntax(color)
+    }
 }

styles/src/themes/rose-pine/rose-pine.ts πŸ”—

@@ -5,6 +5,12 @@ import {
     ThemeLicenseType,
     ThemeConfig,
 } from "../../common"
+import { color as c, syntax } from "./common";
+
+const color = c.default
+
+const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
+const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
 
 export const theme: ThemeConfig = {
     name: "RosΓ© Pine",
@@ -14,24 +20,17 @@ export const theme: ThemeConfig = {
     licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
     licenseFile: `${__dirname}/LICENSE`,
     inputColor: {
-        neutral: chroma.scale([
-            "#191724",
-            "#1f1d2e",
-            "#26233A",
-            "#3E3A53",
-            "#56526C",
-            "#6E6A86",
-            "#908CAA",
-            "#E0DEF4",
-        ]),
-        red: colorRamp(chroma("#EB6F92")),
-        orange: colorRamp(chroma("#EBBCBA")),
-        yellow: colorRamp(chroma("#F6C177")),
-        green: colorRamp(chroma("#8DBD8D")),
-        cyan: colorRamp(chroma("#409BBE")),
-        blue: colorRamp(chroma("#9CCFD8")),
-        violet: colorRamp(chroma("#C4A7E7")),
-        magenta: colorRamp(chroma("#AB6FE9")),
+        neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]),
+        red: colorRamp(chroma(color.love)),
+        orange: colorRamp(chroma(color.iris)),
+        yellow: colorRamp(chroma(color.gold)),
+        green: colorRamp(chroma(green)),
+        cyan: colorRamp(chroma(color.pine)),
+        blue: colorRamp(chroma(color.foam)),
+        violet: colorRamp(chroma(color.iris)),
+        magenta: colorRamp(chroma(magenta)),
     },
-    override: { syntax: {} },
+    override: {
+        syntax: syntax(color)
+    }
 }

styles/src/utils/slugify.ts πŸ”—

@@ -1 +1,10 @@
-export function slugify(t: string): string { return t.toString().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '').replace(/\-\-+/g, '-').replace(/^-+/, '').replace(/-+$/, '') }
+export function slugify(t: string): string {
+    return t
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(/[^\w\-]+/g, "")
+        .replace(/\-\-+/g, "-")
+        .replace(/^-+/, "")
+        .replace(/-+$/, "")
+}

styles/tsconfig.json πŸ”—

@@ -20,7 +20,17 @@
         "noFallthroughCasesInSwitch": false,
         "experimentalDecorators": true,
         "strictPropertyInitialization": false,
-        "skipLibCheck": true
+        "skipLibCheck": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./*"],
+            "@element/*": ["./src/element/*"],
+            "@component/*": ["./src/component/*"],
+            "@styleTree/*": ["./src/styleTree/*"],
+            "@theme/*": ["./src/theme/*"],
+            "@themes/*": ["./src/themes/*"],
+            "@util/*": ["./src/util/*"]
+        }
     },
     "exclude": ["node_modules"]
 }

styles/vitest.config.ts πŸ”—

@@ -0,0 +1,8 @@
+import { configDefaults, defineConfig } from "vitest/config"
+
+export default defineConfig({
+    test: {
+        exclude: [...configDefaults.exclude, "target/*"],
+        include: ["src/**/*.{spec,test}.ts"],
+    },
+})