chore: generate

packages/app/src/components/prompt-input.tsx

@@ -925,7 +925,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       .abort({
         sessionID,
       })
-      .catch(() => { })
+      .catch(() => {})
   }
 
   const addToHistory = (prompt: Prompt, mode: "normal" | "shell") => {
@@ -1351,18 +1351,18 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
     const contextParts: Array<
       | {
-        id: string
-        type: "text"
-        text: string
-        synthetic?: boolean
-      }
+          id: string
+          type: "text"
+          text: string
+          synthetic?: boolean
+        }
       | {
-        id: string
-        type: "file"
-        mime: string
-        url: string
-        filename?: string
-      }
+          id: string
+          type: "file"
+          mime: string
+          url: string
+          filename?: string
+        }
     > = []
 
     const commentNote = (path: string, selection: FileSelection | undefined, comment: string) => {

packages/app/src/components/settings-general.tsx

@@ -61,24 +61,24 @@ export const SettingsGeneral: Component = () => {
         const actions =
           platform.update && platform.restart
             ? [
-              {
-                label: language.t("toast.update.action.installRestart"),
-                onClick: async () => {
-                  await platform.update!()
-                  await platform.restart!()
+                {
+                  label: language.t("toast.update.action.installRestart"),
+                  onClick: async () => {
+                    await platform.update!()
+                    await platform.restart!()
+                  },
                 },
-              },
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss" as const,
-              },
-            ]
+                {
+                  label: language.t("toast.update.action.notYet"),
+                  onClick: "dismiss" as const,
+                },
+              ]
             : [
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss" as const,
-              },
-            ]
+                {
+                  label: language.t("toast.update.action.notYet"),
+                  onClick: "dismiss" as const,
+                },
+              ]
 
         showToast({
           persistent: true,

packages/ui/src/components/accordion.css

@@ -1,107 +1,107 @@
 [data-component="accordion"] {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 8px;
-	align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
 
-	[data-slot="accordion-item"] {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		align-self: stretch;
-		overflow: clip;
+  [data-slot="accordion-item"] {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    overflow: clip;
 
-		[data-slot="accordion-header"] {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			margin: 0;
-			padding: 0;
+    [data-slot="accordion-header"] {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      padding: 0;
 
-			[data-slot="accordion-trigger"] {
-				width: 100%;
-				display: flex;
-				height: 32px;
-				padding: 8px 12px;
-				justify-content: space-between;
-				align-items: center;
-				align-self: stretch;
-				cursor: default;
-				user-select: none;
+      [data-slot="accordion-trigger"] {
+        width: 100%;
+        display: flex;
+        height: 32px;
+        padding: 8px 12px;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        cursor: default;
+        user-select: none;
 
-				background-color: var(--surface-base);
-				border: 1px solid var(--border-weak-base);
-				border-radius: var(--radius-md);
-				overflow: clip;
-				color: var(--text-strong);
-				transition-property: background-color, border-color;
-				transition-duration: var(--transition-duration);
-				transition-timing-function: var(--transition-easing);
+        background-color: var(--surface-base);
+        border: 1px solid var(--border-weak-base);
+        border-radius: var(--radius-md);
+        overflow: clip;
+        color: var(--text-strong);
+        transition-property: background-color, border-color;
+        transition-duration: var(--transition-duration);
+        transition-timing-function: var(--transition-easing);
 
-				/* text-12-regular */
-				font-family: var(--font-family-sans);
-				font-size: var(--font-size-small);
-				font-style: normal;
-				font-weight: var(--font-weight-regular);
-				line-height: var(--line-height-large); /* 166.667% */
-				letter-spacing: var(--letter-spacing-normal);
+        /* text-12-regular */
+        font-family: var(--font-family-sans);
+        font-size: var(--font-size-small);
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 166.667% */
+        letter-spacing: var(--letter-spacing-normal);
 
-				&:hover {
-					background-color: var(--surface-base);
-				}
-				&:focus-visible {
-					outline: none;
-				}
-				&[data-disabled] {
-					cursor: not-allowed;
-				}
-			}
-		}
+        &:hover {
+          background-color: var(--surface-base);
+        }
+        &:focus-visible {
+          outline: none;
+        }
+        &[data-disabled] {
+          cursor: not-allowed;
+        }
+      }
+    }
 
-		[data-slot="accordion-arrow"] {
-			flex-shrink: 0;
-			width: 16px;
-			height: 16px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: var(--text-weak);
-		}
+    [data-slot="accordion-arrow"] {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-weak);
+    }
 
-		[data-slot="accordion-content"] {
-			display: grid;
-			grid-template-rows: 0fr;
-			transition-property: grid-template-rows, opacity;
-			transition-duration: var(--transition-duration);
-			transition-timing-function: var(--transition-easing);
-			width: 100%;
+    [data-slot="accordion-content"] {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition-property: grid-template-rows, opacity;
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-easing);
+      width: 100%;
 
-			> * {
-				overflow: hidden;
-			}
-		}
+      > * {
+        overflow: hidden;
+      }
+    }
 
-		[data-slot="accordion-content"][data-expanded] {
-			grid-template-rows: 1fr;
-		}
+    [data-slot="accordion-content"][data-expanded] {
+      grid-template-rows: 1fr;
+    }
 
-		[data-slot="accordion-content"][data-closed] {
-			grid-template-rows: 0fr;
-		}
+    [data-slot="accordion-content"][data-closed] {
+      grid-template-rows: 0fr;
+    }
 
-		&[data-expanded] [data-slot="accordion-trigger"] {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
+    &[data-expanded] [data-slot="accordion-trigger"] {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-		&[data-expanded] [data-slot="accordion-content"] {
-			border: 1px solid var(--border-weak-base);
-			border-top: none;
-			border-bottom-left-radius: var(--radius-md);
-			border-bottom-right-radius: var(--radius-md);
-			height: auto;
-		}
-	}
+    &[data-expanded] [data-slot="accordion-content"] {
+      border: 1px solid var(--border-weak-base);
+      border-top: none;
+      border-bottom-left-radius: var(--radius-md);
+      border-bottom-right-radius: var(--radius-md);
+      height: auto;
+    }
+  }
 }

packages/ui/src/components/avatar.css

@@ -1,49 +1,49 @@
 [data-component="avatar"] {
-	--avatar-bg: var(--color-surface-info-base);
-	--avatar-fg: var(--color-text-base);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	border-radius: var(--radius-sm);
-	border: 1px solid var(--color-border-weak-base);
-	font-family: var(--font-mono);
-	font-weight: 500;
-	text-transform: uppercase;
-	background-color: var(--avatar-bg);
-	color: var(--avatar-fg);
+  --avatar-bg: var(--color-surface-info-base);
+  --avatar-fg: var(--color-text-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-weak-base);
+  font-family: var(--font-mono);
+  font-weight: 500;
+  text-transform: uppercase;
+  background-color: var(--avatar-bg);
+  color: var(--avatar-fg);
 }
 
 [data-component="avatar"][data-has-image] {
-	background-color: transparent;
-	border: none;
+  background-color: transparent;
+  border: none;
 }
 
 [data-component="avatar"][data-size="small"] {
-	width: 1.25rem;
-	height: 1.25rem;
-	font-size: 0.75rem;
-	line-height: 1;
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1;
 }
 
 [data-component="avatar"][data-size="normal"] {
-	width: 1.5rem;
-	height: 1.5rem;
-	font-size: 1.125rem;
-	line-height: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
 }
 
 [data-component="avatar"][data-size="large"] {
-	width: 2rem;
-	height: 2rem;
-	font-size: 1.25rem;
-	line-height: 2rem;
+  width: 2rem;
+  height: 2rem;
+  font-size: 1.25rem;
+  line-height: 2rem;
 }
 
 [data-component="avatar"] [data-slot="avatar-image"] {
-	width: 100%;
-	height: 100%;
-	display: block;
-	object-fit: cover;
-	border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: inherit;
 }

packages/ui/src/components/basic-tool.css

@@ -1,97 +1,97 @@
 [data-component="tool-trigger"] {
-	content-visibility: auto;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	align-self: stretch;
-	gap: 20px;
-	justify-content: space-between;
+  content-visibility: auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: 20px;
+  justify-content: space-between;
 
-	[data-slot="basic-tool-tool-trigger-content"] {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		align-self: stretch;
-		gap: 20px;
-	}
+  [data-slot="basic-tool-tool-trigger-content"] {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: 20px;
+  }
 
-	[data-slot="icon-svg"] {
-		flex-shrink: 0;
-	}
+  [data-slot="icon-svg"] {
+    flex-shrink: 0;
+  }
 
-	[data-slot="basic-tool-tool-info"] {
-		flex-grow: 1;
-		min-width: 0;
-	}
+  [data-slot="basic-tool-tool-info"] {
+    flex-grow: 1;
+    min-width: 0;
+  }
 
-	[data-slot="basic-tool-tool-info-structured"] {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		justify-content: space-between;
-	}
+  [data-slot="basic-tool-tool-info-structured"] {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: space-between;
+  }
 
-	[data-slot="basic-tool-tool-info-main"] {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		min-width: 0;
-		overflow: hidden;
-	}
+  [data-slot="basic-tool-tool-info-main"] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    overflow: hidden;
+  }
 
-	[data-slot="basic-tool-tool-title"] {
-		flex-shrink: 0;
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		color: var(--text-base);
+  [data-slot="basic-tool-tool-title"] {
+    flex-shrink: 0;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-base);
 
-		&.capitalize {
-			text-transform: capitalize;
-		}
-	}
+    &.capitalize {
+      text-transform: capitalize;
+    }
+  }
 
-	[data-slot="basic-tool-tool-subtitle"] {
-		flex-shrink: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		color: var(--text-weak);
+  [data-slot="basic-tool-tool-subtitle"] {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-weak);
 
-		&.clickable {
-			cursor: pointer;
-			text-decoration: underline;
-			transition: color 0.15s ease;
+    &.clickable {
+      cursor: pointer;
+      text-decoration: underline;
+      transition: color 0.15s ease;
 
-			&:hover {
-				color: var(--text-base);
-			}
-		}
-	}
+      &:hover {
+        color: var(--text-base);
+      }
+    }
+  }
 
-	[data-slot="basic-tool-tool-arg"] {
-		flex-shrink: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		color: var(--text-weak);
-	}
+  [data-slot="basic-tool-tool-arg"] {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-weak);
+  }
 }

packages/ui/src/components/button.css

@@ -1,168 +1,167 @@
 [data-component="button"] {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border-style: solid;
-	border-width: 1px;
-	border-radius: var(--radius-md);
-	text-decoration: none;
-	user-select: none;
-	cursor: default;
-	padding: 4px 8px;
-	white-space: nowrap;
-	transition-property:
-		background-color, border-color, color, box-shadow, opacity;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
-	outline: none;
-	line-height: 20px;
-
-	&[data-variant="primary"] {
-		background-color: var(--button-primary-base);
-		border-color: var(--border-weak-base);
-		color: var(--icon-invert-base);
-
-		[data-slot="icon-svg"] {
-			color: var(--icon-invert-base);
-		}
-
-		&:hover:not(:disabled) {
-			background-color: var(--icon-strong-hover);
-		}
-		&:focus:not(:disabled) {
-			background-color: var(--icon-strong-focus);
-		}
-		&:active:not(:disabled) {
-			background-color: var(--icon-strong-active);
-		}
-		&:disabled {
-			background-color: var(--icon-strong-disabled);
-
-			[data-slot="icon-svg"] {
-				color: var(--icon-invert-base);
-			}
-		}
-	}
-
-	&[data-variant="ghost"] {
-		border-color: transparent;
-		background-color: transparent;
-		color: var(--text-strong);
-
-		[data-slot="icon-svg"] {
-			color: var(--icon-base);
-		}
-
-		&:hover:not(:disabled) {
-			background-color: var(--surface-raised-base-hover);
-		}
-		&:focus-visible:not(:disabled) {
-			background-color: var(--surface-raised-base-hover);
-		}
-		&:active:not(:disabled) {
-			background-color: var(--surface-raised-base-active);
-		}
-		&:disabled {
-			color: var(--text-weak);
-			cursor: not-allowed;
-
-			[data-slot="icon-svg"] {
-				color: var(--icon-disabled);
-			}
-		}
-		&[data-selected="true"]:not(:disabled) {
-			background-color: var(--surface-raised-base-hover);
-		}
-		&[data-active="true"] {
-			background-color: var(--surface-raised-base-active);
-		}
-	}
-
-	&[data-variant="secondary"] {
-		border: transparent;
-		background-color: var(--button-secondary-base);
-		color: var(--text-strong);
-		box-shadow: var(--shadow-xs-border);
-
-		&:hover:not(:disabled) {
-			background-color: var(--button-secondary-hover);
-		}
-		&:focus:not(:disabled) {
-			background-color: var(--button-secondary-base);
-		}
-		&:focus-visible:not(:active) {
-			background-color: var(--button-secondary-base);
-			box-shadow: var(--shadow-xs-border-focus);
-		}
-		&:focus-visible:active {
-			box-shadow: none;
-		}
-		&:active:not(:disabled) {
-			background-color: var(--button-secondary-base);
-			scale: 0.99;
-		}
-		&:disabled {
-			border-color: var(--border-disabled);
-			background-color: var(--surface-disabled);
-			color: var(--text-weak);
-			cursor: not-allowed;
-		}
-
-		[data-slot="icon-svg"] {
-			color: var(--icon-strong-base);
-		}
-	}
-
-	&[data-size="small"] {
-		padding: 2px 8px;
-		&[data-icon] {
-			padding: 2px 12px 2px 4px;
-		}
-
-		gap: 4px;
-
-		/* text-12-medium */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-base);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	&[data-size="normal"] {
-		padding: 4px 6px;
-		&[data-icon] {
-			padding: 4px 12px 4px 4px;
-		}
-
-		gap: 6px;
-
-		/* text-12-medium */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	&[data-size="large"] {
-		padding: 6px 12px;
-
-		&[data-icon] {
-			padding: 6px 12px 6px 8px;
-		}
-
-		gap: 4px;
-
-		/* text-14-medium */
-		font-family: var(--font-family-sans);
-		font-size: 14px;
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	&:focus {
-		outline: none;
-	}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  user-select: none;
+  cursor: default;
+  padding: 4px 8px;
+  white-space: nowrap;
+  transition-property: background-color, border-color, color, box-shadow, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+  outline: none;
+  line-height: 20px;
+
+  &[data-variant="primary"] {
+    background-color: var(--button-primary-base);
+    border-color: var(--border-weak-base);
+    color: var(--icon-invert-base);
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-invert-base);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--icon-strong-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--icon-strong-focus);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--icon-strong-active);
+    }
+    &:disabled {
+      background-color: var(--icon-strong-disabled);
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-invert-base);
+      }
+    }
+  }
+
+  &[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--text-strong);
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-base);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:focus-visible:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--surface-raised-base-active);
+    }
+    &:disabled {
+      color: var(--text-weak);
+      cursor: not-allowed;
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-disabled);
+      }
+    }
+    &[data-selected="true"]:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &[data-active="true"] {
+      background-color: var(--surface-raised-base-active);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    border: transparent;
+    background-color: var(--button-secondary-base);
+    color: var(--text-strong);
+    box-shadow: var(--shadow-xs-border);
+
+    &:hover:not(:disabled) {
+      background-color: var(--button-secondary-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--button-secondary-base);
+    }
+    &:focus-visible:not(:active) {
+      background-color: var(--button-secondary-base);
+      box-shadow: var(--shadow-xs-border-focus);
+    }
+    &:focus-visible:active {
+      box-shadow: none;
+    }
+    &:active:not(:disabled) {
+      background-color: var(--button-secondary-base);
+      scale: 0.99;
+    }
+    &:disabled {
+      border-color: var(--border-disabled);
+      background-color: var(--surface-disabled);
+      color: var(--text-weak);
+      cursor: not-allowed;
+    }
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-strong-base);
+    }
+  }
+
+  &[data-size="small"] {
+    padding: 2px 8px;
+    &[data-icon] {
+      padding: 2px 12px 2px 4px;
+    }
+
+    gap: 4px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &[data-size="normal"] {
+    padding: 4px 6px;
+    &[data-icon] {
+      padding: 4px 12px 4px 4px;
+    }
+
+    gap: 6px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &[data-size="large"] {
+    padding: 6px 12px;
+
+    &[data-icon] {
+      padding: 6px 12px 6px 8px;
+    }
+
+    gap: 4px;
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:focus {
+    outline: none;
+  }
 }

packages/ui/src/components/card.css

@@ -1,31 +1,31 @@
 [data-component="card"] {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	background-color: var(--surface-inset-base);
-	border: 1px solid var(--border-weaker-base);
-	transition-property: background-color, border-color;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
-	border-radius: var(--radius-md);
-	padding: 6px 12px;
-	overflow: clip;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--surface-inset-base);
+  border: 1px solid var(--border-weaker-base);
+  transition-property: background-color, border-color;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+  border-radius: var(--radius-md);
+  padding: 6px 12px;
+  overflow: clip;
 
-	&[data-variant="error"] {
-		background-color: var(--surface-critical-weak);
-		border: 1px solid var(--border-critical-base);
-		color: rgba(218, 51, 25, 0.6);
+  &[data-variant="error"] {
+    background-color: var(--surface-critical-weak);
+    border: 1px solid var(--border-critical-base);
+    color: rgba(218, 51, 25, 0.6);
 
-		/* text-12-regular */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large); /* 166.667% */
-		letter-spacing: var(--letter-spacing-normal);
+    /* text-12-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
 
-		&[data-component="icon"] {
-			color: var(--icon-critical-active);
-		}
-	}
+    &[data-component="icon"] {
+      color: var(--icon-critical-active);
+    }
+  }
 }

packages/ui/src/components/checkbox.css

@@ -1,136 +1,133 @@
 [data-component="checkbox"] {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	cursor: default;
-
-	[data-slot="checkbox-checkbox-control"] {
-		transition-property: border-color, background-color, box-shadow;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-	}
-
-	[data-slot="checkbox-checkbox-indicator"] {
-		transition-property: opacity;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-	}
-
-	[data-slot="checkbox-checkbox-input"] {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border-width: 0;
-	}
-
-	[data-slot="checkbox-checkbox-control"] {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 16px;
-		height: 16px;
-		padding: 2px;
-		aspect-ratio: 1;
-		flex-shrink: 0;
-		border-radius: var(--radius-sm);
-		border: 1px solid var(--border-weak-base);
-		/* background-color: var(--surface-weak); */
-	}
-
-	[data-slot="checkbox-checkbox-indicator"] {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		color: var(--icon-base);
-		opacity: 0;
-	}
-
-	/* [data-slot="checkbox-checkbox-content"] { */
-	/* } */
-
-	[data-slot="checkbox-checkbox-label"] {
-		user-select: none;
-		color: var(--text-base);
-
-		/* text-12-regular */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large); /* 166.667% */
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	[data-slot="checkbox-checkbox-description"] {
-		color: var(--text-base);
-		font-family: var(--font-family-sans);
-		font-size: 12px;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-normal);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	[data-slot="checkbox-checkbox-error"] {
-		color: var(--text-error);
-		font-family: var(--font-family-sans);
-		font-size: 12px;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-normal);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	&:hover:not([data-disabled], [data-readonly])
-		[data-slot="checkbox-checkbox-control"] {
-		border-color: var(--border-hover);
-		background-color: var(--surface-hover);
-	}
-
-	&:focus-within:not([data-readonly]) [data-slot="checkbox-checkbox-control"] {
-		border-color: var(--border-focus);
-		box-shadow: 0 0 0 2px var(--surface-focus);
-	}
-
-	&[data-checked] [data-slot="checkbox-checkbox-control"],
-	&[data-indeterminate] [data-slot="checkbox-checkbox-control"] {
-		border-color: var(--border-base);
-		background-color: var(--surface-weak);
-	}
-
-	&[data-checked]:hover:not([data-disabled], [data-readonly])
-		[data-slot="checkbox-checkbox-control"],
-	&[data-indeterminate]:hover:not([data-disabled])
-		[data-slot="checkbox-checkbox-control"] {
-		border-color: var(--border-hover);
-		background-color: var(--surface-hover);
-	}
-
-	&[data-checked] [data-slot="checkbox-checkbox-indicator"],
-	&[data-indeterminate] [data-slot="checkbox-checkbox-indicator"] {
-		opacity: 1;
-	}
-
-	&[data-disabled] {
-		cursor: not-allowed;
-	}
-
-	&[data-disabled] [data-slot="checkbox-checkbox-control"] {
-		border-color: var(--border-disabled);
-		background-color: var(--surface-disabled);
-	}
-
-	&[data-invalid] [data-slot="checkbox-checkbox-control"] {
-		border-color: var(--border-error);
-	}
-
-	&[data-readonly] {
-		cursor: default;
-		pointer-events: none;
-	}
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: default;
+
+  [data-slot="checkbox-checkbox-control"] {
+    transition-property: border-color, background-color, box-shadow;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
+  [data-slot="checkbox-checkbox-indicator"] {
+    transition-property: opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
+  [data-slot="checkbox-checkbox-input"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  [data-slot="checkbox-checkbox-control"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 2px;
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-weak-base);
+    /* background-color: var(--surface-weak); */
+  }
+
+  [data-slot="checkbox-checkbox-indicator"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--icon-base);
+    opacity: 0;
+  }
+
+  /* [data-slot="checkbox-checkbox-content"] { */
+  /* } */
+
+  [data-slot="checkbox-checkbox-label"] {
+    user-select: none;
+    color: var(--text-base);
+
+    /* text-12-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="checkbox-checkbox-description"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="checkbox-checkbox-error"] {
+    color: var(--text-error);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-hover);
+    background-color: var(--surface-hover);
+  }
+
+  &:focus-within:not([data-readonly]) [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 2px var(--surface-focus);
+  }
+
+  &[data-checked] [data-slot="checkbox-checkbox-control"],
+  &[data-indeterminate] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-base);
+    background-color: var(--surface-weak);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"],
+  &[data-indeterminate]:hover:not([data-disabled]) [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-hover);
+    background-color: var(--surface-hover);
+  }
+
+  &[data-checked] [data-slot="checkbox-checkbox-indicator"],
+  &[data-indeterminate] [data-slot="checkbox-checkbox-indicator"] {
+    opacity: 1;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &[data-disabled] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-disabled);
+    background-color: var(--surface-disabled);
+  }
+
+  &[data-invalid] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-error);
+  }
+
+  &[data-readonly] {
+    cursor: default;
+    pointer-events: none;
+  }
 }

packages/ui/src/components/code.css

@@ -1,4 +1,4 @@
 [data-component="code"] {
-	content-visibility: auto;
-	overflow: hidden;
+  content-visibility: auto;
+  overflow: hidden;
 }

packages/ui/src/components/collapsible.css

@@ -1,99 +1,99 @@
 [data-component="collapsible"] {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	background-color: var(--surface-inset-base);
-	border: 1px solid var(--border-weaker-base);
-	transition-property: background-color, border-color;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
-	border-radius: var(--radius-md);
-	overflow: clip;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--surface-inset-base);
+  border: 1px solid var(--border-weaker-base);
+  transition-property: background-color, border-color;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+  border-radius: var(--radius-md);
+  overflow: clip;
 
-	[data-slot="collapsible-trigger"] {
-		width: 100%;
-		display: flex;
-		height: 32px;
-		padding: 6px 8px 6px 12px;
-		align-items: center;
-		align-self: stretch;
-		cursor: default;
-		user-select: none;
-		color: var(--text-base);
+  [data-slot="collapsible-trigger"] {
+    width: 100%;
+    display: flex;
+    height: 32px;
+    padding: 6px 8px 6px 12px;
+    align-items: center;
+    align-self: stretch;
+    cursor: default;
+    user-select: none;
+    color: var(--text-base);
 
-		/* text-12-medium */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large); /* 166.667% */
-		letter-spacing: var(--letter-spacing-normal);
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
 
-		/* &:hover { */
-		/*   background-color: var(--surface-base); */
-		/* } */
-		&:focus-visible {
-			outline: none;
-		}
-		&[data-disabled] {
-			cursor: not-allowed;
-		}
+    /* &:hover { */
+    /*   background-color: var(--surface-base); */
+    /* } */
+    &:focus-visible {
+      outline: none;
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
 
-		[data-slot="collapsible-arrow"] {
-			flex-shrink: 0;
-			width: 24px;
-			height: 24px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: var(--text-weak);
-		}
-	}
+    [data-slot="collapsible-arrow"] {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-weak);
+    }
+  }
 
-	[data-slot="collapsible-content"] {
-		display: grid;
-		grid-template-rows: 0fr;
-		transition-property: grid-template-rows, opacity;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
+  [data-slot="collapsible-content"] {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition-property: grid-template-rows, opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
 
-		> * {
-			overflow: hidden;
-		}
+    > * {
+      overflow: hidden;
+    }
 
-		&[data-expanded] {
-			grid-template-rows: 1fr;
-		}
+    &[data-expanded] {
+      grid-template-rows: 1fr;
+    }
 
-		&[data-closed] {
-			grid-template-rows: 0fr;
-		}
-	}
+    &[data-closed] {
+      grid-template-rows: 0fr;
+    }
+  }
 
-	&[data-variant="ghost"] {
-		background-color: transparent;
-		border: none;
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    border: none;
 
-		> [data-slot="collapsible-trigger"] {
-			background-color: transparent;
-			border: none;
-			padding: 0;
+    > [data-slot="collapsible-trigger"] {
+      background-color: transparent;
+      border: none;
+      padding: 0;
 
-			/* &:hover { */
-			/*   color: var(--text-strong); */
-			/* } */
-			&:focus-visible {
-				outline: none;
-			}
-			&[data-disabled] {
-				cursor: not-allowed;
-			}
-		}
-	}
+      /* &:hover { */
+      /*   color: var(--text-strong); */
+      /* } */
+      &:focus-visible {
+        outline: none;
+      }
+      &[data-disabled] {
+        cursor: not-allowed;
+      }
+    }
+  }
 
-	&[data-variant="ghost"][data-scope="filetree"] {
-		> [data-slot="collapsible-trigger"] {
-			height: 24px;
-		}
-	}
+  &[data-variant="ghost"][data-scope="filetree"] {
+    > [data-slot="collapsible-trigger"] {
+      height: 24px;
+    }
+  }
 }

packages/ui/src/components/cycle-label.css

@@ -1,52 +1,51 @@
 .cycle-label {
-	--c-dur: 200ms;
-	--c-stag: 30ms;
-	--c-ease: cubic-bezier(0.25, 0, 0.5, 1);
-	--c-opacity-start: 0;
-	--c-opacity-end: 1;
-	--c-blur-start: 0px;
-	--c-blur-end: 0px;
-	--c-skew: 10deg;
+  --c-dur: 200ms;
+  --c-stag: 30ms;
+  --c-ease: cubic-bezier(0.25, 0, 0.5, 1);
+  --c-opacity-start: 0;
+  --c-opacity-end: 1;
+  --c-blur-start: 0px;
+  --c-blur-end: 0px;
+  --c-skew: 10deg;
 
-	display: inline-flex;
-	position: relative;
+  display: inline-flex;
+  position: relative;
 
-	transform-style: preserve-3d;
-	perspective: 500px;
-	transition: width 200ms var(--c-ease);
-	will-change: width;
-	overflow: hidden;
+  transform-style: preserve-3d;
+  perspective: 500px;
+  transition: width 200ms var(--c-ease);
+  will-change: width;
+  overflow: hidden;
 
-	.cycle-char {
-		display: inline-block;
-		transform-style: preserve-3d;
-		min-width: 0.25em;
-		backface-visibility: hidden;
+  .cycle-char {
+    display: inline-block;
+    transform-style: preserve-3d;
+    min-width: 0.25em;
+    backface-visibility: hidden;
 
-		transition:
-			transform var(--c-dur) var(--c-ease),
-			opacity var(--c-dur) var(--c-ease),
-			filter var(--c-dur) var(--c-ease);
-		transition-delay: calc(var(--i, 0) * var(--c-stag));
+    transition:
+      transform var(--c-dur) var(--c-ease),
+      opacity var(--c-dur) var(--c-ease),
+      filter var(--c-dur) var(--c-ease);
+    transition-delay: calc(var(--i, 0) * var(--c-stag));
 
-		&.enter {
-			opacity: var(--c-opacity-end);
-			filter: blur(var(--c-blur-end));
-			transform: translateY(0) rotateX(0) skewX(0);
-		}
+    &.enter {
+      opacity: var(--c-opacity-end);
+      filter: blur(var(--c-blur-end));
+      transform: translateY(0) rotateX(0) skewX(0);
+    }
 
-		&.exit {
-			opacity: var(--c-opacity-start);
-			filter: blur(var(--c-blur-start));
-			transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew));
-		}
+    &.exit {
+      opacity: var(--c-opacity-start);
+      filter: blur(var(--c-blur-start));
+      transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew));
+    }
 
-		&.pre {
-			opacity: var(--c-opacity-start);
-			filter: blur(var(--c-blur-start));
-			transition: none;
-			transform: translateY(-50%) rotateX(-90deg)
-				skewX(calc(var(--c-skew) * -1));
-		}
-	}
+    &.pre {
+      opacity: var(--c-opacity-start);
+      filter: blur(var(--c-blur-start));
+      transition: none;
+      transform: translateY(-50%) rotateX(-90deg) skewX(calc(var(--c-skew) * -1));
+    }
+  }
 }

packages/ui/src/components/dialog.css

@@ -1,196 +1,192 @@
 /* [data-component="dialog-trigger"] { } */
 
 [data-component="dialog-overlay"] {
-	position: fixed;
-	inset: 0;
-	z-index: 50;
-	background-color: hsl(from var(--background-base) h s l / 0.2);
-
-	animation: overlayHide var(--transition-duration) var(--transition-easing)
-		forwards;
-
-	&[data-expanded] {
-		animation: overlayShow var(--transition-duration) var(--transition-easing)
-			forwards;
-	}
-
-	@starting-style {
-		animation: none;
-	}
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: hsl(from var(--background-base) h s l / 0.2);
+
+  animation: overlayHide var(--transition-duration) var(--transition-easing) forwards;
+
+  &[data-expanded] {
+    animation: overlayShow var(--transition-duration) var(--transition-easing) forwards;
+  }
+
+  @starting-style {
+    animation: none;
+  }
 }
 
 [data-component="dialog"] {
-	position: fixed;
-	inset: 0;
-	z-index: 50;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	pointer-events: none;
-
-	[data-slot="dialog-container"] {
-		position: relative;
-		z-index: 50;
-		width: min(calc(100vw - 16px), 640px);
-		height: min(calc(100vh - 16px), 512px);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-items: start;
-
-		[data-slot="dialog-content"] {
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			align-self: stretch;
-			width: 100%;
-			max-height: 100%;
-			min-height: 280px;
-			pointer-events: auto;
-
-			/* padding: 8px; */
-			/* padding: 8px 8px 0 8px; */
-			border-radius: var(--radius-xl);
-			background: var(--surface-raised-stronger-non-alpha);
-			background-clip: padding-box;
-			box-shadow: var(--shadow-lg-border-base);
-
-			animation: contentHide var(--transition-duration) var(--transition-easing)
-				forwards;
-
-			&[data-expanded] {
-				animation: contentShow var(--transition-duration)
-					var(--transition-easing) forwards;
-			}
-
-			@starting-style {
-				animation: none;
-			}
-
-			[data-slot="dialog-header"] {
-				display: flex;
-				padding: 20px;
-				justify-content: space-between;
-				align-items: center;
-				flex-shrink: 0;
-				align-self: stretch;
-
-				[data-slot="dialog-title"] {
-					color: var(--text-strong);
-
-					/* text-16-medium */
-					font-family: var(--font-family-sans);
-					font-size: var(--font-size-large);
-					font-style: normal;
-					font-weight: var(--font-weight-medium);
-					line-height: var(--line-height-x-large); /* 150% */
-					letter-spacing: var(--letter-spacing-tight);
-				}
-				/* [data-slot="dialog-close-button"] {} */
-			}
-
-			[data-slot="dialog-description"] {
-				display: flex;
-				padding: 16px;
-				padding-left: 24px;
-				padding-top: 0;
-				margin-top: -8px;
-				justify-content: space-between;
-				align-items: center;
-				flex-shrink: 0;
-				align-self: stretch;
-
-				color: var(--text-base);
-
-				/* text-14-regular */
-				font-family: var(--font-family-sans);
-				font-size: 14px;
-				font-style: normal;
-				font-weight: var(--font-weight-regular);
-				line-height: var(--line-height-large); /* 142.857% */
-				letter-spacing: var(--letter-spacing-normal);
-			}
-
-			[data-slot="dialog-body"] {
-				width: 100%;
-				position: relative;
-				display: flex;
-				flex-direction: column;
-				flex: 1;
-				overflow: hidden;
-
-				&:focus-visible {
-					outline: none;
-				}
-			}
-			&:focus-visible {
-				outline: none;
-			}
-		}
-	}
-
-	&[data-fit] {
-		[data-slot="dialog-container"] {
-			height: auto;
-
-			[data-slot="dialog-content"] {
-				min-height: 0;
-			}
-		}
-	}
-
-	&[data-size="large"] [data-slot="dialog-container"] {
-		width: min(calc(100vw - 32px), 800px);
-		height: min(calc(100vh - 32px), 600px);
-	}
-
-	&[data-size="x-large"] [data-slot="dialog-container"] {
-		width: min(calc(100vw - 32px), 960px);
-		height: min(calc(100vh - 32px), 600px);
-	}
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+
+  [data-slot="dialog-container"] {
+    position: relative;
+    z-index: 50;
+    width: min(calc(100vw - 16px), 640px);
+    height: min(calc(100vh - 16px), 512px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: start;
+
+    [data-slot="dialog-content"] {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      width: 100%;
+      max-height: 100%;
+      min-height: 280px;
+      pointer-events: auto;
+
+      /* padding: 8px; */
+      /* padding: 8px 8px 0 8px; */
+      border-radius: var(--radius-xl);
+      background: var(--surface-raised-stronger-non-alpha);
+      background-clip: padding-box;
+      box-shadow: var(--shadow-lg-border-base);
+
+      animation: contentHide var(--transition-duration) var(--transition-easing) forwards;
+
+      &[data-expanded] {
+        animation: contentShow var(--transition-duration) var(--transition-easing) forwards;
+      }
+
+      @starting-style {
+        animation: none;
+      }
+
+      [data-slot="dialog-header"] {
+        display: flex;
+        padding: 20px;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        [data-slot="dialog-title"] {
+          color: var(--text-strong);
+
+          /* text-16-medium */
+          font-family: var(--font-family-sans);
+          font-size: var(--font-size-large);
+          font-style: normal;
+          font-weight: var(--font-weight-medium);
+          line-height: var(--line-height-x-large); /* 150% */
+          letter-spacing: var(--letter-spacing-tight);
+        }
+        /* [data-slot="dialog-close-button"] {} */
+      }
+
+      [data-slot="dialog-description"] {
+        display: flex;
+        padding: 16px;
+        padding-left: 24px;
+        padding-top: 0;
+        margin-top: -8px;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        color: var(--text-base);
+
+        /* text-14-regular */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+      }
+
+      [data-slot="dialog-body"] {
+        width: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+
+        &:focus-visible {
+          outline: none;
+        }
+      }
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+
+  &[data-fit] {
+    [data-slot="dialog-container"] {
+      height: auto;
+
+      [data-slot="dialog-content"] {
+        min-height: 0;
+      }
+    }
+  }
+
+  &[data-size="large"] [data-slot="dialog-container"] {
+    width: min(calc(100vw - 32px), 800px);
+    height: min(calc(100vh - 32px), 600px);
+  }
+
+  &[data-size="x-large"] [data-slot="dialog-container"] {
+    width: min(calc(100vw - 32px), 960px);
+    height: min(calc(100vh - 32px), 600px);
+  }
 }
 
 [data-component="dialog"][data-transition] [data-slot="dialog-content"] {
-	animation: contentHide 100ms ease-in forwards;
+  animation: contentHide 100ms ease-in forwards;
 
-	&[data-expanded] {
-		animation: contentShow 150ms ease-out;
-	}
+  &[data-expanded] {
+    animation: contentShow 150ms ease-out;
+  }
 }
 
 @keyframes overlayShow {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 @keyframes overlayHide {
-	from {
-		opacity: 1;
-	}
-	to {
-		opacity: 0;
-	}
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 @keyframes contentShow {
-	from {
-		opacity: 0;
-		transform: translateY(2.5%) scale(0.975);
-	}
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
+  from {
+    opacity: 0;
+    transform: translateY(2.5%) scale(0.975);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 @keyframes contentHide {
-	from {
-		opacity: 1;
-		transform: scale(1);
-	}
-	to {
-		opacity: 0;
-		transform: translateY(-2.5%) scale(0.975);
-	}
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-2.5%) scale(0.975);
+  }
 }

packages/ui/src/components/diff-changes.css

@@ -1,41 +1,41 @@
 [data-component="diff-changes"] {
-	display: flex;
-	gap: 8px;
-	justify-content: flex-end;
-	align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  align-items: center;
 
-	[data-slot="diff-changes-additions"] {
-		font-family: var(--font-family-mono);
-		font-feature-settings: var(--font-family-mono--font-feature-settings);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		text-align: right;
-		color: var(--text-diff-add-base);
-	}
+  [data-slot="diff-changes-additions"] {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-family-mono--font-feature-settings);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    text-align: right;
+    color: var(--text-diff-add-base);
+  }
 
-	[data-slot="diff-changes-deletions"] {
-		font-family: var(--font-family-mono);
-		font-feature-settings: var(--font-family-mono--font-feature-settings);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		text-align: right;
-		color: var(--text-diff-delete-base);
-	}
+  [data-slot="diff-changes-deletions"] {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-family-mono--font-feature-settings);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    text-align: right;
+    color: var(--text-diff-delete-base);
+  }
 }
 
 [data-component="diff-changes"][data-variant="bars"] {
-	width: 18px;
-	flex-shrink: 0;
+  width: 18px;
+  flex-shrink: 0;
 
-	svg {
-		display: block;
-		width: 100%;
-		height: auto;
-	}
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
 }

packages/ui/src/components/diff.css

@@ -1,35 +1,35 @@
 [data-component="diff"] {
-	content-visibility: auto;
+  content-visibility: auto;
 
-	[data-slot="diff-hunk-separator-line-number"] {
-		position: sticky;
-		left: 0;
-		background-color: var(--surface-diff-hidden-strong);
-		z-index: 2;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+  [data-slot="diff-hunk-separator-line-number"] {
+    position: sticky;
+    left: 0;
+    background-color: var(--surface-diff-hidden-strong);
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-		[data-slot="diff-hunk-separator-line-number-icon"] {
-			aspect-ratio: 1;
-			width: 24px;
-			height: 24px;
-			color: var(--icon-strong-base);
-		}
-	}
-	[data-slot="diff-hunk-separator-content"] {
-		position: sticky;
-		background-color: var(--surface-diff-hidden-base);
-		color: var(--text-base);
-		width: var(--diffs-column-content-width);
-		left: var(--diffs-column-number-width);
-		padding-left: 8px;
-		user-select: none;
-		cursor: default;
-		text-align: left;
+    [data-slot="diff-hunk-separator-line-number-icon"] {
+      aspect-ratio: 1;
+      width: 24px;
+      height: 24px;
+      color: var(--icon-strong-base);
+    }
+  }
+  [data-slot="diff-hunk-separator-content"] {
+    position: sticky;
+    background-color: var(--surface-diff-hidden-base);
+    color: var(--text-base);
+    width: var(--diffs-column-content-width);
+    left: var(--diffs-column-number-width);
+    padding-left: 8px;
+    user-select: none;
+    cursor: default;
+    text-align: left;
 
-		[data-slot="diff-hunk-separator-content-span"] {
-			mix-blend-mode: var(--text-mix-blend-mode);
-		}
-	}
+    [data-slot="diff-hunk-separator-content-span"] {
+      mix-blend-mode: var(--text-mix-blend-mode);
+    }
+  }
 }

packages/ui/src/components/dropdown-menu.css

@@ -1,136 +1,134 @@
 [data-component="dropdown-menu-content"],
 [data-component="dropdown-menu-sub-content"] {
-	min-width: 8rem;
-	overflow: hidden;
-	border: none;
-	border-radius: var(--radius-md);
-	box-shadow: var(--shadow-xs-border);
-	background-clip: padding-box;
-	background-color: var(--surface-raised-stronger-non-alpha);
-	padding: 4px;
-	z-index: 100;
-	transform-origin: var(--kb-menu-content-transform-origin);
-
-	&:focus-within,
-	&:focus {
-		outline: none;
-	}
-
-	animation: dropdownMenuContentHide var(--transition-duration)
-		var(--transition-easing) forwards;
-
-	@starting-style {
-		animation: none;
-	}
-
-	&[data-expanded] {
-		pointer-events: auto;
-		animation: dropdownMenuContentShow var(--transition-duration)
-			var(--transition-easing) forwards;
-	}
+  min-width: 8rem;
+  overflow: hidden;
+  border: none;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs-border);
+  background-clip: padding-box;
+  background-color: var(--surface-raised-stronger-non-alpha);
+  padding: 4px;
+  z-index: 100;
+  transform-origin: var(--kb-menu-content-transform-origin);
+
+  &:focus-within,
+  &:focus {
+    outline: none;
+  }
+
+  animation: dropdownMenuContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
+  }
+
+  &[data-expanded] {
+    pointer-events: auto;
+    animation: dropdownMenuContentShow var(--transition-duration) var(--transition-easing) forwards;
+  }
 }
 
 [data-component="dropdown-menu-content"],
 [data-component="dropdown-menu-sub-content"] {
-	[data-slot="dropdown-menu-item"],
-	[data-slot="dropdown-menu-checkbox-item"],
-	[data-slot="dropdown-menu-radio-item"],
-	[data-slot="dropdown-menu-sub-trigger"] {
-		position: relative;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 4px 8px;
-		border-radius: var(--radius-sm);
-		cursor: default;
-		outline: none;
-
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-base);
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		color: var(--text-strong);
-
-		transition-property: background-color, color;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-		user-select: none;
-
-		&:hover {
-			background-color: var(--surface-raised-base-hover);
-		}
-
-		&[data-disabled] {
-			color: var(--text-weak);
-			pointer-events: none;
-		}
-	}
-
-	[data-slot="dropdown-menu-sub-trigger"] {
-		&[data-expanded] {
-			background: var(--surface-raised-base-hover);
-			outline: none;
-			border: none;
-		}
-	}
-
-	[data-slot="dropdown-menu-item-indicator"] {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 16px;
-		height: 16px;
-	}
-
-	[data-slot="dropdown-menu-item-label"] {
-		flex: 1;
-	}
-
-	[data-slot="dropdown-menu-item-description"] {
-		font-size: var(--font-size-x-small);
-		color: var(--text-weak);
-	}
-
-	[data-slot="dropdown-menu-separator"] {
-		height: 1px;
-		margin: 4px -4px;
-		border-top-color: var(--border-weak-base);
-	}
-
-	[data-slot="dropdown-menu-group-label"] {
-		padding: 4px 8px;
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-x-small);
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		color: var(--text-weak);
-	}
-
-	[data-slot="dropdown-menu-arrow"] {
-		fill: var(--surface-raised-stronger-non-alpha);
-	}
+  [data-slot="dropdown-menu-item"],
+  [data-slot="dropdown-menu-checkbox-item"],
+  [data-slot="dropdown-menu-radio-item"],
+  [data-slot="dropdown-menu-sub-trigger"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    cursor: default;
+    outline: none;
+
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-strong);
+
+    transition-property: background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+    user-select: none;
+
+    &:hover {
+      background-color: var(--surface-raised-base-hover);
+    }
+
+    &[data-disabled] {
+      color: var(--text-weak);
+      pointer-events: none;
+    }
+  }
+
+  [data-slot="dropdown-menu-sub-trigger"] {
+    &[data-expanded] {
+      background: var(--surface-raised-base-hover);
+      outline: none;
+      border: none;
+    }
+  }
+
+  [data-slot="dropdown-menu-item-indicator"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+  }
+
+  [data-slot="dropdown-menu-item-label"] {
+    flex: 1;
+  }
+
+  [data-slot="dropdown-menu-item-description"] {
+    font-size: var(--font-size-x-small);
+    color: var(--text-weak);
+  }
+
+  [data-slot="dropdown-menu-separator"] {
+    height: 1px;
+    margin: 4px -4px;
+    border-top-color: var(--border-weak-base);
+  }
+
+  [data-slot="dropdown-menu-group-label"] {
+    padding: 4px 8px;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-x-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-weak);
+  }
+
+  [data-slot="dropdown-menu-arrow"] {
+    fill: var(--surface-raised-stronger-non-alpha);
+  }
 }
 
 @keyframes dropdownMenuContentShow {
-	from {
-		opacity: 0;
-		transform: scaleY(0.95);
-	}
-	to {
-		opacity: 1;
-		transform: scaleY(1);
-	}
+  from {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
 }
 
 @keyframes dropdownMenuContentHide {
-	from {
-		opacity: 1;
-		transform: scaleY(1);
-	}
-	to {
-		opacity: 0;
-		transform: scaleY(0.95);
-	}
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
 }

packages/ui/src/components/file-icon.css

@@ -1,5 +1,5 @@
 [data-component="file-icon"] {
-	flex-shrink: 0;
-	width: 16px;
-	height: 16px;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
 }

packages/ui/src/components/hover-card.css

@@ -1,63 +1,61 @@
 [data-slot="hover-card-trigger"] {
-	display: flex;
-	width: 100%;
-	min-width: 0;
+  display: flex;
+  width: 100%;
+  min-width: 0;
 }
 
 [data-component="hover-card-content"] {
-	z-index: 50;
-	min-width: 200px;
-	max-width: 320px;
-	max-height: calc(100vh - 1rem);
-	border-radius: 8px;
-	background-color: var(--surface-raised-stronger-non-alpha);
-	pointer-events: auto;
-
-	border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
-	background-clip: padding-box;
-	box-shadow: var(--shadow-md);
-
-	transform-origin: var(--kb-hovercard-content-transform-origin);
-
-	&:focus-within {
-		outline: none;
-	}
-
-	&[data-closed] {
-		animation: hover-card-close var(--transition-duration)
-			var(--transition-easing);
-	}
-
-	&[data-expanded] {
-		animation: hover-card-open var(--transition-duration)
-			var(--transition-easing);
-	}
-
-	[data-slot="hover-card-body"] {
-		padding: 4px;
-		max-height: inherit;
-		overflow: hidden;
-	}
+  z-index: 50;
+  min-width: 200px;
+  max-width: 320px;
+  max-height: calc(100vh - 1rem);
+  border-radius: 8px;
+  background-color: var(--surface-raised-stronger-non-alpha);
+  pointer-events: auto;
+
+  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  background-clip: padding-box;
+  box-shadow: var(--shadow-md);
+
+  transform-origin: var(--kb-hovercard-content-transform-origin);
+
+  &:focus-within {
+    outline: none;
+  }
+
+  &[data-closed] {
+    animation: hover-card-close var(--transition-duration) var(--transition-easing);
+  }
+
+  &[data-expanded] {
+    animation: hover-card-open var(--transition-duration) var(--transition-easing);
+  }
+
+  [data-slot="hover-card-body"] {
+    padding: 4px;
+    max-height: inherit;
+    overflow: hidden;
+  }
 }
 
 @keyframes hover-card-open {
-	from {
-		opacity: 0;
-		transform: scale(0.96);
-	}
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
 @keyframes hover-card-close {
-	from {
-		opacity: 1;
-		transform: scale(1);
-	}
-	to {
-		opacity: 0;
-		transform: scale(0.96);
-	}
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
 }

packages/ui/src/components/icon-button.css

@@ -1,143 +1,143 @@
 [data-component="icon-button"] {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: var(--radius-sm);
-	text-decoration: none;
-	user-select: none;
-	aspect-ratio: 1;
-	flex-shrink: 0;
-	transition-property: background-color, color, opacity, box-shadow;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
-
-	&[data-variant="primary"] {
-		background-color: var(--icon-strong-base);
-
-		[data-slot="icon-svg"] {
-			/* color: var(--icon-weak-base); */
-			color: var(--icon-invert-base);
-
-			/* &:hover:not(:disabled) { */
-			/*   color: var(--icon-weak-hover); */
-			/* } */
-			/* &:active:not(:disabled) { */
-			/*   color: var(--icon-strong-active); */
-			/* } */
-		}
-
-		&:hover:not(:disabled) {
-			background-color: var(--icon-strong-hover);
-		}
-		&:focus:not(:disabled) {
-			background-color: var(--icon-strong-focus);
-		}
-		&:active:not(:disabled) {
-			background-color: var(--icon-strong-active);
-		}
-		&:disabled {
-			background-color: var(--icon-strong-disabled);
-
-			[data-slot="icon-svg"] {
-				color: var(--icon-invert-base);
-			}
-		}
-	}
-
-	&[data-variant="secondary"] {
-		border: transparent;
-		background-color: var(--button-secondary-base);
-		color: var(--text-strong);
-		box-shadow: var(--shadow-xs-border);
-
-		&:hover:not(:disabled) {
-			background-color: var(--button-secondary-hover);
-		}
-		&:focus:not(:disabled) {
-			background-color: var(--button-secondary-base);
-		}
-		&:focus-visible:not(:active) {
-			background-color: var(--button-secondary-base);
-			box-shadow: var(--shadow-xs-border-focus);
-		}
-		&:focus-visible:active {
-			box-shadow: none;
-		}
-		&:active:not(:disabled) {
-			background-color: var(--button-secondary-base);
-		}
-
-		[data-slot="icon-svg"] {
-			color: var(--icon-strong-base);
-		}
-
-		&:disabled {
-			background-color: var(--icon-strong-disabled);
-			color: var(--icon-invert-base);
-			cursor: not-allowed;
-		}
-	}
-
-	&[data-variant="ghost"] {
-		background-color: transparent;
-		/* color: var(--icon-base); */
-
-		[data-slot="icon-svg"] {
-			color: var(--icon-base);
-		}
-
-		&:hover:not(:disabled) {
-			background-color: var(--surface-raised-base-hover);
-
-			/* [data-slot="icon-svg"] { */
-			/*   color: var(--icon-hover); */
-			/* } */
-		}
-		&:focus-visible:not(:disabled) {
-			background-color: var(--surface-raised-base-hover);
-		}
-		&:active:not(:disabled) {
-			background-color: var(--surface-raised-base-active);
-			/* [data-slot="icon-svg"] { */
-			/*   color: var(--icon-active); */
-			/* } */
-		}
-		&[data-selected]:not(:disabled) {
-			background-color: var(--surface-raised-base-active);
-			/* [data-slot="icon-svg"] { */
-			/*   color: var(--icon-selected); */
-			/* } */
-		}
-		&:disabled {
-			color: var(--icon-invert-base);
-			cursor: not-allowed;
-		}
-	}
-
-	&[data-size="normal"] {
-		width: 24px;
-		height: 24px;
-
-		font-size: var(--font-size-small);
-		line-height: var(--line-height-large);
-		gap: calc(var(--spacing) * 0.5);
-	}
-
-	&[data-size="large"] {
-		height: 32px;
-		/* padding: 0 8px 0 6px; */
-		gap: 8px;
-
-		/* text-12-medium */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large); /* 166.667% */
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	&:focus {
-		outline: none;
-	}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  user-select: none;
+  aspect-ratio: 1;
+  flex-shrink: 0;
+  transition-property: background-color, color, opacity, box-shadow;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+
+  &[data-variant="primary"] {
+    background-color: var(--icon-strong-base);
+
+    [data-slot="icon-svg"] {
+      /* color: var(--icon-weak-base); */
+      color: var(--icon-invert-base);
+
+      /* &:hover:not(:disabled) { */
+      /*   color: var(--icon-weak-hover); */
+      /* } */
+      /* &:active:not(:disabled) { */
+      /*   color: var(--icon-strong-active); */
+      /* } */
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--icon-strong-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--icon-strong-focus);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--icon-strong-active);
+    }
+    &:disabled {
+      background-color: var(--icon-strong-disabled);
+
+      [data-slot="icon-svg"] {
+        color: var(--icon-invert-base);
+      }
+    }
+  }
+
+  &[data-variant="secondary"] {
+    border: transparent;
+    background-color: var(--button-secondary-base);
+    color: var(--text-strong);
+    box-shadow: var(--shadow-xs-border);
+
+    &:hover:not(:disabled) {
+      background-color: var(--button-secondary-hover);
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--button-secondary-base);
+    }
+    &:focus-visible:not(:active) {
+      background-color: var(--button-secondary-base);
+      box-shadow: var(--shadow-xs-border-focus);
+    }
+    &:focus-visible:active {
+      box-shadow: none;
+    }
+    &:active:not(:disabled) {
+      background-color: var(--button-secondary-base);
+    }
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-strong-base);
+    }
+
+    &:disabled {
+      background-color: var(--icon-strong-disabled);
+      color: var(--icon-invert-base);
+      cursor: not-allowed;
+    }
+  }
+
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    /* color: var(--icon-base); */
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-base);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+
+      /* [data-slot="icon-svg"] { */
+      /*   color: var(--icon-hover); */
+      /* } */
+    }
+    &:focus-visible:not(:disabled) {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:active:not(:disabled) {
+      background-color: var(--surface-raised-base-active);
+      /* [data-slot="icon-svg"] { */
+      /*   color: var(--icon-active); */
+      /* } */
+    }
+    &[data-selected]:not(:disabled) {
+      background-color: var(--surface-raised-base-active);
+      /* [data-slot="icon-svg"] { */
+      /*   color: var(--icon-selected); */
+      /* } */
+    }
+    &:disabled {
+      color: var(--icon-invert-base);
+      cursor: not-allowed;
+    }
+  }
+
+  &[data-size="normal"] {
+    width: 24px;
+    height: 24px;
+
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-large);
+    gap: calc(var(--spacing) * 0.5);
+  }
+
+  &[data-size="large"] {
+    height: 32px;
+    /* padding: 0 8px 0 6px; */
+    gap: 8px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:focus {
+    outline: none;
+  }
 }

packages/ui/src/components/icon.css

@@ -1,34 +1,34 @@
 [data-component="icon"] {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	/* resize: both; */
-	aspect-ratio: 1 / 1;
-	color: var(--icon-base);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* resize: both; */
+  aspect-ratio: 1 / 1;
+  color: var(--icon-base);
 
-	&[data-size="small"] {
-		width: 16px;
-		height: 16px;
-	}
+  &[data-size="small"] {
+    width: 16px;
+    height: 16px;
+  }
 
-	&[data-size="normal"] {
-		width: 20px;
-		height: 20px;
-	}
+  &[data-size="normal"] {
+    width: 20px;
+    height: 20px;
+  }
 
-	&[data-size="medium"] {
-		width: 24px;
-		height: 24px;
-	}
+  &[data-size="medium"] {
+    width: 24px;
+    height: 24px;
+  }
 
-	&[data-size="large"] {
-		width: 24px;
-		height: 24px;
-	}
+  &[data-size="large"] {
+    width: 24px;
+    height: 24px;
+  }
 
-	[data-slot="icon-svg"] {
-		width: 100%;
-		height: auto;
-	}
+  [data-slot="icon-svg"] {
+    width: 100%;
+    height: auto;
+  }
 }

packages/ui/src/components/icon.tsx

@@ -86,7 +86,10 @@ export interface IconProps extends ComponentProps<"svg"> {
 export function Icon(props: IconProps) {
   const [local, others] = splitProps(props, ["name", "size", "class", "classList"])
   return (
-    <div data-component="icon" data-size={typeof local.size !== 'number' ? local.size || "normal" : `size-[${local.size}px]`}>
+    <div
+      data-component="icon"
+      data-size={typeof local.size !== "number" ? local.size || "normal" : `size-[${local.size}px]`}
+    >
       <svg
         data-slot="icon-svg"
         classList={{

packages/ui/src/components/image-preview.css

@@ -1,63 +1,63 @@
 [data-component="image-preview"] {
-	position: fixed;
-	inset: 0;
-	z-index: 50;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-	[data-slot="image-preview-container"] {
-		position: relative;
-		z-index: 50;
-		width: min(calc(100vw - 32px), 90vw);
-		max-width: 1200px;
-		height: min(calc(100vh - 32px), 90vh);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+  [data-slot="image-preview-container"] {
+    position: relative;
+    z-index: 50;
+    width: min(calc(100vw - 32px), 90vw);
+    max-width: 1200px;
+    height: min(calc(100vh - 32px), 90vh);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
-		[data-slot="image-preview-content"] {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			width: 100%;
-			max-height: 100%;
-			border-radius: var(--radius-lg);
-			background: var(--surface-raised-stronger-non-alpha);
-			box-shadow:
-				0 15px 45px 0 rgba(19, 16, 16, 0.35),
-				0 3.35px 10.051px 0 rgba(19, 16, 16, 0.25),
-				0 0.998px 2.993px 0 rgba(19, 16, 16, 0.2);
-			overflow: hidden;
+    [data-slot="image-preview-content"] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      max-height: 100%;
+      border-radius: var(--radius-lg);
+      background: var(--surface-raised-stronger-non-alpha);
+      box-shadow:
+        0 15px 45px 0 rgba(19, 16, 16, 0.35),
+        0 3.35px 10.051px 0 rgba(19, 16, 16, 0.25),
+        0 0.998px 2.993px 0 rgba(19, 16, 16, 0.2);
+      overflow: hidden;
 
-			&:focus-visible {
-				outline: none;
-			}
+      &:focus-visible {
+        outline: none;
+      }
 
-			[data-slot="image-preview-header"] {
-				display: flex;
-				padding: 8px 8px 0;
-				justify-content: flex-end;
-				align-items: center;
-				align-self: stretch;
-			}
+      [data-slot="image-preview-header"] {
+        display: flex;
+        padding: 8px 8px 0;
+        justify-content: flex-end;
+        align-items: center;
+        align-self: stretch;
+      }
 
-			[data-slot="image-preview-body"] {
-				width: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 16px;
-				overflow: auto;
-			}
+      [data-slot="image-preview-body"] {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 16px;
+        overflow: auto;
+      }
 
-			[data-slot="image-preview-image"] {
-				max-width: 100%;
-				max-height: calc(90vh - 100px);
-				object-fit: contain;
-				border-radius: var(--radius-md);
-			}
-		}
-	}
+      [data-slot="image-preview-image"] {
+        max-width: 100%;
+        max-height: calc(90vh - 100px);
+        object-fit: contain;
+        border-radius: var(--radius-md);
+      }
+    }
+  }
 }

packages/ui/src/components/inline-input.css

@@ -1,17 +1,17 @@
 [data-component="inline-input"] {
-	color: inherit;
-	background: transparent;
-	border: 0;
-	border-radius: var(--radius-md);
-	padding: 0;
-	min-width: 0;
-	font: inherit;
-	letter-spacing: inherit;
-	line-height: inherit;
-	box-sizing: border-box;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 0;
+  min-width: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  box-sizing: border-box;
 
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 0 1px var(--border-interactive-focus);
-	}
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--border-interactive-focus);
+  }
 }

packages/ui/src/components/keybind.css

@@ -1,18 +1,18 @@
 [data-component="keybind"] {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	height: 20px;
-	padding: 0 8px;
-	border-radius: 2px;
-	background: var(--surface-base);
-	box-shadow: var(--shadow-xxs-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 2px;
+  background: var(--surface-base);
+  box-shadow: var(--shadow-xxs-border);
 
-	/* text-12-medium */
-	font-family: var(--font-family-sans);
-	font-size: 12px;
-	font-weight: var(--font-weight-medium);
-	line-height: 1;
-	color: var(--text-weak);
+  /* text-12-medium */
+  font-family: var(--font-family-sans);
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  color: var(--text-weak);
 }

packages/ui/src/components/line-comment.css

@@ -1,117 +1,115 @@
 [data-component="line-comment"] {
-	position: absolute;
-	right: 24px;
-	z-index: var(--line-comment-z, 30);
+  position: absolute;
+  right: 24px;
+  z-index: var(--line-comment-z, 30);
 }
 
 [data-component="line-comment"][data-open] {
-	z-index: var(--line-comment-open-z, 100);
+  z-index: var(--line-comment-open-z, 100);
 }
 
 [data-component="line-comment"] [data-slot="line-comment-button"] {
-	width: 20px;
-	height: 20px;
-	border-radius: var(--radius-md);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: var(--icon-interactive-base);
-	box-shadow: var(--shadow-xs);
-	cursor: default;
-	border: none;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--icon-interactive-base);
+  box-shadow: var(--shadow-xs);
+  cursor: default;
+  border: none;
 }
 
 [data-component="line-comment"] [data-component="icon"] {
-	color: var(--white);
+  color: var(--white);
 }
 
 [data-component="line-comment"] [data-slot="line-comment-button"]:focus {
-	outline: none;
+  outline: none;
 }
 
-[data-component="line-comment"]
-	[data-slot="line-comment-button"]:focus-visible {
-	box-shadow: var(--shadow-xs-border-focus);
+[data-component="line-comment"] [data-slot="line-comment-button"]:focus-visible {
+  box-shadow: var(--shadow-xs-border-focus);
 }
 
 [data-component="line-comment"] [data-slot="line-comment-popover"] {
-	position: absolute;
-	top: calc(100% + 4px);
-	right: -8px;
-	z-index: var(--line-comment-popover-z, 40);
-	min-width: 200px;
-	max-width: min(320px, calc(100vw - 48px));
-	border-radius: 8px;
-	background: var(--surface-raised-stronger-non-alpha);
-	box-shadow: var(--shadow-lg-border-base);
-	padding: 12px;
+  position: absolute;
+  top: calc(100% + 4px);
+  right: -8px;
+  z-index: var(--line-comment-popover-z, 40);
+  min-width: 200px;
+  max-width: min(320px, calc(100vw - 48px));
+  border-radius: 8px;
+  background: var(--surface-raised-stronger-non-alpha);
+  box-shadow: var(--shadow-lg-border-base);
+  padding: 12px;
 }
 
-[data-component="line-comment"][data-variant="editor"]
-	[data-slot="line-comment-popover"] {
-	width: 380px;
-	max-width: min(380px, calc(100vw - 48px));
-	padding: 8px;
-	border-radius: 14px;
+[data-component="line-comment"][data-variant="editor"] [data-slot="line-comment-popover"] {
+  width: 380px;
+  max-width: min(380px, calc(100vw - 48px));
+  padding: 8px;
+  border-radius: 14px;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-content"] {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-text"] {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-base);
-	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-x-large);
-	letter-spacing: var(--letter-spacing-normal);
-	color: var(--text-strong);
-	white-space: pre-wrap;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-x-large);
+  letter-spacing: var(--letter-spacing-normal);
+  color: var(--text-strong);
+  white-space: pre-wrap;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-label"],
 [data-component="line-comment"] [data-slot="line-comment-editor-label"] {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-small);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-large);
-	letter-spacing: var(--letter-spacing-normal);
-	color: var(--text-weak);
-	white-space: nowrap;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  color: var(--text-weak);
+  white-space: nowrap;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-editor"] {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-textarea"] {
-	width: 100%;
-	resize: vertical;
-	padding: 8px;
-	border-radius: var(--radius-md);
-	background: var(--surface-base);
-	border: 1px solid var(--border-base);
-	color: var(--text-strong);
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-small);
-	line-height: var(--line-height-large);
+  width: 100%;
+  resize: vertical;
+  padding: 8px;
+  border-radius: var(--radius-md);
+  background: var(--surface-base);
+  border: 1px solid var(--border-base);
+  color: var(--text-strong);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-large);
 }
 
 [data-component="line-comment"] [data-slot="line-comment-textarea"]:focus {
-	outline: none;
-	box-shadow: var(--shadow-xs-border-select);
+  outline: none;
+  box-shadow: var(--shadow-xs-border-select);
 }
 
 [data-component="line-comment"] [data-slot="line-comment-actions"] {
-	display: flex;
-	align-items: center;
-	gap: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-editor-label"] {
-	margin-right: auto;
+  margin-right: auto;
 }

packages/ui/src/components/list.css

@@ -1,337 +1,333 @@
 @property --bottom-fade {
-	syntax: "<length>";
-	inherits: false;
-	initial-value: 0px;
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
 }
 
 @keyframes scroll {
-	0% {
-		--bottom-fade: 20px;
-	}
-	90% {
-		--bottom-fade: 20px;
-	}
-	100% {
-		--bottom-fade: 0;
-	}
+  0% {
+    --bottom-fade: 20px;
+  }
+  90% {
+    --bottom-fade: 20px;
+  }
+  100% {
+    --bottom-fade: 0;
+  }
 }
 
 [data-component="list"] {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	overflow: hidden;
-	padding: 0 12px;
-
-	[data-slot="list-search-wrapper"] {
-		display: flex;
-		flex-shrink: 0;
-		align-items: center;
-		gap: 8px;
-		align-self: stretch;
-		margin-bottom: 4px;
-
-		> [data-component="icon-button"] {
-			width: 24px;
-			height: 24px;
-			flex-shrink: 0;
-			background-color: transparent;
-			opacity: 0.5;
-			transition-property: opacity;
-			transition-duration: var(--transition-duration);
-			transition-timing-function: var(--transition-easing);
-
-			&:hover:not(:disabled),
-			&:focus-visible:not(:disabled),
-			&:active:not(:disabled) {
-				background-color: transparent;
-				opacity: 0.7;
-			}
-
-			&:hover:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-hover);
-			}
-
-			&:active:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-active);
-			}
-		}
-	}
-
-	[data-slot="list-search"] {
-		display: flex;
-		flex: 1;
-		padding: 8px;
-		align-items: center;
-		gap: 12px;
-
-		border-radius: var(--radius-md);
-		background: var(--surface-base);
-
-		[data-slot="list-search-container"] {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			flex: 1 0 0;
-			max-height: 20px;
-
-			[data-slot="list-search-input"] {
-				width: 100%;
-
-				&[data-slot="input-input"] {
-					line-height: 20px;
-					max-height: 20px;
-				}
-			}
-		}
-
-		> [data-component="icon-button"] {
-			width: 20px;
-			height: 20px;
-			background-color: transparent;
-			opacity: 0.5;
-			transition-property: opacity;
-			transition-duration: var(--transition-duration);
-			transition-timing-function: var(--transition-easing);
-
-			&:hover:not(:disabled),
-			&:focus-visible:not(:disabled),
-			&:active:not(:disabled) {
-				background-color: transparent;
-				opacity: 0.7;
-			}
-
-			&:hover:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-hover);
-			}
-
-			&:active:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-active);
-			}
-		}
-
-		> [data-component="icon-button"] {
-			background-color: transparent;
-
-			&:hover:not(:disabled),
-			&:focus:not(:disabled),
-			&:active:not(:disabled) {
-				background-color: transparent;
-			}
-
-			&:hover:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-hover);
-			}
-
-			&:active:not(:disabled) [data-slot="icon-svg"] {
-				color: var(--icon-active);
-			}
-		}
-	}
-
-	[data-slot="list-scroll"] {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		overflow-y: auto;
-		overscroll-behavior: contain;
-
-		[data-slot="list-empty-state"] {
-			display: flex;
-			padding: 32px 48px;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			gap: 8px;
-			align-self: stretch;
-
-			[data-slot="list-message"] {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				gap: 2px;
-				max-width: 100%;
-				color: var(--text-weak);
-				white-space: nowrap;
-
-				/* text-14-regular */
-				font-family: var(--font-family-sans);
-				font-size: 14px;
-				font-style: normal;
-				font-weight: var(--font-weight-regular);
-				line-height: var(--line-height-large); /* 142.857% */
-				letter-spacing: var(--letter-spacing-normal);
-			}
-
-			[data-slot="list-filter"] {
-				color: var(--text-strong);
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-
-		[data-slot="list-group"] {
-			position: relative;
-			display: flex;
-			flex-direction: column;
-
-			&:last-child {
-				padding-bottom: 12px;
-			}
-
-			[data-slot="list-header"] {
-				display: flex;
-				z-index: 10;
-				padding: 8px 12px 8px 8px;
-				justify-content: space-between;
-				align-items: center;
-				align-self: stretch;
-				background: var(--surface-raised-stronger-non-alpha);
-				position: sticky;
-				top: 0;
-
-				color: var(--text-weak);
-
-				/* text-14-medium */
-				font-family: var(--font-family-sans);
-				font-size: 14px;
-				font-style: normal;
-				font-weight: var(--font-weight-medium);
-				line-height: var(--line-height-large); /* 142.857% */
-				letter-spacing: var(--letter-spacing-normal);
-
-				&::after {
-					content: "";
-					position: absolute;
-					top: 100%;
-					left: 0;
-					right: 0;
-					height: 16px;
-					background: linear-gradient(
-						to bottom,
-						var(--surface-raised-stronger-non-alpha),
-						transparent
-					);
-					pointer-events: none;
-					opacity: 0;
-					transition-property: opacity;
-					transition-duration: var(--transition-duration);
-					transition-timing-function: var(--transition-easing);
-				}
-
-				&[data-stuck="true"]::after {
-					opacity: 1;
-				}
-			}
-
-			[data-slot="list-items"] {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-start;
-				align-self: stretch;
-
-				[data-slot="list-item"] {
-					display: flex;
-					position: relative;
-					width: 100%;
-					padding: 6px 8px 6px 8px;
-					align-items: center;
-					color: var(--text-strong);
-					scroll-margin-top: 28px;
-
-					/* text-14-medium */
-					font-family: var(--font-family-sans);
-					font-size: 14px;
-					font-style: normal;
-					font-weight: var(--font-weight-medium);
-					line-height: var(--line-height-large); /* 142.857% */
-					letter-spacing: var(--letter-spacing-normal);
-
-					[data-slot="list-item-selected-icon"] {
-						display: inline-flex;
-						align-items: center;
-						justify-content: center;
-						flex-shrink: 0;
-						aspect-ratio: 1 / 1;
-						[data-component="icon"] {
-							color: var(--icon-strong-base);
-						}
-					}
-
-					[name="check"] {
-						color: var(--icon-strong-base);
-					}
-
-					[data-slot="list-item-active-icon"] {
-						display: none;
-						align-items: center;
-						justify-content: center;
-						flex-shrink: 0;
-						aspect-ratio: 1 / 1;
-						[data-component="icon"] {
-							color: var(--icon-strong-base);
-						}
-					}
-
-					[data-slot="list-item-extra-icon"] {
-						color: var(--icon-base);
-						margin-left: -4px;
-					}
-
-					[data-slot="list-item-divider"] {
-						position: absolute;
-						bottom: 0;
-						left: var(--list-divider-inset, 16px);
-						right: var(--list-divider-inset, 16px);
-						height: 1px;
-						background: var(--border-weak-base);
-						pointer-events: none;
-					}
-
-					[data-slot="list-item"]:last-child [data-slot="list-item-divider"] {
-						display: none;
-					}
-
-					&[data-active="true"] {
-						border-radius: var(--radius-md);
-						background: var(--surface-raised-base-hover);
-						[data-slot="list-item-active-icon"] {
-							display: inline-flex;
-						}
-						[data-slot="list-item-extra-icon"] {
-							display: block !important;
-							color: var(--icon-strong-base) !important;
-						}
-					}
-					&:active {
-						background: var(--surface-raised-base-active);
-					}
-					&:focus-visible {
-						outline: none;
-					}
-				}
-
-				[data-slot="list-item-add"] {
-					display: flex;
-					position: relative;
-					width: 100%;
-					padding: 6px 8px 6px 8px;
-					align-items: center;
-					color: var(--text-strong);
-
-					/* text-14-medium */
-					font-family: var(--font-family-sans);
-					font-size: 14px;
-					font-style: normal;
-					font-weight: var(--font-weight-medium);
-					line-height: var(--line-height-large); /* 142.857% */
-					letter-spacing: var(--letter-spacing-normal);
-
-					[data-component="input"] {
-						width: 100%;
-					}
-				}
-			}
-		}
-	}
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  padding: 0 12px;
+
+  [data-slot="list-search-wrapper"] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    margin-bottom: 4px;
+
+    > [data-component="icon-button"] {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      background-color: transparent;
+      opacity: 0.5;
+      transition-property: opacity;
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-easing);
+
+      &:hover:not(:disabled),
+      &:focus-visible:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: transparent;
+        opacity: 0.7;
+      }
+
+      &:hover:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
+
+      &:active:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
+    }
+  }
+
+  [data-slot="list-search"] {
+    display: flex;
+    flex: 1;
+    padding: 8px;
+    align-items: center;
+    gap: 12px;
+
+    border-radius: var(--radius-md);
+    background: var(--surface-base);
+
+    [data-slot="list-search-container"] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1 0 0;
+      max-height: 20px;
+
+      [data-slot="list-search-input"] {
+        width: 100%;
+
+        &[data-slot="input-input"] {
+          line-height: 20px;
+          max-height: 20px;
+        }
+      }
+    }
+
+    > [data-component="icon-button"] {
+      width: 20px;
+      height: 20px;
+      background-color: transparent;
+      opacity: 0.5;
+      transition-property: opacity;
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-easing);
+
+      &:hover:not(:disabled),
+      &:focus-visible:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: transparent;
+        opacity: 0.7;
+      }
+
+      &:hover:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
+
+      &:active:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
+    }
+
+    > [data-component="icon-button"] {
+      background-color: transparent;
+
+      &:hover:not(:disabled),
+      &:focus:not(:disabled),
+      &:active:not(:disabled) {
+        background-color: transparent;
+      }
+
+      &:hover:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-hover);
+      }
+
+      &:active:not(:disabled) [data-slot="icon-svg"] {
+        color: var(--icon-active);
+      }
+    }
+  }
+
+  [data-slot="list-scroll"] {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+
+    [data-slot="list-empty-state"] {
+      display: flex;
+      padding: 32px 48px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 8px;
+      align-self: stretch;
+
+      [data-slot="list-message"] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2px;
+        max-width: 100%;
+        color: var(--text-weak);
+        white-space: nowrap;
+
+        /* text-14-regular */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+      }
+
+      [data-slot="list-filter"] {
+        color: var(--text-strong);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    [data-slot="list-group"] {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      &:last-child {
+        padding-bottom: 12px;
+      }
+
+      [data-slot="list-header"] {
+        display: flex;
+        z-index: 10;
+        padding: 8px 12px 8px 8px;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        background: var(--surface-raised-stronger-non-alpha);
+        position: sticky;
+        top: 0;
+
+        color: var(--text-weak);
+
+        /* text-14-medium */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-medium);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          height: 16px;
+          background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
+          pointer-events: none;
+          opacity: 0;
+          transition-property: opacity;
+          transition-duration: var(--transition-duration);
+          transition-timing-function: var(--transition-easing);
+        }
+
+        &[data-stuck="true"]::after {
+          opacity: 1;
+        }
+      }
+
+      [data-slot="list-items"] {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+
+        [data-slot="list-item"] {
+          display: flex;
+          position: relative;
+          width: 100%;
+          padding: 6px 8px 6px 8px;
+          align-items: center;
+          color: var(--text-strong);
+          scroll-margin-top: 28px;
+
+          /* text-14-medium */
+          font-family: var(--font-family-sans);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: var(--font-weight-medium);
+          line-height: var(--line-height-large); /* 142.857% */
+          letter-spacing: var(--letter-spacing-normal);
+
+          [data-slot="list-item-selected-icon"] {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            aspect-ratio: 1 / 1;
+            [data-component="icon"] {
+              color: var(--icon-strong-base);
+            }
+          }
+
+          [name="check"] {
+            color: var(--icon-strong-base);
+          }
+
+          [data-slot="list-item-active-icon"] {
+            display: none;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            aspect-ratio: 1 / 1;
+            [data-component="icon"] {
+              color: var(--icon-strong-base);
+            }
+          }
+
+          [data-slot="list-item-extra-icon"] {
+            color: var(--icon-base);
+            margin-left: -4px;
+          }
+
+          [data-slot="list-item-divider"] {
+            position: absolute;
+            bottom: 0;
+            left: var(--list-divider-inset, 16px);
+            right: var(--list-divider-inset, 16px);
+            height: 1px;
+            background: var(--border-weak-base);
+            pointer-events: none;
+          }
+
+          [data-slot="list-item"]:last-child [data-slot="list-item-divider"] {
+            display: none;
+          }
+
+          &[data-active="true"] {
+            border-radius: var(--radius-md);
+            background: var(--surface-raised-base-hover);
+            [data-slot="list-item-active-icon"] {
+              display: inline-flex;
+            }
+            [data-slot="list-item-extra-icon"] {
+              display: block !important;
+              color: var(--icon-strong-base) !important;
+            }
+          }
+          &:active {
+            background: var(--surface-raised-base-active);
+          }
+          &:focus-visible {
+            outline: none;
+          }
+        }
+
+        [data-slot="list-item-add"] {
+          display: flex;
+          position: relative;
+          width: 100%;
+          padding: 6px 8px 6px 8px;
+          align-items: center;
+          color: var(--text-strong);
+
+          /* text-14-medium */
+          font-family: var(--font-family-sans);
+          font-size: 14px;
+          font-style: normal;
+          font-weight: var(--font-weight-medium);
+          line-height: var(--line-height-large); /* 142.857% */
+          letter-spacing: var(--letter-spacing-normal);
+
+          [data-component="input"] {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
 }

packages/ui/src/components/list.tsx

@@ -268,13 +268,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
           {searchAction()}
         </div>
       </Show>
-      <ScrollFade
-        ref={setScrollRef}
-        direction="vertical"
-        fadeStartSize={0}
-        fadeEndSize={20}
-        data-slot="list-scroll"
-      >
+      <ScrollFade ref={setScrollRef} direction="vertical" fadeStartSize={0} fadeEndSize={20} data-slot="list-scroll">
         <Show
           when={flat().length > 0 || showAdd()}
           fallback={

packages/ui/src/components/logo.css

@@ -1,4 +1,4 @@
 [data-component="logo-mark"] {
-	width: 16px;
-	aspect-ratio: 4 / 5;
+  width: 16px;
+  aspect-ratio: 4 / 5;
 }

packages/ui/src/components/markdown.css

@@ -1,211 +1,209 @@
 [data-component="markdown"] {
-	/* Reset & Base Typography */
-	min-width: 0;
-	max-width: 100%;
-	overflow-wrap: break-word;
-	color: var(--text-base);
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-base); /* 14px */
-	line-height: var(--line-height-x-large);
-
-	/* Spacing for flow */
-	> *:first-child {
-		margin-top: 0;
-	}
-	> *:last-child {
-		margin-bottom: 0;
-	}
-
-	/* Headings: Same size, distinguished by color and spacing */
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		font-size: var(--font-size-base);
-		color: var(--text-strong);
-		font-weight: var(--font-weight-medium);
-		margin-top: 2rem;
-		margin-bottom: 0.75rem;
-		line-height: var(--line-height-large);
-	}
-
-	/* Emphasis & Strong: Neutral strong color */
-	strong,
-	b {
-		color: var(--text-strong);
-		font-weight: var(--font-weight-medium);
-	}
-
-	/* Paragraphs */
-	p {
-		margin-bottom: 1rem;
-	}
-
-	/* Links */
-	a {
-		color: var(--text-interactive-base);
-		text-decoration: none;
-		font-weight: inherit;
-	}
-
-	a:hover {
-		text-decoration: underline;
-		text-underline-offset: 2px;
-	}
-
-	/* Lists */
-	ul,
-	ol {
-		margin-top: 0.5rem;
-		margin-bottom: 1rem;
-		padding-left: 1.5rem;
-		list-style-position: outside;
-	}
-
-	ul {
-		list-style-type: disc;
-	}
-
-	ol {
-		list-style-type: decimal;
-	}
-
-	li {
-		margin-bottom: 0.5rem;
-	}
-
-	li > p:first-child {
-		display: inline;
-		margin: 0;
-	}
-
-	li > p + p {
-		display: block;
-		margin-top: 0.5rem;
-	}
-
-	li::marker {
-		color: var(--text-weak);
-	}
-
-	/* Nested lists spacing */
-	li > ul,
-	li > ol {
-		margin-top: 0.25rem;
-		margin-bottom: 0.25rem;
-		padding-left: 1rem; /* Minimal indent for nesting only */
-	}
-
-	/* Blockquotes */
-	blockquote {
-		border-left: 2px solid var(--border-weak-base);
-		margin: 1.5rem 0;
-		padding-left: 0.5rem;
-		color: var(--text-weak);
-		font-style: normal;
-	}
-
-	/* Horizontal Rule - Invisible spacing only */
-	hr {
-		border: none;
-		height: 0;
-		margin: 2.5rem 0;
-	}
-
-	.shiki {
-		font-size: 13px;
-		padding: 8px 12px;
-		border-radius: 4px;
-		border: 0.5px solid var(--border-weak-base);
-	}
-
-	[data-component="markdown-code"] {
-		position: relative;
-	}
-
-	[data-slot="markdown-copy-button"] {
-		position: absolute;
-		top: 8px;
-		right: 8px;
-		opacity: 0;
-		transition: opacity 0.15s ease;
-		z-index: 1;
-	}
-
-	[data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
-		opacity: 1;
-	}
-
-	[data-slot="markdown-copy-button"] [data-slot="check-icon"] {
-		display: none;
-	}
-
-	[data-slot="markdown-copy-button"][data-copied="true"]
-		[data-slot="copy-icon"] {
-		display: none;
-	}
-
-	[data-slot="markdown-copy-button"][data-copied="true"]
-		[data-slot="check-icon"] {
-		display: inline-flex;
-	}
-
-	pre {
-		margin-top: 2rem;
-		margin-bottom: 2rem;
-		overflow: auto;
-
-		scrollbar-width: none;
-		&::-webkit-scrollbar {
-			display: none;
-		}
-	}
-
-	:not(pre) > code {
-		font-family: var(--font-family-mono);
-		font-feature-settings: var(--font-family-mono--font-feature-settings);
-		color: var(--syntax-string);
-		font-weight: var(--font-weight-medium);
-		/* font-size: 13px; */
-
-		/* padding: 2px 2px; */
-		/* margin: 0 1.5px; */
-		/* border-radius: 2px; */
-		/* background: var(--surface-base); */
-		/* box-shadow: 0 0 0 0.5px var(--border-weak-base); */
-	}
-
-	/* Tables */
-	table {
-		width: 100%;
-		border-collapse: collapse;
-		margin: 1.5rem 0;
-		font-size: var(--font-size-base);
-	}
-
-	th,
-	td {
-		/* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
-		border-bottom: 1px solid var(--border-weaker-base);
-		padding: 0.75rem 0.5rem;
-		text-align: left;
-		vertical-align: top;
-	}
-
-	th {
-		color: var(--text-strong);
-		font-weight: var(--font-weight-medium);
-		border-bottom: 1px solid var(--border-weak-base);
-	}
-
-	/* Images */
-	img {
-		max-width: 100%;
-		height: auto;
-		border-radius: 4px;
-		margin: 1.5rem 0;
-		display: block;
-	}
+  /* Reset & Base Typography */
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  color: var(--text-base);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base); /* 14px */
+  line-height: var(--line-height-x-large);
+
+  /* Spacing for flow */
+  > *:first-child {
+    margin-top: 0;
+  }
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Headings: Same size, distinguished by color and spacing */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: var(--font-size-base);
+    color: var(--text-strong);
+    font-weight: var(--font-weight-medium);
+    margin-top: 2rem;
+    margin-bottom: 0.75rem;
+    line-height: var(--line-height-large);
+  }
+
+  /* Emphasis & Strong: Neutral strong color */
+  strong,
+  b {
+    color: var(--text-strong);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Paragraphs */
+  p {
+    margin-bottom: 1rem;
+  }
+
+  /* Links */
+  a {
+    color: var(--text-interactive-base);
+    text-decoration: none;
+    font-weight: inherit;
+  }
+
+  a:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  /* Lists */
+  ul,
+  ol {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    list-style-position: outside;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+
+  li > p:first-child {
+    display: inline;
+    margin: 0;
+  }
+
+  li > p + p {
+    display: block;
+    margin-top: 0.5rem;
+  }
+
+  li::marker {
+    color: var(--text-weak);
+  }
+
+  /* Nested lists spacing */
+  li > ul,
+  li > ol {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    padding-left: 1rem; /* Minimal indent for nesting only */
+  }
+
+  /* Blockquotes */
+  blockquote {
+    border-left: 2px solid var(--border-weak-base);
+    margin: 1.5rem 0;
+    padding-left: 0.5rem;
+    color: var(--text-weak);
+    font-style: normal;
+  }
+
+  /* Horizontal Rule - Invisible spacing only */
+  hr {
+    border: none;
+    height: 0;
+    margin: 2.5rem 0;
+  }
+
+  .shiki {
+    font-size: 13px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 0.5px solid var(--border-weak-base);
+  }
+
+  [data-component="markdown-code"] {
+    position: relative;
+  }
+
+  [data-slot="markdown-copy-button"] {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: 1;
+  }
+
+  [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
+    opacity: 1;
+  }
+
+  [data-slot="markdown-copy-button"] [data-slot="check-icon"] {
+    display: none;
+  }
+
+  [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="copy-icon"] {
+    display: none;
+  }
+
+  [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="check-icon"] {
+    display: inline-flex;
+  }
+
+  pre {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    overflow: auto;
+
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  :not(pre) > code {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-family-mono--font-feature-settings);
+    color: var(--syntax-string);
+    font-weight: var(--font-weight-medium);
+    /* font-size: 13px; */
+
+    /* padding: 2px 2px; */
+    /* margin: 0 1.5px; */
+    /* border-radius: 2px; */
+    /* background: var(--surface-base); */
+    /* box-shadow: 0 0 0 0.5px var(--border-weak-base); */
+  }
+
+  /* Tables */
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+    font-size: var(--font-size-base);
+  }
+
+  th,
+  td {
+    /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
+    border-bottom: 1px solid var(--border-weaker-base);
+    padding: 0.75rem 0.5rem;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    color: var(--text-strong);
+    font-weight: var(--font-weight-medium);
+    border-bottom: 1px solid var(--border-weak-base);
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin: 1.5rem 0;
+    display: block;
+  }
 }

packages/ui/src/components/message-nav.css

@@ -1,123 +1,122 @@
 [data-component="message-nav"] {
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	padding-left: 0;
-	list-style: none;
-
-	&[data-size="normal"] {
-		width: 240px;
-		gap: 4px;
-	}
-
-	&[data-size="compact"] {
-		width: 24px;
-	}
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-left: 0;
+  list-style: none;
+
+  &[data-size="normal"] {
+    width: 240px;
+    gap: 4px;
+  }
+
+  &[data-size="compact"] {
+    width: 24px;
+  }
 }
 
 [data-slot="message-nav-item"] {
-	display: flex;
-	align-items: center;
-	align-self: stretch;
-	justify-content: flex-end;
-
-	[data-component="message-nav"][data-size="normal"] & {
-		justify-content: flex-start;
-	}
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: flex-end;
+
+  [data-component="message-nav"][data-size="normal"] & {
+    justify-content: flex-start;
+  }
 }
 
 [data-slot="message-nav-tick-button"] {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	height: 12px;
-	width: 24px;
-	border: none;
-	background: none;
-	padding: 0;
-
-	&[data-active] [data-slot="message-nav-tick-line"] {
-		background-color: var(--icon-strong-base);
-		width: 100%;
-	}
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 12px;
+  width: 24px;
+  border: none;
+  background: none;
+  padding: 0;
+
+  &[data-active] [data-slot="message-nav-tick-line"] {
+    background-color: var(--icon-strong-base);
+    width: 100%;
+  }
 }
 
 [data-slot="message-nav-tick-line"] {
-	height: 1px;
-	width: 16px;
-	background-color: var(--icon-base);
-	transition:
-		width 0.2s,
-		background-color 0.2s;
+  height: 1px;
+  width: 16px;
+  background-color: var(--icon-base);
+  transition:
+    width 0.2s,
+    background-color 0.2s;
 }
 
-[data-slot="message-nav-tick-button"]:hover
-	[data-slot="message-nav-tick-line"] {
-	width: 100%;
-	background-color: var(--icon-strong-base);
+[data-slot="message-nav-tick-button"]:hover [data-slot="message-nav-tick-line"] {
+  width: 100%;
+  background-color: var(--icon-strong-base);
 }
 
 [data-slot="message-nav-message-button"] {
-	display: flex;
-	align-items: center;
-	align-self: stretch;
-	width: 100%;
-	column-gap: 12px;
-	cursor: default;
-	border: none;
-	background: none;
-	padding: 4px 12px;
-	border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  column-gap: 12px;
+  cursor: default;
+  border: none;
+  background: none;
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
 }
 
 [data-slot="message-nav-title-preview"] {
-	font-size: 14px; /* text-14-regular */
-	color: var(--text-base);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	min-width: 0;
-	text-align: left;
-
-	&[data-active] {
-		color: var(--text-strong);
-	}
+  font-size: 14px; /* text-14-regular */
+  color: var(--text-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  text-align: left;
+
+  &[data-active] {
+    color: var(--text-strong);
+  }
 }
 
 [data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
-	background-color: var(--surface-base);
+  background-color: var(--surface-base);
 }
 [data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] {
-	background-color: var(--surface-base-active);
+  background-color: var(--surface-base-active);
 }
 
 [data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
-	color: var(--text-base);
+  color: var(--text-base);
 }
 
 [data-slot="message-nav-tooltip"] {
-	z-index: 1000;
+  z-index: 1000;
 }
 
 [data-slot="message-nav-tooltip-content"] {
-	display: flex;
-	padding: 4px 4px 6px 4px;
-	justify-content: center;
-	align-items: center;
-	border-radius: var(--radius-md);
-	background: var(--surface-raised-stronger-non-alpha);
-	max-height: calc(100vh - 6rem);
-	overflow-y: auto;
-
-	/* border/shadow-xs/base */
-	box-shadow:
-		0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
-		0 1px 2px -1px rgba(19, 16, 16, 0.04),
-		0 1px 2px 0 rgba(19, 16, 16, 0.06),
-		0 1px 3px 0 rgba(19, 16, 16, 0.08);
-
-	* {
-		margin: 0 !important;
-	}
+  display: flex;
+  padding: 4px 4px 6px 4px;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-stronger-non-alpha);
+  max-height: calc(100vh - 6rem);
+  overflow-y: auto;
+
+  /* border/shadow-xs/base */
+  box-shadow:
+    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06),
+    0 1px 3px 0 rgba(19, 16, 16, 0.08);
+
+  * {
+    margin: 0 !important;
+  }
 }

packages/ui/src/components/message-part.css

@@ -1,439 +1,439 @@
 [data-component="assistant-message"] {
-	content-visibility: auto;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 12px;
+  content-visibility: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
 }
 
 [data-component="user-message"] {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-base);
-	font-style: normal;
-	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-large);
-	letter-spacing: var(--letter-spacing-normal);
-	color: var(--text-base);
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	[data-slot="user-message-attachments"] {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-	}
-
-	[data-slot="user-message-attachment"] {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		border-radius: 6px;
-		overflow: hidden;
-		background: var(--surface-weak);
-		border: 1px solid var(--border-weak-base);
-		transition: border-color 0.15s ease;
-
-		&:hover {
-			border-color: var(--border-strong-base);
-		}
-
-		&[data-type="image"] {
-			width: 48px;
-			height: 48px;
-		}
-
-		&[data-type="file"] {
-			width: 48px;
-			height: 48px;
-		}
-	}
-
-	[data-slot="user-message-attachment-image"] {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	[data-slot="user-message-attachment-icon"] {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--icon-weak);
-
-		[data-component="icon"] {
-			width: 20px;
-			height: 20px;
-		}
-	}
-
-	[data-slot="user-message-text"] {
-		position: relative;
-		white-space: pre-wrap;
-		word-break: break-word;
-		overflow: hidden;
-		background: var(--surface-weak);
-		border: 1px solid var(--border-weak-base);
-		padding: 8px 12px;
-		border-radius: 4px;
-
-		[data-highlight="file"] {
-			color: var(--syntax-property);
-		}
-
-		[data-highlight="agent"] {
-			color: var(--syntax-type);
-		}
-
-		[data-slot="user-message-copy-wrapper"] {
-			position: absolute;
-			top: 7px;
-			right: 7px;
-			opacity: 0;
-			transition: opacity 0.15s ease;
-		}
-
-		&:hover [data-slot="user-message-copy-wrapper"] {
-			opacity: 1;
-		}
-	}
-
-	.text-text-strong {
-		color: var(--text-strong);
-	}
-
-	.font-medium {
-		font-weight: var(--font-weight-medium);
-	}
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  color: var(--text-base);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  [data-slot="user-message-attachments"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  [data-slot="user-message-attachment"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--surface-weak);
+    border: 1px solid var(--border-weak-base);
+    transition: border-color 0.15s ease;
+
+    &:hover {
+      border-color: var(--border-strong-base);
+    }
+
+    &[data-type="image"] {
+      width: 48px;
+      height: 48px;
+    }
+
+    &[data-type="file"] {
+      width: 48px;
+      height: 48px;
+    }
+  }
+
+  [data-slot="user-message-attachment-image"] {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  [data-slot="user-message-attachment-icon"] {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-weak);
+
+    [data-component="icon"] {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  [data-slot="user-message-text"] {
+    position: relative;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow: hidden;
+    background: var(--surface-weak);
+    border: 1px solid var(--border-weak-base);
+    padding: 8px 12px;
+    border-radius: 4px;
+
+    [data-highlight="file"] {
+      color: var(--syntax-property);
+    }
+
+    [data-highlight="agent"] {
+      color: var(--syntax-type);
+    }
+
+    [data-slot="user-message-copy-wrapper"] {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    &:hover [data-slot="user-message-copy-wrapper"] {
+      opacity: 1;
+    }
+  }
+
+  .text-text-strong {
+    color: var(--text-strong);
+  }
+
+  .font-medium {
+    font-weight: var(--font-weight-medium);
+  }
 }
 
 [data-component="text-part"] {
-	width: 100%;
-
-	[data-slot="text-part-body"] {
-		position: relative;
-		margin-top: 32px;
-	}
-
-	[data-slot="text-part-copy-wrapper"] {
-		position: absolute;
-		top: 8px;
-		right: 8px;
-		opacity: 0;
-		transition: opacity 0.15s ease;
-		z-index: 1;
-	}
-
-	[data-slot="text-part-body"]:hover [data-slot="text-part-copy-wrapper"] {
-		opacity: 1;
-	}
-
-	[data-component="markdown"] {
-		margin-top: 0;
-		font-size: var(--font-size-base);
-	}
+  width: 100%;
+
+  [data-slot="text-part-body"] {
+    position: relative;
+    margin-top: 32px;
+  }
+
+  [data-slot="text-part-copy-wrapper"] {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: 1;
+  }
+
+  [data-slot="text-part-body"]:hover [data-slot="text-part-copy-wrapper"] {
+    opacity: 1;
+  }
+
+  [data-component="markdown"] {
+    margin-top: 0;
+    font-size: var(--font-size-base);
+  }
 }
 
 [data-component="reasoning-part"] {
-	width: 100%;
-	color: var(--text-base);
-	opacity: 0.8;
-	line-height: var(--line-height-large);
-
-	[data-component="markdown"] {
-		margin-top: 24px;
-		font-style: italic !important;
-
-		p:has(strong) {
-			margin-top: 24px;
-			margin-bottom: 0;
-
-			&:first-child {
-				margin-top: 0;
-			}
-		}
-	}
+  width: 100%;
+  color: var(--text-base);
+  opacity: 0.8;
+  line-height: var(--line-height-large);
+
+  [data-component="markdown"] {
+    margin-top: 24px;
+    font-style: italic !important;
+
+    p:has(strong) {
+      margin-top: 24px;
+      margin-bottom: 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
 }
 
 [data-component="tool-error"] {
-	display: flex;
-	align-items: start;
-	gap: 8px;
-
-	[data-slot="icon-svg"] {
-		color: var(--icon-critical-base);
-		margin-top: 4px;
-	}
-
-	[data-slot="message-part-tool-error-content"] {
-		display: flex;
-		align-items: start;
-		gap: 8px;
-	}
-
-	[data-slot="message-part-tool-error-title"] {
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-base);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		color: var(--text-on-critical-base);
-		white-space: nowrap;
-	}
-
-	[data-slot="message-part-tool-error-message"] {
-		color: var(--text-on-critical-weak);
-		max-height: 240px;
-		overflow-y: auto;
-		word-break: break-word;
-	}
+  display: flex;
+  align-items: start;
+  gap: 8px;
+
+  [data-slot="icon-svg"] {
+    color: var(--icon-critical-base);
+    margin-top: 4px;
+  }
+
+  [data-slot="message-part-tool-error-content"] {
+    display: flex;
+    align-items: start;
+    gap: 8px;
+  }
+
+  [data-slot="message-part-tool-error-title"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-on-critical-base);
+    white-space: nowrap;
+  }
+
+  [data-slot="message-part-tool-error-message"] {
+    color: var(--text-on-critical-weak);
+    max-height: 240px;
+    overflow-y: auto;
+    word-break: break-word;
+  }
 }
 
 [data-component="tool-output"] {
-	white-space: pre;
-	padding: 8px 12px;
-	height: fit-content;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	justify-content: flex-start;
-
-	[data-component="markdown"] {
-		width: 100%;
-		min-width: 0;
-
-		pre {
-			margin: 0;
-			padding: 0;
-			background-color: transparent !important;
-			border: none !important;
-		}
-	}
-
-	pre {
-		margin: 0;
-		padding: 0;
-		background: none;
-	}
-
-	&[data-scrollable] {
-		height: auto;
-		max-height: 240px;
-		overflow-y: auto;
-		scrollbar-width: none;
-		-ms-overflow-style: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		[data-component="markdown"] {
-			overflow: visible;
-		}
-	}
+  white-space: pre;
+  padding: 8px 12px;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  [data-component="markdown"] {
+    width: 100%;
+    min-width: 0;
+
+    pre {
+      margin: 0;
+      padding: 0;
+      background-color: transparent !important;
+      border: none !important;
+    }
+  }
+
+  pre {
+    margin: 0;
+    padding: 0;
+    background: none;
+  }
+
+  &[data-scrollable] {
+    height: auto;
+    max-height: 240px;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    [data-component="markdown"] {
+      overflow: visible;
+    }
+  }
 }
 
 [data-component="edit-trigger"],
 [data-component="write-trigger"] {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	width: 100%;
-
-	[data-slot="message-part-title-area"] {
-		flex-grow: 1;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		min-width: 0;
-	}
-
-	[data-slot="message-part-title"] {
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-base);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-		color: var(--text-base);
-	}
-
-	[data-slot="message-part-title-text"] {
-		text-transform: capitalize;
-	}
-
-	[data-slot="message-part-title-filename"] {
-		/* No text-transform - preserve original filename casing */
-	}
-
-	[data-slot="message-part-path"] {
-		display: flex;
-		flex-grow: 1;
-		min-width: 0;
-	}
-
-	[data-slot="message-part-directory"] {
-		color: var(--text-weak);
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		direction: rtl;
-		text-align: left;
-	}
-
-	[data-slot="message-part-filename"] {
-		color: var(--text-strong);
-		flex-shrink: 0;
-	}
-
-	[data-slot="message-part-actions"] {
-		display: flex;
-		gap: 16px;
-		align-items: center;
-		justify-content: flex-end;
-	}
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+
+  [data-slot="message-part-title-area"] {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  [data-slot="message-part-title"] {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-base);
+  }
+
+  [data-slot="message-part-title-text"] {
+    text-transform: capitalize;
+  }
+
+  [data-slot="message-part-title-filename"] {
+    /* No text-transform - preserve original filename casing */
+  }
+
+  [data-slot="message-part-path"] {
+    display: flex;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  [data-slot="message-part-directory"] {
+    color: var(--text-weak);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    direction: rtl;
+    text-align: left;
+  }
+
+  [data-slot="message-part-filename"] {
+    color: var(--text-strong);
+    flex-shrink: 0;
+  }
+
+  [data-slot="message-part-actions"] {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+  }
 }
 
 [data-component="edit-content"] {
-	border-top: 1px solid var(--border-weaker-base);
-	max-height: 420px;
-	overflow-y: auto;
+  border-top: 1px solid var(--border-weaker-base);
+  max-height: 420px;
+  overflow-y: auto;
 
-	scrollbar-width: none;
-	-ms-overflow-style: none;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 
-	&::-webkit-scrollbar {
-		display: none;
-	}
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 [data-component="write-content"] {
-	border-top: 1px solid var(--border-weaker-base);
-	max-height: 240px;
-	overflow-y: auto;
+  border-top: 1px solid var(--border-weaker-base);
+  max-height: 240px;
+  overflow-y: auto;
 
-	[data-component="code"] {
-		padding-bottom: 0px !important;
-	}
+  [data-component="code"] {
+    padding-bottom: 0px !important;
+  }
 
-	/* Hide scrollbar */
-	scrollbar-width: none;
-	-ms-overflow-style: none;
+  /* Hide scrollbar */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 
-	&::-webkit-scrollbar {
-		display: none;
-	}
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 [data-component="tool-action"] {
-	width: 24px;
-	height: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 [data-component="todos"] {
-	padding: 10px 12px 24px 48px;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	[data-slot="message-part-todo-content"] {
-		&[data-completed="completed"] {
-			text-decoration: line-through;
-			color: var(--text-weaker);
-		}
-	}
+  padding: 10px 12px 24px 48px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  [data-slot="message-part-todo-content"] {
+    &[data-completed="completed"] {
+      text-decoration: line-through;
+      color: var(--text-weaker);
+    }
+  }
 }
 
 [data-component="task-tools"] {
-	padding: 8px 12px;
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-
-	[data-slot="task-tool-item"] {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: var(--text-weak);
-
-		[data-slot="icon-svg"] {
-			flex-shrink: 0;
-			color: var(--icon-weak);
-		}
-	}
-
-	[data-slot="task-tool-title"] {
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		color: var(--text-weak);
-	}
-
-	[data-slot="task-tool-subtitle"] {
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large);
-		color: var(--text-weaker);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  [data-slot="task-tool-item"] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-weak);
+
+    [data-slot="icon-svg"] {
+      flex-shrink: 0;
+      color: var(--icon-weak);
+    }
+  }
+
+  [data-slot="task-tool-title"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    color: var(--text-weak);
+  }
+
+  [data-slot="task-tool-subtitle"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    color: var(--text-weaker);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 [data-component="diagnostics"] {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	padding: 8px 12px;
-	background-color: var(--surface-critical-weak);
-	border-top: 1px solid var(--border-critical-base);
-
-	[data-slot="diagnostic"] {
-		display: flex;
-		align-items: baseline;
-		gap: 6px;
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-small);
-		line-height: var(--line-height-large);
-	}
-
-	[data-slot="diagnostic-label"] {
-		color: var(--text-on-critical-base);
-		font-weight: var(--font-weight-medium);
-		text-transform: uppercase;
-		letter-spacing: -0.5px;
-		flex-shrink: 0;
-	}
-
-	[data-slot="diagnostic-location"] {
-		color: var(--text-on-critical-weak);
-		flex-shrink: 0;
-	}
-
-	[data-slot="diagnostic-message"] {
-		color: var(--text-on-critical-base);
-		word-break: break-word;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 3;
-		line-clamp: 3;
-		overflow: hidden;
-	}
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 12px;
+  background-color: var(--surface-critical-weak);
+  border-top: 1px solid var(--border-critical-base);
+
+  [data-slot="diagnostic"] {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-large);
+  }
+
+  [data-slot="diagnostic-label"] {
+    color: var(--text-on-critical-base);
+    font-weight: var(--font-weight-medium);
+    text-transform: uppercase;
+    letter-spacing: -0.5px;
+    flex-shrink: 0;
+  }
+
+  [data-slot="diagnostic-location"] {
+    color: var(--text-on-critical-weak);
+    flex-shrink: 0;
+  }
+
+  [data-slot="diagnostic-message"] {
+    color: var(--text-on-critical-base);
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+  }
 }
 
 [data-component="user-message"] [data-slot="user-message-text"],
@@ -446,383 +446,383 @@
 [data-component="todos"],
 [data-component="diagnostics"],
 .error-card {
-	-webkit-user-select: text;
-	user-select: text;
+  -webkit-user-select: text;
+  user-select: text;
 }
 
 [data-component="tool-part-wrapper"] {
-	width: 100%;
-
-	&[data-permission="true"],
-	&[data-question="true"] {
-		position: sticky;
-		top: calc(2px + var(--sticky-header-height, 40px));
-		bottom: 0px;
-		z-index: 20;
-		border-radius: 6px;
-		border: none;
-		box-shadow: var(--shadow-xs-border-base);
-		background-color: var(--surface-raised-base);
-		overflow: visible;
-		overflow-anchor: none;
-
-		& > *:first-child {
-			border-top-left-radius: 6px;
-			border-top-right-radius: 6px;
-			overflow: hidden;
-		}
-
-		& > *:last-child {
-			border-bottom-left-radius: 6px;
-			border-bottom-right-radius: 6px;
-			overflow: hidden;
-		}
-
-		[data-component="collapsible"] {
-			border: none;
-		}
-
-		[data-component="card"] {
-			border: none;
-		}
-	}
-
-	&[data-permission="true"] {
-		&::before {
-			content: "";
-			position: absolute;
-			inset: -1.5px;
-			top: -5px;
-			border-radius: 7.5px;
-			border: 1.5px solid transparent;
-			background:
-				linear-gradient(var(--background-base) 0 0) padding-box,
-				conic-gradient(
-					from var(--border-angle),
-					transparent 0deg,
-					transparent 0deg,
-					var(--border-warning-strong, var(--border-warning-selected)) 300deg,
-					var(--border-warning-base) 360deg
-				)
-				border-box;
-			animation: chase-border 2.5s linear infinite;
-			pointer-events: none;
-			z-index: -1;
-		}
-	}
-
-	&[data-question="true"] {
-		background: var(--background-base);
-		border: 1px solid var(--border-weak-base);
-	}
+  width: 100%;
+
+  &[data-permission="true"],
+  &[data-question="true"] {
+    position: sticky;
+    top: calc(2px + var(--sticky-header-height, 40px));
+    bottom: 0px;
+    z-index: 20;
+    border-radius: 6px;
+    border: none;
+    box-shadow: var(--shadow-xs-border-base);
+    background-color: var(--surface-raised-base);
+    overflow: visible;
+    overflow-anchor: none;
+
+    & > *:first-child {
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      overflow: hidden;
+    }
+
+    & > *:last-child {
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+      overflow: hidden;
+    }
+
+    [data-component="collapsible"] {
+      border: none;
+    }
+
+    [data-component="card"] {
+      border: none;
+    }
+  }
+
+  &[data-permission="true"] {
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -1.5px;
+      top: -5px;
+      border-radius: 7.5px;
+      border: 1.5px solid transparent;
+      background:
+        linear-gradient(var(--background-base) 0 0) padding-box,
+        conic-gradient(
+            from var(--border-angle),
+            transparent 0deg,
+            transparent 0deg,
+            var(--border-warning-strong, var(--border-warning-selected)) 300deg,
+            var(--border-warning-base) 360deg
+          )
+          border-box;
+      animation: chase-border 2.5s linear infinite;
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+
+  &[data-question="true"] {
+    background: var(--background-base);
+    border: 1px solid var(--border-weak-base);
+  }
 }
 
 @property --border-angle {
-	syntax: "<angle>";
-	initial-value: 0deg;
-	inherits: false;
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
 }
 
 @keyframes chase-border {
-	from {
-		--border-angle: 0deg;
-	}
+  from {
+    --border-angle: 0deg;
+  }
 
-	to {
-		--border-angle: 360deg;
-	}
+  to {
+    --border-angle: 360deg;
+  }
 }
 
 [data-component="permission-prompt"] {
-	display: flex;
-	flex-direction: column;
-	padding: 8px 12px;
-	background-color: var(--surface-raised-strong);
-	border-radius: 0 0 6px 6px;
-
-	[data-slot="permission-actions"] {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		justify-content: flex-end;
-	}
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px;
+  background-color: var(--surface-raised-strong);
+  border-radius: 0 0 6px 6px;
+
+  [data-slot="permission-actions"] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: flex-end;
+  }
 }
 
 [data-component="question-prompt"] {
-	display: flex;
-	flex-direction: column;
-	padding: 12px;
-	background-color: var(--surface-inset-base);
-	border-radius: 0 0 6px 6px;
-	gap: 12px;
-
-	[data-slot="question-tabs"] {
-		display: flex;
-		gap: 4px;
-		flex-wrap: wrap;
-
-		[data-slot="question-tab"] {
-			padding: 4px 12px;
-			font-size: 13px;
-			border-radius: 4px;
-			background-color: var(--surface-base);
-			color: var(--text-base);
-			border: none;
-			cursor: pointer;
-			transition:
-				color 0.15s,
-				background-color 0.15s;
-
-			&:hover {
-				background-color: var(--surface-base-hover);
-			}
-
-			&[data-active="true"] {
-				background-color: var(--surface-raised-base);
-			}
-
-			&[data-answered="true"] {
-				color: var(--text-strong);
-			}
-		}
-	}
-
-	[data-slot="question-content"] {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		[data-slot="question-text"] {
-			font-size: 14px;
-			color: var(--text-base);
-			line-height: 1.5;
-		}
-	}
-
-	[data-slot="question-options"] {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-
-		[data-slot="question-option"] {
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 2px;
-			padding: 8px 12px;
-			background-color: var(--surface-base);
-			border: 1px solid var(--border-weaker-base);
-			border-radius: 6px;
-			cursor: pointer;
-			text-align: left;
-			width: 100%;
-			transition:
-				background-color 0.15s,
-				border-color 0.15s;
-			position: relative;
-
-			&:hover {
-				background-color: var(--surface-base-hover);
-				border-color: var(--border-default);
-			}
-
-			&[data-picked="true"] {
-				[data-component="icon"] {
-					position: absolute;
-					right: 12px;
-					top: 50%;
-					transform: translateY(-50%);
-					color: var(--text-strong);
-				}
-			}
-
-			[data-slot="option-label"] {
-				font-size: 14px;
-				color: var(--text-base);
-				font-weight: 500;
-			}
-
-			[data-slot="option-description"] {
-				font-size: 12px;
-				color: var(--text-weak);
-			}
-		}
-
-		[data-slot="custom-input-form"] {
-			display: flex;
-			gap: 8px;
-			padding: 8px 0;
-			align-items: stretch;
-
-			[data-slot="custom-input"] {
-				flex: 1;
-				padding: 8px 12px;
-				font-size: 14px;
-				border: 1px solid var(--border-default);
-				border-radius: 6px;
-				background-color: var(--surface-base);
-				color: var(--text-base);
-				outline: none;
-
-				&:focus {
-					border-color: var(--border-focus);
-				}
-
-				&::placeholder {
-					color: var(--text-weak);
-				}
-			}
-
-			[data-component="button"] {
-				height: auto;
-			}
-		}
-	}
-
-	[data-slot="question-review"] {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-
-		[data-slot="review-title"] {
-			display: none;
-		}
-
-		[data-slot="review-item"] {
-			display: flex;
-			flex-direction: column;
-			gap: 2px;
-			font-size: 13px;
-
-			[data-slot="review-label"] {
-				color: var(--text-weak);
-			}
-
-			[data-slot="review-value"] {
-				color: var(--text-strong);
-
-				&[data-answered="false"] {
-					color: var(--text-weak);
-				}
-			}
-		}
-	}
-
-	[data-slot="question-actions"] {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		justify-content: flex-end;
-	}
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background-color: var(--surface-inset-base);
+  border-radius: 0 0 6px 6px;
+  gap: 12px;
+
+  [data-slot="question-tabs"] {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+
+    [data-slot="question-tab"] {
+      padding: 4px 12px;
+      font-size: 13px;
+      border-radius: 4px;
+      background-color: var(--surface-base);
+      color: var(--text-base);
+      border: none;
+      cursor: pointer;
+      transition:
+        color 0.15s,
+        background-color 0.15s;
+
+      &:hover {
+        background-color: var(--surface-base-hover);
+      }
+
+      &[data-active="true"] {
+        background-color: var(--surface-raised-base);
+      }
+
+      &[data-answered="true"] {
+        color: var(--text-strong);
+      }
+    }
+  }
+
+  [data-slot="question-content"] {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    [data-slot="question-text"] {
+      font-size: 14px;
+      color: var(--text-base);
+      line-height: 1.5;
+    }
+  }
+
+  [data-slot="question-options"] {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    [data-slot="question-option"] {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 2px;
+      padding: 8px 12px;
+      background-color: var(--surface-base);
+      border: 1px solid var(--border-weaker-base);
+      border-radius: 6px;
+      cursor: pointer;
+      text-align: left;
+      width: 100%;
+      transition:
+        background-color 0.15s,
+        border-color 0.15s;
+      position: relative;
+
+      &:hover {
+        background-color: var(--surface-base-hover);
+        border-color: var(--border-default);
+      }
+
+      &[data-picked="true"] {
+        [data-component="icon"] {
+          position: absolute;
+          right: 12px;
+          top: 50%;
+          transform: translateY(-50%);
+          color: var(--text-strong);
+        }
+      }
+
+      [data-slot="option-label"] {
+        font-size: 14px;
+        color: var(--text-base);
+        font-weight: 500;
+      }
+
+      [data-slot="option-description"] {
+        font-size: 12px;
+        color: var(--text-weak);
+      }
+    }
+
+    [data-slot="custom-input-form"] {
+      display: flex;
+      gap: 8px;
+      padding: 8px 0;
+      align-items: stretch;
+
+      [data-slot="custom-input"] {
+        flex: 1;
+        padding: 8px 12px;
+        font-size: 14px;
+        border: 1px solid var(--border-default);
+        border-radius: 6px;
+        background-color: var(--surface-base);
+        color: var(--text-base);
+        outline: none;
+
+        &:focus {
+          border-color: var(--border-focus);
+        }
+
+        &::placeholder {
+          color: var(--text-weak);
+        }
+      }
+
+      [data-component="button"] {
+        height: auto;
+      }
+    }
+  }
+
+  [data-slot="question-review"] {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    [data-slot="review-title"] {
+      display: none;
+    }
+
+    [data-slot="review-item"] {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      font-size: 13px;
+
+      [data-slot="review-label"] {
+        color: var(--text-weak);
+      }
+
+      [data-slot="review-value"] {
+        color: var(--text-strong);
+
+        &[data-answered="false"] {
+          color: var(--text-weak);
+        }
+      }
+    }
+  }
+
+  [data-slot="question-actions"] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: flex-end;
+  }
 }
 
 [data-component="question-answers"] {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	padding: 8px 12px;
-
-	[data-slot="question-answer-item"] {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		font-size: 13px;
-
-		[data-slot="question-text"] {
-			color: var(--text-weak);
-		}
-
-		[data-slot="answer-text"] {
-			color: var(--text-strong);
-		}
-	}
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 8px 12px;
+
+  [data-slot="question-answer-item"] {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-size: 13px;
+
+    [data-slot="question-text"] {
+      color: var(--text-weak);
+    }
+
+    [data-slot="answer-text"] {
+      color: var(--text-strong);
+    }
+  }
 }
 
 [data-component="apply-patch-files"] {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 [data-component="apply-patch-file"] {
-	display: flex;
-	flex-direction: column;
-	border-top: 1px solid var(--border-weaker-base);
-
-	&:first-child {
-		border-top: 1px solid var(--border-weaker-base);
-	}
-
-	[data-slot="apply-patch-file-header"] {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 8px 12px;
-		background-color: var(--surface-inset-base);
-	}
-
-	[data-slot="apply-patch-file-action"] {
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		color: var(--text-base);
-		flex-shrink: 0;
-
-		&[data-type="delete"] {
-			color: var(--text-critical-base);
-		}
-
-		&[data-type="add"] {
-			color: var(--text-success-base);
-		}
-
-		&[data-type="move"] {
-			color: var(--text-warning-base);
-		}
-	}
-
-	[data-slot="apply-patch-file-path"] {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-small);
-		color: var(--text-weak);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		flex-grow: 1;
-	}
-
-	[data-slot="apply-patch-deletion-count"] {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-small);
-		color: var(--text-critical-base);
-		flex-shrink: 0;
-	}
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border-weaker-base);
+
+  &:first-child {
+    border-top: 1px solid var(--border-weaker-base);
+  }
+
+  [data-slot="apply-patch-file-header"] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background-color: var(--surface-inset-base);
+  }
+
+  [data-slot="apply-patch-file-action"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    color: var(--text-base);
+    flex-shrink: 0;
+
+    &[data-type="delete"] {
+      color: var(--text-critical-base);
+    }
+
+    &[data-type="add"] {
+      color: var(--text-success-base);
+    }
+
+    &[data-type="move"] {
+      color: var(--text-warning-base);
+    }
+  }
+
+  [data-slot="apply-patch-file-path"] {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-small);
+    color: var(--text-weak);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-grow: 1;
+  }
+
+  [data-slot="apply-patch-deletion-count"] {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-small);
+    color: var(--text-critical-base);
+    flex-shrink: 0;
+  }
 }
 
 [data-component="apply-patch-file-diff"] {
-	max-height: 420px;
-	overflow-y: auto;
-	scrollbar-width: none;
-	-ms-overflow-style: none;
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
+  max-height: 420px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 [data-component="tool-loaded-file"] {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 4px 0 4px 28px;
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-small);
-	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-large);
-	color: var(--text-weak);
-
-	[data-component="icon"] {
-		flex-shrink: 0;
-		color: var(--icon-weak);
-	}
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0 4px 28px;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large);
+  color: var(--text-weak);
+
+  [data-component="icon"] {
+    flex-shrink: 0;
+    color: var(--icon-weak);
+  }
 }

packages/ui/src/components/morph-chevron.css

@@ -1,10 +1,10 @@
 [data-slot="morph-chevron-svg"] {
-	width: 16px;
-	height: 16px;
-	display: block;
-	fill: none;
-	stroke-width: 1.5;
-	stroke: currentcolor;
-	stroke-linecap: round;
-	stroke-linejoin: round;
+  width: 16px;
+  height: 16px;
+  display: block;
+  fill: none;
+  stroke-width: 1.5;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }

packages/ui/src/components/popover.css

@@ -1,136 +1,132 @@
 [data-slot="popover-trigger"] {
-	display: inline-flex;
+  display: inline-flex;
 }
 
 [data-component="popover-content"] {
-	z-index: 50;
-	min-width: 200px;
-	max-width: 320px;
-	border-radius: var(--radius-md);
-	background-color: var(--surface-raised-stronger-non-alpha);
-
-	border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
-	background-clip: padding-box;
-	box-shadow: var(--shadow-md);
-
-	transform-origin: var(--kb-popover-content-transform-origin);
-
-	animation: popoverContentHide var(--transition-duration)
-		var(--transition-easing) forwards;
-
-	@starting-style {
-		animation: none;
-	}
-
-	&[data-expanded] {
-		pointer-events: auto;
-		animation: popoverContentShow var(--transition-duration)
-			var(--transition-easing) forwards;
-	}
-
-	[data-origin-top-right] {
-		transform-origin: top right;
-	}
-
-	[data-origin-top-left] {
-		transform-origin: top left;
-	}
-
-	[data-origin-bottom-right] {
-		transform-origin: bottom right;
-	}
-
-	[data-origin-bottom-left] {
-		transform-origin: bottom left;
-	}
-
-	&:focus-within {
-		outline: none;
-	}
-
-	[data-slot="popover-header"] {
-		display: flex;
-		padding: 12px;
-		padding-bottom: 0;
-		justify-content: space-between;
-		align-items: center;
-		gap: 8px;
-
-		[data-slot="popover-title"] {
-			flex: 1;
-			color: var(--text-strong);
-			margin: 0;
-
-			font-family: var(--font-family-sans);
-			font-size: var(--font-size-base);
-			font-style: normal;
-			font-weight: var(--font-weight-medium);
-			line-height: var(--line-height-large);
-			letter-spacing: var(--letter-spacing-normal);
-		}
-
-		[data-slot="popover-close-button"] {
-			flex-shrink: 0;
-		}
-	}
-
-	[data-slot="popover-description"] {
-		padding: 0 12px;
-		margin: 0;
-		color: var(--text-base);
-
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	[data-slot="popover-body"] {
-		padding: 12px;
-	}
-
-	[data-slot="popover-arrow"] {
-		fill: var(--surface-raised-stronger-non-alpha);
-	}
+  z-index: 50;
+  min-width: 200px;
+  max-width: 320px;
+  border-radius: var(--radius-md);
+  background-color: var(--surface-raised-stronger-non-alpha);
+
+  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  background-clip: padding-box;
+  box-shadow: var(--shadow-md);
+
+  transform-origin: var(--kb-popover-content-transform-origin);
+
+  animation: popoverContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
+  }
+
+  &[data-expanded] {
+    pointer-events: auto;
+    animation: popoverContentShow var(--transition-duration) var(--transition-easing) forwards;
+  }
+
+  [data-origin-top-right] {
+    transform-origin: top right;
+  }
+
+  [data-origin-top-left] {
+    transform-origin: top left;
+  }
+
+  [data-origin-bottom-right] {
+    transform-origin: bottom right;
+  }
+
+  [data-origin-bottom-left] {
+    transform-origin: bottom left;
+  }
+
+  &:focus-within {
+    outline: none;
+  }
+
+  [data-slot="popover-header"] {
+    display: flex;
+    padding: 12px;
+    padding-bottom: 0;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+
+    [data-slot="popover-title"] {
+      flex: 1;
+      color: var(--text-strong);
+      margin: 0;
+
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-base);
+      font-style: normal;
+      font-weight: var(--font-weight-medium);
+      line-height: var(--line-height-large);
+      letter-spacing: var(--letter-spacing-normal);
+    }
+
+    [data-slot="popover-close-button"] {
+      flex-shrink: 0;
+    }
+  }
+
+  [data-slot="popover-description"] {
+    padding: 0 12px;
+    margin: 0;
+    color: var(--text-base);
+
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="popover-body"] {
+    padding: 12px;
+  }
+
+  [data-slot="popover-arrow"] {
+    fill: var(--surface-raised-stronger-non-alpha);
+  }
 }
 
 @keyframes popoverContentShow {
-	from {
-		opacity: 0;
-		transform: scaleY(0.95);
-	}
-	to {
-		opacity: 1;
-		transform: scaleY(1);
-	}
+  from {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
 }
 
 @keyframes popoverContentHide {
-	from {
-		opacity: 1;
-		transform: scaleY(1);
-	}
-	to {
-		opacity: 0;
-		transform: scaleY(0.95);
-	}
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
 }
 
 [data-component="model-popover-content"] {
-	transform-origin: var(--kb-popper-content-transform-origin);
-	pointer-events: none;
-	animation: popoverContentHide var(--transition-duration)
-		var(--transition-easing) forwards;
-
-	@starting-style {
-		animation: none;
-	}
-
-	&[data-expanded] {
-		pointer-events: auto;
-		animation: popoverContentShow var(--transition-duration)
-			var(--transition-easing) forwards;
-	}
+  transform-origin: var(--kb-popper-content-transform-origin);
+  pointer-events: none;
+  animation: popoverContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
+  }
+
+  &[data-expanded] {
+    pointer-events: auto;
+    animation: popoverContentShow var(--transition-duration) var(--transition-easing) forwards;
+  }
 }

packages/ui/src/components/progress-circle.css

@@ -1,10 +1,10 @@
 [data-component="progress-circle"] {
-	color: inherit;
+  color: inherit;
 
-	[data-slot="progress-circle-background"] {
-		transform-origin: 50% 50%;
-		transform: rotate(270deg);
-		stroke-opacity: 0.5;
-		transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
-	}
+  [data-slot="progress-circle-background"] {
+    transform-origin: 50% 50%;
+    transform: rotate(270deg);
+    stroke-opacity: 0.5;
+    transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+  }
 }

packages/ui/src/components/provider-icon.css

@@ -1,5 +1,5 @@
 [data-component="provider-icon"] {
-	flex-shrink: 0;
-	width: 16px;
-	height: 16px;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
 }

packages/ui/src/components/radio-group.css

@@ -1,169 +1,156 @@
 [data-component="radio-group"] {
-	display: flex;
-	flex-direction: column;
-	gap: calc(var(--spacing) * 2);
-
-	[data-slot="radio-group-wrapper"] {
-		all: unset;
-		background-color: var(--surface-base);
-		border-radius: var(--radius-md);
-		box-shadow: var(--shadow-xs-border);
-		margin: 0;
-		padding: 0;
-		position: relative;
-		width: fit-content;
-	}
-
-	[data-slot="radio-group-items"] {
-		display: inline-flex;
-		list-style: none;
-		flex-direction: row;
-	}
-
-	[data-slot="radio-group-indicator"] {
-		background: var(--button-secondary-base);
-		border-radius: var(--radius-md);
-		box-shadow: var(--shadow-xs-border);
-		content: "";
-		opacity: var(--indicator-opacity, 1);
-		position: absolute;
-		transition-property: opacity, box-shadow, width, height, transform;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-	}
-
-	[data-slot="radio-group-item"] {
-		position: relative;
-	}
-
-	/* Separator between items */
-	[data-slot="radio-group-item"]:not(:first-of-type)::before {
-		background: var(--border-weak-base);
-		border-radius: var(--radius-xs);
-		content: "";
-		inset: 6px 0;
-		position: absolute;
-		transition-property: opacity;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-		width: 1px;
-		transform: translateX(-0.5px);
-	}
-
-	/* Hide separator when item or previous item is checked */
-	[data-slot="radio-group-item"]:has(
-			[data-slot="radio-group-item-input"][data-checked]
-		)::before,
-	[data-slot="radio-group-item"]:has(
-			[data-slot="radio-group-item-input"][data-checked]
-		)
-		+ [data-slot="radio-group-item"]::before {
-		opacity: 0;
-	}
-
-	[data-slot="radio-group-item-label"] {
-		color: var(--text-weak);
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-weight: var(--font-weight-medium);
-		border-radius: var(--radius-md);
-		cursor: pointer;
-		display: flex;
-		flex-wrap: nowrap;
-		gap: calc(var(--spacing) * 1);
-		line-height: 1;
-		padding: 6px 12px;
-		place-content: center;
-		position: relative;
-		transition-property: color, opacity;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-		user-select: none;
-	}
-
-	[data-slot="radio-group-item-input"] {
-		all: unset;
-	}
-
-	/* Checked state */
-	[data-slot="radio-group-item-input"][data-checked]
-		+ [data-slot="radio-group-item-label"] {
-		color: var(--text-strong);
-	}
-
-	/* Disabled state */
-	[data-slot="radio-group-item-input"][data-disabled]
-		+ [data-slot="radio-group-item-label"] {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-
-	/* Hover state for unchecked, enabled items */
-	[data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
-		+ [data-slot="radio-group-item-label"] {
-		cursor: pointer;
-		user-select: none;
-	}
-
-	[data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
-		+ [data-slot="radio-group-item-label"]:hover {
-		color: var(--text-base);
-	}
-
-	[data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
-		+ [data-slot="radio-group-item-label"]:active {
-		opacity: 0.7;
-	}
-
-	/* Focus state */
-	[data-slot="radio-group-wrapper"]:has(
-			[data-slot="radio-group-item-input"]:focus-visible
-		)
-		[data-slot="radio-group-indicator"] {
-		box-shadow: var(--shadow-xs-border-focus);
-	}
-
-	/* Hide indicator when nothing is checked */
-	[data-slot="radio-group-wrapper"]:not(
-			:has([data-slot="radio-group-item-input"][data-checked])
-		)
-		[data-slot="radio-group-indicator"] {
-		--indicator-opacity: 0;
-	}
-
-	/* Vertical orientation */
-	&[aria-orientation="vertical"] [data-slot="radio-group-items"] {
-		flex-direction: column;
-	}
-
-	&[aria-orientation="vertical"]
-		[data-slot="radio-group-item"]:not(:first-of-type)::before {
-		height: 1px;
-		width: auto;
-		inset: 0 6px;
-		transform: translateY(-0.5px);
-	}
-
-	/* Small size variant */
-	&[data-size="small"] {
-		[data-slot="radio-group-item-label"] {
-			font-size: 12px;
-			padding: 4px 8px;
-		}
-
-		[data-slot="radio-group-item"]:not(:first-of-type)::before {
-			inset: 4px 0;
-		}
-
-		&[aria-orientation="vertical"]
-			[data-slot="radio-group-item"]:not(:first-of-type)::before {
-			inset: 0 4px;
-		}
-	}
-
-	/* Disabled root state */
-	&[data-disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 2);
+
+  [data-slot="radio-group-wrapper"] {
+    all: unset;
+    background-color: var(--surface-base);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-xs-border);
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: fit-content;
+  }
+
+  [data-slot="radio-group-items"] {
+    display: inline-flex;
+    list-style: none;
+    flex-direction: row;
+  }
+
+  [data-slot="radio-group-indicator"] {
+    background: var(--button-secondary-base);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-xs-border);
+    content: "";
+    opacity: var(--indicator-opacity, 1);
+    position: absolute;
+    transition-property: opacity, box-shadow, width, height, transform;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
+  [data-slot="radio-group-item"] {
+    position: relative;
+  }
+
+  /* Separator between items */
+  [data-slot="radio-group-item"]:not(:first-of-type)::before {
+    background: var(--border-weak-base);
+    border-radius: var(--radius-xs);
+    content: "";
+    inset: 6px 0;
+    position: absolute;
+    transition-property: opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+    width: 1px;
+    transform: translateX(-0.5px);
+  }
+
+  /* Hide separator when item or previous item is checked */
+  [data-slot="radio-group-item"]:has([data-slot="radio-group-item-input"][data-checked])::before,
+  [data-slot="radio-group-item"]:has([data-slot="radio-group-item-input"][data-checked])
+    + [data-slot="radio-group-item"]::before {
+    opacity: 0;
+  }
+
+  [data-slot="radio-group-item-label"] {
+    color: var(--text-weak);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: calc(var(--spacing) * 1);
+    line-height: 1;
+    padding: 6px 12px;
+    place-content: center;
+    position: relative;
+    transition-property: color, opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+    user-select: none;
+  }
+
+  [data-slot="radio-group-item-input"] {
+    all: unset;
+  }
+
+  /* Checked state */
+  [data-slot="radio-group-item-input"][data-checked] + [data-slot="radio-group-item-label"] {
+    color: var(--text-strong);
+  }
+
+  /* Disabled state */
+  [data-slot="radio-group-item-input"][data-disabled] + [data-slot="radio-group-item-label"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Hover state for unchecked, enabled items */
+  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled]) + [data-slot="radio-group-item-label"] {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+    + [data-slot="radio-group-item-label"]:hover {
+    color: var(--text-base);
+  }
+
+  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+    + [data-slot="radio-group-item-label"]:active {
+    opacity: 0.7;
+  }
+
+  /* Focus state */
+  [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
+    [data-slot="radio-group-indicator"] {
+    box-shadow: var(--shadow-xs-border-focus);
+  }
+
+  /* Hide indicator when nothing is checked */
+  [data-slot="radio-group-wrapper"]:not(:has([data-slot="radio-group-item-input"][data-checked]))
+    [data-slot="radio-group-indicator"] {
+    --indicator-opacity: 0;
+  }
+
+  /* Vertical orientation */
+  &[aria-orientation="vertical"] [data-slot="radio-group-items"] {
+    flex-direction: column;
+  }
+
+  &[aria-orientation="vertical"] [data-slot="radio-group-item"]:not(:first-of-type)::before {
+    height: 1px;
+    width: auto;
+    inset: 0 6px;
+    transform: translateY(-0.5px);
+  }
+
+  /* Small size variant */
+  &[data-size="small"] {
+    [data-slot="radio-group-item-label"] {
+      font-size: 12px;
+      padding: 4px 8px;
+    }
+
+    [data-slot="radio-group-item"]:not(:first-of-type)::before {
+      inset: 4px 0;
+    }
+
+    &[aria-orientation="vertical"] [data-slot="radio-group-item"]:not(:first-of-type)::before {
+      inset: 0 4px;
+    }
+  }
+
+  /* Disabled root state */
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }

packages/ui/src/components/reasoning-icon.css

@@ -1,10 +1,8 @@
 [data-component="reasoning-icon"] {
-	color: var(--icon-strong-base);
+  color: var(--icon-strong-base);
 
-	[data-slot="reasoning-icon-percentage"] {
-		transition: clip-path 200ms cubic-bezier(0.25, 0, 0.5, 1);
-		clip-path: inset(
-			calc(100% - var(--reasoning-icon-percentage) * 100%) 0 0 0
-		);
-	}
+  [data-slot="reasoning-icon-percentage"] {
+    transition: clip-path 200ms cubic-bezier(0.25, 0, 0.5, 1);
+    clip-path: inset(calc(100% - var(--reasoning-icon-percentage) * 100%) 0 0 0);
+  }
 }

packages/ui/src/components/reasoning-icon.tsx

@@ -25,8 +25,22 @@ export function ReasoningIcon(props: ReasoningIconProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <path d="M5.83196 10.3225V11.1666C5.83196 11.7189 6.27967 12.1666 6.83196 12.1666H9.16687C9.71915 12.1666 10.1669 11.7189 10.1669 11.1666V10.3225M5.83196 10.3225C5.55695 10.1843 5.29695 10.0206 5.05505 9.83459C3.90601 8.95086 3.16549 7.56219 3.16549 6.00055C3.16549 3.33085 5.32971 1.16663 7.99941 1.16663C10.6691 1.16663 12.8333 3.33085 12.8333 6.00055C12.8333 7.56219 12.0928 8.95086 10.9438 9.83459C10.7019 10.0206 10.4419 10.1843 10.1669 10.3225M5.83196 10.3225H10.1669M6.5 14.1666H9.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
-      <circle cx="8" cy="5.83325" r="2.86364" fill="currentColor" stroke="currentColor" stroke-width={strokeWidth()} style={{ '--reasoning-icon-percentage': split.percentage / 100 }} data-slot="reasoning-icon-percentage" />
+      <path
+        d="M5.83196 10.3225V11.1666C5.83196 11.7189 6.27967 12.1666 6.83196 12.1666H9.16687C9.71915 12.1666 10.1669 11.7189 10.1669 11.1666V10.3225M5.83196 10.3225C5.55695 10.1843 5.29695 10.0206 5.05505 9.83459C3.90601 8.95086 3.16549 7.56219 3.16549 6.00055C3.16549 3.33085 5.32971 1.16663 7.99941 1.16663C10.6691 1.16663 12.8333 3.33085 12.8333 6.00055C12.8333 7.56219 12.0928 8.95086 10.9438 9.83459C10.7019 10.0206 10.4419 10.1843 10.1669 10.3225M5.83196 10.3225H10.1669M6.5 14.1666H9.5"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle
+        cx="8"
+        cy="5.83325"
+        r="2.86364"
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width={strokeWidth()}
+        style={{ "--reasoning-icon-percentage": split.percentage / 100 }}
+        data-slot="reasoning-icon-percentage"
+      />
     </svg>
   )
 }

packages/ui/src/components/resize-handle.css

@@ -1,60 +1,60 @@
 [data-component="resize-handle"] {
-	position: absolute;
-	z-index: 10;
-
-	&::after {
-		content: "";
-		position: absolute;
-		opacity: 0;
-		transition-property: opacity;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-	}
-
-	&:hover::after,
-	&:active::after {
-		opacity: 1;
-	}
-
-	&[data-direction="horizontal"] {
-		inset-block: 0;
-		inset-inline-end: 0;
-		width: 8px;
-		transform: translateX(50%);
-		cursor: col-resize;
-
-		&[data-edge="start"] {
-			inset-inline-start: 0;
-			inset-inline-end: auto;
-			transform: translateX(-50%);
-		}
-
-		&::after {
-			width: 3px;
-			inset-block: 0;
-			inset-inline-start: 50%;
-			transform: translateX(-50%);
-		}
-	}
-
-	&[data-direction="vertical"] {
-		inset-inline: 0;
-		inset-block-start: 0;
-		height: 8px;
-		transform: translateY(-50%);
-		cursor: row-resize;
-
-		&[data-edge="end"] {
-			inset-block-start: auto;
-			inset-block-end: 0;
-			transform: translateY(50%);
-		}
-
-		&::after {
-			height: 3px;
-			inset-inline: 0;
-			inset-block-start: 50%;
-			transform: translateY(-50%);
-		}
-	}
+  position: absolute;
+  z-index: 10;
+
+  &::after {
+    content: "";
+    position: absolute;
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
+  &:hover::after,
+  &:active::after {
+    opacity: 1;
+  }
+
+  &[data-direction="horizontal"] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    width: 8px;
+    transform: translateX(50%);
+    cursor: col-resize;
+
+    &[data-edge="start"] {
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      transform: translateX(-50%);
+    }
+
+    &::after {
+      width: 3px;
+      inset-block: 0;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &[data-direction="vertical"] {
+    inset-inline: 0;
+    inset-block-start: 0;
+    height: 8px;
+    transform: translateY(-50%);
+    cursor: row-resize;
+
+    &[data-edge="end"] {
+      inset-block-start: auto;
+      inset-block-end: 0;
+      transform: translateY(50%);
+    }
+
+    &::after {
+      height: 3px;
+      inset-inline: 0;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+  }
 }

packages/ui/src/components/scroll-fade.css

@@ -1,122 +1,82 @@
 [data-component="scroll-fade"] {
-	overflow: auto;
-	overscroll-behavior: contain;
-	scrollbar-width: none;
-	box-sizing: border-box;
-	color: inherit;
-	font: inherit;
-	-ms-overflow-style: none;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  box-sizing: border-box;
+  color: inherit;
+  font: inherit;
+  -ms-overflow-style: none;
 
-	&::-webkit-scrollbar {
-		display: none;
-	}
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
-	&[data-direction="horizontal"] {
-		overflow-x: auto;
-		overflow-y: hidden;
+  &[data-direction="horizontal"] {
+    overflow-x: auto;
+    overflow-y: hidden;
 
-		/* Both fades */
-		&[data-fade-start][data-fade-end] {
-			mask-image: linear-gradient(
-				to right,
-				transparent,
-				black var(--scroll-fade-start),
-				black calc(100% - var(--scroll-fade-end)),
-				transparent
-			);
-			-webkit-mask-image: linear-gradient(
-				to right,
-				transparent,
-				black var(--scroll-fade-start),
-				black calc(100% - var(--scroll-fade-end)),
-				transparent
-			);
-		}
+    /* Both fades */
+    &[data-fade-start][data-fade-end] {
+      mask-image: linear-gradient(
+        to right,
+        transparent,
+        black var(--scroll-fade-start),
+        black calc(100% - var(--scroll-fade-end)),
+        transparent
+      );
+      -webkit-mask-image: linear-gradient(
+        to right,
+        transparent,
+        black var(--scroll-fade-start),
+        black calc(100% - var(--scroll-fade-end)),
+        transparent
+      );
+    }
 
-		/* Only start fade */
-		&[data-fade-start]:not([data-fade-end]) {
-			mask-image: linear-gradient(
-				to right,
-				transparent,
-				black var(--scroll-fade-start),
-				black 100%
-			);
-			-webkit-mask-image: linear-gradient(
-				to right,
-				transparent,
-				black var(--scroll-fade-start),
-				black 100%
-			);
-		}
+    /* Only start fade */
+    &[data-fade-start]:not([data-fade-end]) {
+      mask-image: linear-gradient(to right, transparent, black var(--scroll-fade-start), black 100%);
+      -webkit-mask-image: linear-gradient(to right, transparent, black var(--scroll-fade-start), black 100%);
+    }
 
-		/* Only end fade */
-		&:not([data-fade-start])[data-fade-end] {
-			mask-image: linear-gradient(
-				to right,
-				black 0%,
-				black calc(100% - var(--scroll-fade-end)),
-				transparent
-			);
-			-webkit-mask-image: linear-gradient(
-				to right,
-				black 0%,
-				black calc(100% - var(--scroll-fade-end)),
-				transparent
-			);
-		}
-	}
+    /* Only end fade */
+    &:not([data-fade-start])[data-fade-end] {
+      mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
+      -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
+    }
+  }
 
-	&[data-direction="vertical"] {
-		overflow-y: auto;
-		overflow-x: hidden;
+  &[data-direction="vertical"] {
+    overflow-y: auto;
+    overflow-x: hidden;
 
-		&[data-fade-start][data-fade-end] {
-			mask-image: linear-gradient(
-				to bottom,
-				transparent,
-				black var(--scroll-fade-start),
-				black calc(100% - var(--scroll-fade-end)),
-				transparent
-			);
-			-webkit-mask-image: linear-gradient(
-				to bottom,
-				transparent,
-				black var(--scroll-fade-start),
-				black calc(100% - var(--scroll-fade-end)),
-				transparent
-			);
-		}
+    &[data-fade-start][data-fade-end] {
+      mask-image: linear-gradient(
+        to bottom,
+        transparent,
+        black var(--scroll-fade-start),
+        black calc(100% - var(--scroll-fade-end)),
+        transparent
+      );
+      -webkit-mask-image: linear-gradient(
+        to bottom,
+        transparent,
+        black var(--scroll-fade-start),
+        black calc(100% - var(--scroll-fade-end)),
+        transparent
+      );
+    }
 
-		/* Only start fade */
-		&[data-fade-start]:not([data-fade-end]) {
-			mask-image: linear-gradient(
-				to bottom,
-				transparent,
-				black var(--scroll-fade-start),
-				black 100%
-			);
-			-webkit-mask-image: linear-gradient(
-				to bottom,
-				transparent,
-				black var(--scroll-fade-start),
-				black 100%
-			);
-		}
+    /* Only start fade */
+    &[data-fade-start]:not([data-fade-end]) {
+      mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-start), black 100%);
+      -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--scroll-fade-start), black 100%);
+    }
 
-		/* Only end fade */
-		&:not([data-fade-start])[data-fade-end] {
-			mask-image: linear-gradient(
-				to bottom,
-				black 0%,
-				black calc(100% - var(--scroll-fade-end)),
-				transparent
-			);
-			-webkit-mask-image: linear-gradient(
-				to bottom,
-				black 0%,
-				black calc(100% - var(--scroll-fade-end)),
-				transparent
-			);
-		}
-	}
+    /* Only end fade */
+    &:not([data-fade-start])[data-fade-end] {
+      mask-image: linear-gradient(to bottom, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
+      -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - var(--scroll-fade-end)), transparent);
+    }
+  }
 }

packages/ui/src/components/scroll-reveal.tsx

@@ -1,5 +1,5 @@
 import { type JSX, onCleanup, splitProps } from "solid-js"
-import { ScrollFade, type ScrollFadeProps } from './scroll-fade'
+import { ScrollFade, type ScrollFadeProps } from "./scroll-fade"
 
 const SCROLL_SPEED = 60
 const PAUSE_DURATION = 800

packages/ui/src/components/select.css

@@ -1,165 +1,163 @@
 [data-component="select"] {
-	[data-slot="select-select-trigger"] {
-		display: flex;
-		padding: 4px 8px !important;
-		align-items: center;
-		justify-content: space-between;
-		box-shadow: none;
-		transition-property: background-color;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
+  [data-slot="select-select-trigger"] {
+    display: flex;
+    padding: 4px 8px !important;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: none;
+    transition-property: background-color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
 
-		[data-slot="select-select-trigger-value"] {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-		[data-slot="select-select-trigger-icon"] {
-			width: 16px;
-			height: 16px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-shrink: 0;
-			color: var(--icon-base);
-		}
+    [data-slot="select-select-trigger-value"] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    [data-slot="select-select-trigger-icon"] {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--icon-base);
+    }
 
-		&:hover,
-		&[data-expanded] {
-			&[data-variant="secondary"] {
-				background-color: var(--button-secondary-hover);
-			}
-			&[data-variant="ghost"] {
-				background-color: var(--surface-raised-base-active);
-			}
-			&[data-variant="primary"] {
-				background-color: var(--icon-strong-active);
-			}
-		}
-		&:not([data-expanded]):focus,
-		&:not([data-expanded]):focus-visible {
-			&[data-variant="secondary"] {
-				background-color: var(--button-secondary-base);
-			}
-			&[data-variant="ghost"] {
-				background-color: transparent;
-			}
-			&[data-variant="primary"] {
-				background-color: var(--icon-strong-base);
-			}
-		}
-	}
+    &:hover,
+    &[data-expanded] {
+      &[data-variant="secondary"] {
+        background-color: var(--button-secondary-hover);
+      }
+      &[data-variant="ghost"] {
+        background-color: var(--surface-raised-base-active);
+      }
+      &[data-variant="primary"] {
+        background-color: var(--icon-strong-active);
+      }
+    }
+    &:not([data-expanded]):focus,
+    &:not([data-expanded]):focus-visible {
+      &[data-variant="secondary"] {
+        background-color: var(--button-secondary-base);
+      }
+      &[data-variant="ghost"] {
+        background-color: transparent;
+      }
+      &[data-variant="primary"] {
+        background-color: var(--icon-strong-base);
+      }
+    }
+  }
 }
 
 [data-component="select-content"] {
-	min-width: 8rem;
-	max-width: 23rem;
-	overflow: hidden;
-	border-radius: var(--radius-md);
-	background-color: var(--surface-raised-stronger-non-alpha);
-	padding: 4px;
-	box-shadow: var(--shadow-xs-border);
-	z-index: 50;
-	transform-origin: var(--kb-popper-content-transform-origin);
-	pointer-events: none;
+  min-width: 8rem;
+  max-width: 23rem;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  background-color: var(--surface-raised-stronger-non-alpha);
+  padding: 4px;
+  box-shadow: var(--shadow-xs-border);
+  z-index: 50;
+  transform-origin: var(--kb-popper-content-transform-origin);
+  pointer-events: none;
 
-	animation: selectContentHide var(--transition-duration)
-		var(--transition-easing) forwards;
+  animation: selectContentHide var(--transition-duration) var(--transition-easing) forwards;
 
-	@starting-style {
-		animation: none;
-	}
+  @starting-style {
+    animation: none;
+  }
 
-	&[data-expanded] {
-		pointer-events: auto;
-		animation: selectContentShow var(--transition-duration)
-			var(--transition-easing) forwards;
-	}
+  &[data-expanded] {
+    pointer-events: auto;
+    animation: selectContentShow var(--transition-duration) var(--transition-easing) forwards;
+  }
 
-	[data-slot="select-select-content-list"] {
-		overflow-y: auto;
-		max-height: 12rem;
-		white-space: nowrap;
-		overflow-x: hidden;
-		display: flex;
-		flex-direction: column;
-		&:focus {
-			outline: none;
-		}
-		> *:not([role="presentation"]) + *:not([role="presentation"]) {
-			margin-top: 2px;
-		}
-	}
-	[data-slot="select-select-item"] {
-		position: relative;
-		display: flex;
-		align-items: center;
-		padding: 4px 8px;
-		gap: 12px;
-		border-radius: var(--radius-sm);
+  [data-slot="select-select-content-list"] {
+    overflow-y: auto;
+    max-height: 12rem;
+    white-space: nowrap;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    &:focus {
+      outline: none;
+    }
+    > *:not([role="presentation"]) + *:not([role="presentation"]) {
+      margin-top: 2px;
+    }
+  }
+  [data-slot="select-select-item"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    gap: 12px;
+    border-radius: var(--radius-sm);
 
-		/* text-12-medium */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-base);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large); /* 166.667% */
-		letter-spacing: var(--letter-spacing-normal);
-		color: var(--text-strong);
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-strong);
 
-		transition-property: background-color, color;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-		outline: none;
-		user-select: none;
+    transition-property: background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+    outline: none;
+    user-select: none;
 
-		&:hover {
-			background-color: var(--surface-raised-base-hover);
-		}
-		&[data-disabled] {
-			background-color: var(--surface-raised-base);
-			pointer-events: none;
-		}
-		[data-slot="select-select-item-indicator"] {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			margin-left: auto;
-			width: 16px;
-			height: 16px;
-			color: var(--icon-strong-base);
+    &:hover {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &[data-disabled] {
+      background-color: var(--surface-raised-base);
+      pointer-events: none;
+    }
+    [data-slot="select-select-item-indicator"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: auto;
+      width: 16px;
+      height: 16px;
+      color: var(--icon-strong-base);
 
-			svg {
-				color: var(--icon-strong-base);
-			}
-		}
-		&:focus {
-			outline: none;
-		}
-		&:hover {
-			background: var(--surface-raised-base-hover);
-		}
-	}
+      svg {
+        color: var(--icon-strong-base);
+      }
+    }
+    &:focus {
+      outline: none;
+    }
+    &:hover {
+      background: var(--surface-raised-base-hover);
+    }
+  }
 }
 
 @keyframes selectContentShow {
-	from {
-		opacity: 0;
-		transform: scaleY(0.95);
-	}
-	to {
-		opacity: 1;
-		transform: scaleY(1);
-	}
+  from {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
 }
 
 @keyframes selectContentHide {
-	from {
-		opacity: 1;
-		transform: scaleY(1);
-	}
-	to {
-		opacity: 0;
-		transform: scaleY(0.95);
-	}
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
 }

packages/ui/src/components/session-review.css

@@ -1,216 +1,215 @@
 [data-component="session-review"] {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	height: 100%;
-	overflow-y: auto;
-	scrollbar-width: none;
-	contain: strict;
-	&::-webkit-scrollbar {
-		display: none;
-	}
-
-	/* [data-slot="session-review-container"] { */
-	/*   height: 100%; */
-	/* } */
-
-	[data-slot="session-review-header"] {
-		position: sticky;
-		top: 0;
-		z-index: 20;
-		background-color: var(--background-stronger);
-		height: 32px;
-		flex-shrink: 0;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		align-self: stretch;
-	}
-
-	[data-slot="session-review-title"] {
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-large);
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		color: var(--text-strong);
-	}
-
-	[data-slot="session-review-actions"] {
-		display: flex;
-		align-items: center;
-		column-gap: 16px;
-		padding-right: 1px;
-	}
-
-	[data-component="sticky-accordion-header"] {
-		top: 40px;
-
-		&[data-expanded]::before {
-			top: -40px;
-		}
-	}
-
-	[data-slot="accordion-trigger"] {
-		background-color: var(--background-stronger) !important;
-	}
-
-	[data-slot="session-review-accordion-item"][data-selected] {
-		[data-slot="session-review-accordion-content"] {
-			box-shadow: var(--shadow-xs-border-select);
-			border-radius: var(--radius-lg);
-		}
-	}
-
-	[data-slot="accordion-item"] {
-		[data-slot="accordion-content"] {
-			/* Use grid-template-rows for smooth height transition */
-			display: grid;
-		}
-	}
-
-	[data-slot="accordion-content"] {
-		-webkit-user-select: text;
-		user-select: text;
-	}
-
-	[data-slot="session-review-accordion-content"] {
-		position: relative;
-		overflow: hidden;
-	}
-
-	[data-slot="session-review-trigger-content"] {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		gap: 20px;
-	}
-
-	[data-slot="session-review-file-info"] {
-		flex-grow: 1;
-		display: flex;
-		align-items: center;
-		gap: 20px;
-		min-width: 0;
-	}
-
-	[data-slot="session-review-file-name-container"] {
-		display: flex;
-		flex-grow: 1;
-		min-width: 0;
-	}
-
-	[data-slot="session-review-directory"] {
-		color: var(--text-base);
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		direction: rtl;
-		text-align: left;
-	}
-
-	[data-slot="session-review-filename"] {
-		color: var(--text-strong);
-		flex-shrink: 0;
-	}
-
-	[data-slot="session-review-view-button"] {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 2px;
-		margin-left: 8px;
-		border: none;
-		background: transparent;
-		color: var(--text-base);
-		cursor: pointer;
-		border-radius: 4px;
-		opacity: 0;
-		transition-property: opacity, background-color, color;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-
-		&:hover {
-			color: var(--text-strong);
-			background: var(--surface-base);
-		}
-	}
-
-	[data-slot="accordion-trigger"]:hover
-		[data-slot="session-review-view-button"] {
-		opacity: 1;
-	}
-
-	[data-slot="session-review-trigger-actions"] {
-		flex-shrink: 0;
-		display: flex;
-		gap: 16px;
-		align-items: center;
-		justify-content: flex-end;
-	}
-
-	[data-slot="session-review-change"] {
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-weight: var(--font-weight-medium);
-	}
-
-	[data-slot="session-review-change"][data-type="added"] {
-		color: var(--icon-diff-add-base);
-	}
-
-	[data-slot="session-review-change"][data-type="removed"] {
-		color: var(--icon-diff-delete-base);
-	}
-
-	[data-slot="session-review-file-container"] {
-		padding: 0;
-	}
-
-	[data-slot="session-review-image-container"] {
-		padding: 12px;
-		display: flex;
-		justify-content: center;
-		background: var(--background-stronger);
-	}
-
-	[data-slot="session-review-image"] {
-		max-width: 100%;
-		max-height: 60vh;
-		object-fit: contain;
-		border-radius: 8px;
-		border: 1px solid var(--border-weak-base);
-		background: var(--background-base);
-	}
-
-	[data-slot="session-review-image-placeholder"] {
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		color: var(--text-weak);
-	}
-
-	[data-slot="session-review-audio-container"] {
-		padding: 12px;
-		display: flex;
-		justify-content: center;
-		background: var(--background-stronger);
-	}
-
-	[data-slot="session-review-audio"] {
-		width: 100%;
-		max-width: 560px;
-	}
-
-	[data-slot="session-review-audio-placeholder"] {
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		color: var(--text-weak);
-	}
-
-	[data-slot="session-review-diff-wrapper"] {
-		position: relative;
-		overflow: hidden;
-		--line-comment-z: 5;
-		--line-comment-popover-z: 30;
-	}
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  contain: strict;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* [data-slot="session-review-container"] { */
+  /*   height: 100%; */
+  /* } */
+
+  [data-slot="session-review-header"] {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background-color: var(--background-stronger);
+    height: 32px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  [data-slot="session-review-title"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-large);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    color: var(--text-strong);
+  }
+
+  [data-slot="session-review-actions"] {
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
+    padding-right: 1px;
+  }
+
+  [data-component="sticky-accordion-header"] {
+    top: 40px;
+
+    &[data-expanded]::before {
+      top: -40px;
+    }
+  }
+
+  [data-slot="accordion-trigger"] {
+    background-color: var(--background-stronger) !important;
+  }
+
+  [data-slot="session-review-accordion-item"][data-selected] {
+    [data-slot="session-review-accordion-content"] {
+      box-shadow: var(--shadow-xs-border-select);
+      border-radius: var(--radius-lg);
+    }
+  }
+
+  [data-slot="accordion-item"] {
+    [data-slot="accordion-content"] {
+      /* Use grid-template-rows for smooth height transition */
+      display: grid;
+    }
+  }
+
+  [data-slot="accordion-content"] {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  [data-slot="session-review-accordion-content"] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  [data-slot="session-review-trigger-content"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 20px;
+  }
+
+  [data-slot="session-review-file-info"] {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    min-width: 0;
+  }
+
+  [data-slot="session-review-file-name-container"] {
+    display: flex;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  [data-slot="session-review-directory"] {
+    color: var(--text-base);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    direction: rtl;
+    text-align: left;
+  }
+
+  [data-slot="session-review-filename"] {
+    color: var(--text-strong);
+    flex-shrink: 0;
+  }
+
+  [data-slot="session-review-view-button"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    margin-left: 8px;
+    border: none;
+    background: transparent;
+    color: var(--text-base);
+    cursor: pointer;
+    border-radius: 4px;
+    opacity: 0;
+    transition-property: opacity, background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+
+    &:hover {
+      color: var(--text-strong);
+      background: var(--surface-base);
+    }
+  }
+
+  [data-slot="accordion-trigger"]:hover [data-slot="session-review-view-button"] {
+    opacity: 1;
+  }
+
+  [data-slot="session-review-trigger-actions"] {
+    flex-shrink: 0;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  [data-slot="session-review-change"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+  }
+
+  [data-slot="session-review-change"][data-type="added"] {
+    color: var(--icon-diff-add-base);
+  }
+
+  [data-slot="session-review-change"][data-type="removed"] {
+    color: var(--icon-diff-delete-base);
+  }
+
+  [data-slot="session-review-file-container"] {
+    padding: 0;
+  }
+
+  [data-slot="session-review-image-container"] {
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    background: var(--background-stronger);
+  }
+
+  [data-slot="session-review-image"] {
+    max-width: 100%;
+    max-height: 60vh;
+    object-fit: contain;
+    border-radius: 8px;
+    border: 1px solid var(--border-weak-base);
+    background: var(--background-base);
+  }
+
+  [data-slot="session-review-image-placeholder"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    color: var(--text-weak);
+  }
+
+  [data-slot="session-review-audio-container"] {
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    background: var(--background-stronger);
+  }
+
+  [data-slot="session-review-audio"] {
+    width: 100%;
+    max-width: 560px;
+  }
+
+  [data-slot="session-review-audio-placeholder"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    color: var(--text-weak);
+  }
+
+  [data-slot="session-review-diff-wrapper"] {
+    position: relative;
+    overflow: hidden;
+    --line-comment-z: 5;
+    --line-comment-popover-z: 30;
+  }
 }

packages/ui/src/components/session-turn.css

@@ -1,580 +1,563 @@
 [data-component="session-turn"] {
-	--session-turn-sticky-height: 0px;
-	--sticky-header-height: calc(
-		var(--session-title-height, 0px) +
-		var(--session-turn-sticky-height, 0px) +
-		24px
-	);
-	/* flex: 1; */
-	height: 100%;
-	min-height: 0;
-	min-width: 0;
-	display: flex;
-	align-items: flex-start;
-	justify-content: flex-start;
-
-	[data-slot="session-turn-content"] {
-		flex-grow: 1;
-		width: 100%;
-		height: 100%;
-		min-width: 0;
-		overflow-y: auto;
-		scrollbar-width: none;
-	}
-
-	[data-slot="session-turn-content"]::-webkit-scrollbar {
-		display: none;
-	}
-
-	[data-slot="session-turn-message-container"] {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		align-self: stretch;
-		min-width: 0;
-		gap: 18px;
-		overflow-anchor: none;
-
-		[data-slot="session-turn-badge"] {
-			display: inline-flex;
-			align-items: center;
-			padding: 2px 6px;
-			border-radius: 4px;
-			font-family: var(--font-family-mono);
-			font-size: var(--font-size-x-small);
-			font-weight: var(--font-weight-medium);
-			line-height: var(--line-height-normal);
-			white-space: nowrap;
-			color: var(--text-base);
-			background: var(--surface-raised-base);
-		}
-	}
-
-	[data-slot="session-turn-attachments"] {
-		width: 100%;
-		min-width: 0;
-		align-self: stretch;
-	}
-
-	[data-slot="session-turn-sticky"] {
-		width: calc(100% + 9px);
-		position: sticky;
-		top: var(--session-title-height, 0px);
-		z-index: 20;
-		background-color: var(--background-stronger);
-		margin-left: -9px;
-		padding-left: 9px;
-		/* padding-bottom: 12px; */
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			background-color: var(--background-stronger);
-			z-index: -1;
-		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 100%;
-			left: 0;
-			right: 0;
-			height: 32px;
-			background: linear-gradient(
-				to bottom,
-				var(--background-stronger),
-				transparent
-			);
-			pointer-events: none;
-		}
-	}
-
-	[data-slot="session-turn-message-header"] {
-		display: flex;
-		align-items: center;
-		align-self: stretch;
-		height: 32px;
-	}
-
-	[data-slot="session-turn-message-content"] {
-		margin-top: 0;
-		max-width: 100%;
-	}
-
-	[data-component="user-message"] [data-slot="user-message-text"] {
-		max-height: var(--user-message-collapsed-height, 64px);
-		transition: max-height 200ms cubic-bezier(0.25, 0, 0.5, 1);
-	}
-
-	[data-component="user-message"][data-expanded="true"]
-		[data-slot="user-message-text"] {
-		max-height: 2000px;
-	}
-
-	[data-component="user-message"][data-can-expand="true"]
-		[data-slot="user-message-text"] {
-		padding-right: 36px;
-		padding-bottom: 28px;
-	}
-
-	[data-component="user-message"][data-can-expand="true"]:not(
-			[data-expanded="true"]
-		)
-		[data-slot="user-message-text"]::after {
-		content: "";
-		position: absolute;
-		left: 0;
-		right: 0;
-		height: 8px;
-		bottom: 0px;
-		background:
-			linear-gradient(to bottom, transparent, var(--surface-weak)),
-			linear-gradient(to bottom, transparent, var(--surface-weak));
-		pointer-events: none;
-	}
-
-	[data-component="user-message"]
-		[data-slot="user-message-text"]
-		[data-slot="user-message-expand"] {
-		display: none;
-		position: absolute;
-		bottom: 6px;
-		right: 6px;
-		padding: 0;
-	}
-
-	[data-component="user-message"][data-can-expand="true"]
-		[data-slot="user-message-text"]
-		[data-slot="user-message-expand"],
-	[data-component="user-message"][data-expanded="true"]
-		[data-slot="user-message-text"]
-		[data-slot="user-message-expand"] {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		height: 22px;
-		width: 22px;
-		border: none;
-		border-radius: 6px;
-		background: transparent;
-		cursor: pointer;
-		color: var(--text-weak);
-	}
-
-	[data-component="user-message"]
-		[data-slot="user-message-text"]
-		[data-slot="user-message-expand"]:hover {
-		background: var(--surface-raised-base);
-		color: var(--text-base);
-	}
-
-	[data-slot="session-turn-user-badges"] {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		padding-left: 16px;
-	}
-
-	[data-slot="session-turn-message-title"] {
-		width: 100%;
-		font-size: var(--font-size-large);
-		font-weight: 500;
-		color: var(--text-strong);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		min-width: 0;
-		white-space: nowrap;
-	}
-
-	[data-slot="session-turn-message-title"] h1 {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		min-width: 0;
-		white-space: nowrap;
-		font-size: inherit;
-		font-weight: inherit;
-	}
-
-	[data-slot="session-turn-typewriter"] {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		min-width: 0;
-		white-space: nowrap;
-	}
-
-	[data-slot="session-turn-summary-section"] {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-		align-items: flex-start;
-		align-self: stretch;
-	}
-
-	[data-slot="session-turn-summary-header"] {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 4px;
-		align-self: stretch;
-
-		[data-slot="session-turn-response"] {
-			position: relative;
-			width: 100%;
-		}
-
-		[data-slot="session-turn-response-copy-wrapper"] {
-			position: absolute;
-			top: 8px;
-			right: 8px;
-			opacity: 0;
-			transition: opacity 0.15s ease;
-			z-index: 1;
-		}
-
-		[data-slot="session-turn-response"]:hover
-			[data-slot="session-turn-response-copy-wrapper"] {
-			opacity: 1;
-		}
-
-		p {
-			font-size: var(--font-size-base);
-			line-height: var(--line-height-x-large);
-		}
-	}
-
-	[data-slot="session-turn-summary-title"] {
-		font-size: 13px;
-		/* text-12-medium */
-		font-weight: 500;
-		color: var(--text-weak);
-	}
-
-	[data-slot="session-turn-markdown"],
-	[data-slot="session-turn-accordion"] [data-slot="accordion-content"] {
-		-webkit-user-select: text;
-		user-select: text;
-	}
-
-	[data-slot="session-turn-markdown"] {
-		&[data-diffs="true"] {
-			font-size: 15px;
-		}
-
-		&[data-fade="true"] > * {
-			animation: fadeUp 0.4s ease-out forwards;
-			opacity: 0;
-
-			&:nth-child(1) {
-				animation-delay: 0.1s;
-			}
-
-			&:nth-child(2) {
-				animation-delay: 0.2s;
-			}
-
-			&:nth-child(3) {
-				animation-delay: 0.3s;
-			}
-
-			&:nth-child(4) {
-				animation-delay: 0.4s;
-			}
-
-			&:nth-child(5) {
-				animation-delay: 0.5s;
-			}
-
-			&:nth-child(6) {
-				animation-delay: 0.6s;
-			}
-
-			&:nth-child(7) {
-				animation-delay: 0.7s;
-			}
-
-			&:nth-child(8) {
-				animation-delay: 0.8s;
-			}
-
-			&:nth-child(9) {
-				animation-delay: 0.9s;
-			}
-
-			&:nth-child(10) {
-				animation-delay: 1s;
-			}
-
-			&:nth-child(11) {
-				animation-delay: 1.1s;
-			}
-
-			&:nth-child(12) {
-				animation-delay: 1.2s;
-			}
-
-			&:nth-child(13) {
-				animation-delay: 1.3s;
-			}
-
-			&:nth-child(14) {
-				animation-delay: 1.4s;
-			}
-
-			&:nth-child(15) {
-				animation-delay: 1.5s;
-			}
-
-			&:nth-child(16) {
-				animation-delay: 1.6s;
-			}
-
-			&:nth-child(17) {
-				animation-delay: 1.7s;
-			}
-
-			&:nth-child(18) {
-				animation-delay: 1.8s;
-			}
-
-			&:nth-child(19) {
-				animation-delay: 1.9s;
-			}
-
-			&:nth-child(20) {
-				animation-delay: 2s;
-			}
-
-			&:nth-child(21) {
-				animation-delay: 2.1s;
-			}
-
-			&:nth-child(22) {
-				animation-delay: 2.2s;
-			}
-
-			&:nth-child(23) {
-				animation-delay: 2.3s;
-			}
-
-			&:nth-child(24) {
-				animation-delay: 2.4s;
-			}
-
-			&:nth-child(25) {
-				animation-delay: 2.5s;
-			}
-
-			&:nth-child(26) {
-				animation-delay: 2.6s;
-			}
-
-			&:nth-child(27) {
-				animation-delay: 2.7s;
-			}
-
-			&:nth-child(28) {
-				animation-delay: 2.8s;
-			}
-
-			&:nth-child(29) {
-				animation-delay: 2.9s;
-			}
-
-			&:nth-child(30) {
-				animation-delay: 3s;
-			}
-		}
-	}
-
-	[data-slot="session-turn-summary-section"] {
-		position: relative;
-
-		[data-slot="session-turn-summary-copy"] {
-			position: absolute;
-			top: 0;
-			right: 0;
-			opacity: 0;
-			transition: opacity 0.15s ease;
-		}
-
-		&:hover [data-slot="session-turn-summary-copy"] {
-			opacity: 1;
-		}
-	}
-
-	[data-slot="session-turn-accordion"] {
-		width: 100%;
-	}
-
-	[data-component="sticky-accordion-header"] {
-		top: var(--sticky-header-height, 0px);
-
-		&[data-expanded]::before {
-			top: calc(-1 * var(--sticky-header-height, 0px));
-		}
-	}
-
-	[data-slot="session-turn-accordion-trigger-content"] {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		gap: 20px;
-
-		[data-expandable="false"] {
-			pointer-events: none;
-		}
-	}
-
-	[data-slot="session-turn-file-info"] {
-		flex-grow: 1;
-		display: flex;
-		align-items: center;
-		gap: 20px;
-		min-width: 0;
-	}
-
-	[data-slot="session-turn-file-icon"] {
-		flex-shrink: 0;
-		width: 16px;
-		height: 16px;
-	}
-
-	[data-slot="session-turn-file-path"] {
-		display: flex;
-		flex-grow: 1;
-		min-width: 0;
-	}
-
-	[data-slot="session-turn-directory"] {
-		color: var(--text-base);
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		direction: rtl;
-		text-align: left;
-	}
-
-	[data-slot="session-turn-filename"] {
-		color: var(--text-strong);
-		flex-shrink: 0;
-	}
-
-	[data-slot="session-turn-accordion-actions"] {
-		flex-shrink: 0;
-		display: flex;
-		gap: 16px;
-		align-items: center;
-		justify-content: flex-end;
-		color: var(--icon-base);
-	}
-
-	[data-slot="session-turn-accordion-content"] {
-		max-height: 240px;
-		/* max-h-60 */
-		overflow-y: auto;
-		scrollbar-width: none;
-	}
-
-	[data-slot="session-turn-accordion-content"]::-webkit-scrollbar {
-		display: none;
-	}
-
-	[data-slot="session-turn-response-section"] {
-		width: calc(100% + 9px);
-		min-width: 0;
-		margin-left: -9px;
-		padding-left: 9px;
-	}
-
-	[data-slot="session-turn-collapsible"] {
-		gap: 32px;
-		overflow: visible;
-	}
-
-	[data-slot="session-turn-collapsible-trigger-content"] {
-		max-width: 100%;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: var(--text-weak);
-
-		[data-slot="session-turn-trigger-icon"] {
-			color: var(--icon-base);
-		}
-
-		[data-component="spinner"] {
-			width: 12px;
-			height: 12px;
-			margin-right: 4px;
-		}
-
-		[data-component="icon"] {
-			width: 14px;
-			height: 14px;
-		}
-	}
-
-	[data-slot="session-turn-retry-message"] {
-		font-weight: 500;
-		color: var(--syntax-critical);
-	}
-
-	[data-slot="session-turn-retry-seconds"] {
-		color: var(--text-weak);
-	}
-
-	[data-slot="session-turn-retry-attempt"] {
-		color: var(--text-weak);
-	}
-
-	[data-slot="session-turn-status-text"] {
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	[data-slot="session-turn-details-text"] {
-		font-size: 13px;
-		/* text-12-medium */
-		font-weight: 500;
-	}
-
-	.error-card {
-		color: var(--text-on-critical-base);
-		max-height: 240px;
-		overflow-y: auto;
-	}
-
-	[data-slot="session-turn-collapsible-content-inner"] {
-		width: 100%;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		align-self: stretch;
-		gap: 12px;
-		margin-left: 12px;
-		padding-left: 12px;
-		padding-right: 12px;
-		border-left: 1px solid var(--border-base);
-
-		> :first-child > [data-component="markdown"]:first-child {
-			margin-top: 0;
-		}
-	}
-
-	[data-slot="session-turn-permission-parts"] {
-		width: 100%;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
+  --session-turn-sticky-height: 0px;
+  --sticky-header-height: calc(var(--session-title-height, 0px) + var(--session-turn-sticky-height, 0px) + 24px);
+  /* flex: 1; */
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  [data-slot="session-turn-content"] {
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  [data-slot="session-turn-content"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-slot="session-turn-message-container"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    min-width: 0;
+    gap: 18px;
+    overflow-anchor: none;
+
+    [data-slot="session-turn-badge"] {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: var(--font-family-mono);
+      font-size: var(--font-size-x-small);
+      font-weight: var(--font-weight-medium);
+      line-height: var(--line-height-normal);
+      white-space: nowrap;
+      color: var(--text-base);
+      background: var(--surface-raised-base);
+    }
+  }
+
+  [data-slot="session-turn-attachments"] {
+    width: 100%;
+    min-width: 0;
+    align-self: stretch;
+  }
+
+  [data-slot="session-turn-sticky"] {
+    width: calc(100% + 9px);
+    position: sticky;
+    top: var(--session-title-height, 0px);
+    z-index: 20;
+    background-color: var(--background-stronger);
+    margin-left: -9px;
+    padding-left: 9px;
+    /* padding-bottom: 12px; */
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--background-stronger);
+      z-index: -1;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      height: 32px;
+      background: linear-gradient(to bottom, var(--background-stronger), transparent);
+      pointer-events: none;
+    }
+  }
+
+  [data-slot="session-turn-message-header"] {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    height: 32px;
+  }
+
+  [data-slot="session-turn-message-content"] {
+    margin-top: 0;
+    max-width: 100%;
+  }
+
+  [data-component="user-message"] [data-slot="user-message-text"] {
+    max-height: var(--user-message-collapsed-height, 64px);
+    transition: max-height 200ms cubic-bezier(0.25, 0, 0.5, 1);
+  }
+
+  [data-component="user-message"][data-expanded="true"] [data-slot="user-message-text"] {
+    max-height: 2000px;
+  }
+
+  [data-component="user-message"][data-can-expand="true"] [data-slot="user-message-text"] {
+    padding-right: 36px;
+    padding-bottom: 28px;
+  }
+
+  [data-component="user-message"][data-can-expand="true"]:not([data-expanded="true"])
+    [data-slot="user-message-text"]::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 8px;
+    bottom: 0px;
+    background:
+      linear-gradient(to bottom, transparent, var(--surface-weak)),
+      linear-gradient(to bottom, transparent, var(--surface-weak));
+    pointer-events: none;
+  }
+
+  [data-component="user-message"] [data-slot="user-message-text"] [data-slot="user-message-expand"] {
+    display: none;
+    position: absolute;
+    bottom: 6px;
+    right: 6px;
+    padding: 0;
+  }
+
+  [data-component="user-message"][data-can-expand="true"]
+    [data-slot="user-message-text"]
+    [data-slot="user-message-expand"],
+  [data-component="user-message"][data-expanded="true"]
+    [data-slot="user-message-text"]
+    [data-slot="user-message-expand"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 22px;
+    width: 22px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--text-weak);
+  }
+
+  [data-component="user-message"] [data-slot="user-message-text"] [data-slot="user-message-expand"]:hover {
+    background: var(--surface-raised-base);
+    color: var(--text-base);
+  }
+
+  [data-slot="session-turn-user-badges"] {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding-left: 16px;
+  }
+
+  [data-slot="session-turn-message-title"] {
+    width: 100%;
+    font-size: var(--font-size-large);
+    font-weight: 500;
+    color: var(--text-strong);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  [data-slot="session-turn-message-title"] h1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    white-space: nowrap;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  [data-slot="session-turn-typewriter"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  [data-slot="session-turn-summary-section"] {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  [data-slot="session-turn-summary-header"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    align-self: stretch;
+
+    [data-slot="session-turn-response"] {
+      position: relative;
+      width: 100%;
+    }
+
+    [data-slot="session-turn-response-copy-wrapper"] {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+      z-index: 1;
+    }
+
+    [data-slot="session-turn-response"]:hover [data-slot="session-turn-response-copy-wrapper"] {
+      opacity: 1;
+    }
+
+    p {
+      font-size: var(--font-size-base);
+      line-height: var(--line-height-x-large);
+    }
+  }
+
+  [data-slot="session-turn-summary-title"] {
+    font-size: 13px;
+    /* text-12-medium */
+    font-weight: 500;
+    color: var(--text-weak);
+  }
+
+  [data-slot="session-turn-markdown"],
+  [data-slot="session-turn-accordion"] [data-slot="accordion-content"] {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  [data-slot="session-turn-markdown"] {
+    &[data-diffs="true"] {
+      font-size: 15px;
+    }
+
+    &[data-fade="true"] > * {
+      animation: fadeUp 0.4s ease-out forwards;
+      opacity: 0;
+
+      &:nth-child(1) {
+        animation-delay: 0.1s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.3s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 0.4s;
+      }
+
+      &:nth-child(5) {
+        animation-delay: 0.5s;
+      }
+
+      &:nth-child(6) {
+        animation-delay: 0.6s;
+      }
+
+      &:nth-child(7) {
+        animation-delay: 0.7s;
+      }
+
+      &:nth-child(8) {
+        animation-delay: 0.8s;
+      }
+
+      &:nth-child(9) {
+        animation-delay: 0.9s;
+      }
+
+      &:nth-child(10) {
+        animation-delay: 1s;
+      }
+
+      &:nth-child(11) {
+        animation-delay: 1.1s;
+      }
+
+      &:nth-child(12) {
+        animation-delay: 1.2s;
+      }
+
+      &:nth-child(13) {
+        animation-delay: 1.3s;
+      }
+
+      &:nth-child(14) {
+        animation-delay: 1.4s;
+      }
+
+      &:nth-child(15) {
+        animation-delay: 1.5s;
+      }
+
+      &:nth-child(16) {
+        animation-delay: 1.6s;
+      }
+
+      &:nth-child(17) {
+        animation-delay: 1.7s;
+      }
+
+      &:nth-child(18) {
+        animation-delay: 1.8s;
+      }
+
+      &:nth-child(19) {
+        animation-delay: 1.9s;
+      }
+
+      &:nth-child(20) {
+        animation-delay: 2s;
+      }
+
+      &:nth-child(21) {
+        animation-delay: 2.1s;
+      }
+
+      &:nth-child(22) {
+        animation-delay: 2.2s;
+      }
+
+      &:nth-child(23) {
+        animation-delay: 2.3s;
+      }
+
+      &:nth-child(24) {
+        animation-delay: 2.4s;
+      }
+
+      &:nth-child(25) {
+        animation-delay: 2.5s;
+      }
+
+      &:nth-child(26) {
+        animation-delay: 2.6s;
+      }
+
+      &:nth-child(27) {
+        animation-delay: 2.7s;
+      }
+
+      &:nth-child(28) {
+        animation-delay: 2.8s;
+      }
+
+      &:nth-child(29) {
+        animation-delay: 2.9s;
+      }
+
+      &:nth-child(30) {
+        animation-delay: 3s;
+      }
+    }
+  }
+
+  [data-slot="session-turn-summary-section"] {
+    position: relative;
+
+    [data-slot="session-turn-summary-copy"] {
+      position: absolute;
+      top: 0;
+      right: 0;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    &:hover [data-slot="session-turn-summary-copy"] {
+      opacity: 1;
+    }
+  }
+
+  [data-slot="session-turn-accordion"] {
+    width: 100%;
+  }
+
+  [data-component="sticky-accordion-header"] {
+    top: var(--sticky-header-height, 0px);
+
+    &[data-expanded]::before {
+      top: calc(-1 * var(--sticky-header-height, 0px));
+    }
+  }
+
+  [data-slot="session-turn-accordion-trigger-content"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 20px;
+
+    [data-expandable="false"] {
+      pointer-events: none;
+    }
+  }
+
+  [data-slot="session-turn-file-info"] {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    min-width: 0;
+  }
+
+  [data-slot="session-turn-file-icon"] {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+
+  [data-slot="session-turn-file-path"] {
+    display: flex;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  [data-slot="session-turn-directory"] {
+    color: var(--text-base);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    direction: rtl;
+    text-align: left;
+  }
+
+  [data-slot="session-turn-filename"] {
+    color: var(--text-strong);
+    flex-shrink: 0;
+  }
+
+  [data-slot="session-turn-accordion-actions"] {
+    flex-shrink: 0;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+    color: var(--icon-base);
+  }
+
+  [data-slot="session-turn-accordion-content"] {
+    max-height: 240px;
+    /* max-h-60 */
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  [data-slot="session-turn-accordion-content"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  [data-slot="session-turn-response-section"] {
+    width: calc(100% + 9px);
+    min-width: 0;
+    margin-left: -9px;
+    padding-left: 9px;
+  }
+
+  [data-slot="session-turn-collapsible"] {
+    gap: 32px;
+    overflow: visible;
+  }
+
+  [data-slot="session-turn-collapsible-trigger-content"] {
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-weak);
+
+    [data-slot="session-turn-trigger-icon"] {
+      color: var(--icon-base);
+    }
+
+    [data-component="spinner"] {
+      width: 12px;
+      height: 12px;
+      margin-right: 4px;
+    }
+
+    [data-component="icon"] {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  [data-slot="session-turn-retry-message"] {
+    font-weight: 500;
+    color: var(--syntax-critical);
+  }
+
+  [data-slot="session-turn-retry-seconds"] {
+    color: var(--text-weak);
+  }
+
+  [data-slot="session-turn-retry-attempt"] {
+    color: var(--text-weak);
+  }
+
+  [data-slot="session-turn-status-text"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [data-slot="session-turn-details-text"] {
+    font-size: 13px;
+    /* text-12-medium */
+    font-weight: 500;
+  }
+
+  .error-card {
+    color: var(--text-on-critical-base);
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  [data-slot="session-turn-collapsible-content-inner"] {
+    width: 100%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: 12px;
+    margin-left: 12px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-left: 1px solid var(--border-base);
+
+    > :first-child > [data-component="markdown"]:first-child {
+      margin-top: 0;
+    }
+  }
+
+  [data-slot="session-turn-permission-parts"] {
+    width: 100%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
 }

packages/ui/src/components/session-turn.tsx

@@ -553,7 +553,7 @@ export function SessionTurn(
                             data-slot="session-turn-collapsible-trigger-content"
                             variant="ghost"
                             size="small"
-                            onClick={props.onStepsExpandedToggle ?? (() => { })}
+                            onClick={props.onStepsExpandedToggle ?? (() => {})}
                             aria-expanded={props.stepsExpanded}
                           >
                             <Switch>

packages/ui/src/components/spinner.css

@@ -1,6 +1,6 @@
 [data-component="spinner"] {
-	color: inherit;
-	flex-shrink: 0;
-	width: 18px;
-	aspect-ratio: 1;
+  color: inherit;
+  flex-shrink: 0;
+  width: 18px;
+  aspect-ratio: 1;
 }

packages/ui/src/components/sticky-accordion-header.css

@@ -1,16 +1,16 @@
 [data-component="sticky-accordion-header"] {
-	position: sticky;
-	top: 0px;
+  position: sticky;
+  top: 0px;
 
-	&[data-expanded] {
-		z-index: 10;
+  &[data-expanded] {
+    z-index: 10;
 
-		&::before {
-			content: "";
-			z-index: -10;
-			position: absolute;
-			inset: 0;
-			background-color: var(--background-stronger);
-		}
-	}
+    &::before {
+      content: "";
+      z-index: -10;
+      position: absolute;
+      inset: 0;
+      background-color: var(--background-stronger);
+    }
+  }
 }

packages/ui/src/components/switch.css

@@ -1,133 +1,132 @@
 [data-component="switch"] {
-	position: relative;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	cursor: default;
-
-	[data-slot="switch-input"] {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border-width: 0;
-	}
-
-	[data-slot="switch-control"] {
-		display: inline-flex;
-		align-items: center;
-		width: 28px;
-		height: 16px;
-		flex-shrink: 0;
-		border-radius: 3px;
-		border: 1px solid var(--border-weak-base);
-		background: var(--surface-base);
-		transition-property: background-color, border-color, box-shadow;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-	}
-
-	[data-slot="switch-thumb"] {
-		width: 14px;
-		height: 14px;
-		box-sizing: content-box;
-
-		border-radius: 2px;
-		border: 1px solid var(--border-base);
-		background: var(--icon-invert-base);
-
-		/* shadows/shadow-xs */
-		box-shadow:
-			0 1px 2px -1px rgba(19, 16, 16, 0.04),
-			0 1px 2px 0 rgba(19, 16, 16, 0.06),
-			0 1px 3px 0 rgba(19, 16, 16, 0.08);
-
-		transform: translateX(-1px);
-		transition-property: transform, background-color, border-color;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-	}
-
-	[data-slot="switch-label"] {
-		user-select: none;
-		color: var(--text-base);
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	[data-slot="switch-description"] {
-		color: var(--text-base);
-		font-family: var(--font-family-sans);
-		font-size: 12px;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-normal);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	[data-slot="switch-error"] {
-		color: var(--text-error);
-		font-family: var(--font-family-sans);
-		font-size: 12px;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-normal);
-		letter-spacing: var(--letter-spacing-normal);
-	}
-
-	&:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-		border-color: var(--border-hover);
-		background-color: var(--surface-hover);
-	}
-
-	&:focus-within:not([data-readonly]) [data-slot="switch-control"] {
-		border-color: var(--border-focus);
-		box-shadow: 0 0 0 2px var(--surface-focus);
-	}
-
-	&[data-checked] [data-slot="switch-control"] {
-		box-sizing: border-box;
-		border-color: var(--icon-strong-base);
-		background-color: var(--icon-strong-base);
-	}
-
-	&[data-checked] [data-slot="switch-thumb"] {
-		border: none;
-		transform: translateX(12px);
-		background-color: var(--icon-invert-base);
-	}
-
-	&[data-checked]:hover:not([data-disabled], [data-readonly])
-		[data-slot="switch-control"] {
-		border-color: var(--border-hover);
-		background-color: var(--surface-hover);
-	}
-
-	&[data-disabled] {
-		cursor: not-allowed;
-	}
-
-	&[data-disabled] [data-slot="switch-control"] {
-		border-color: var(--border-disabled);
-		background-color: var(--surface-disabled);
-	}
-
-	&[data-disabled] [data-slot="switch-thumb"] {
-		background-color: var(--icon-disabled);
-	}
-
-	&[data-invalid] [data-slot="switch-control"] {
-		border-color: var(--border-error);
-	}
-
-	&[data-readonly] {
-		cursor: default;
-		pointer-events: none;
-	}
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: default;
+
+  [data-slot="switch-input"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  [data-slot="switch-control"] {
+    display: inline-flex;
+    align-items: center;
+    width: 28px;
+    height: 16px;
+    flex-shrink: 0;
+    border-radius: 3px;
+    border: 1px solid var(--border-weak-base);
+    background: var(--surface-base);
+    transition-property: background-color, border-color, box-shadow;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
+  [data-slot="switch-thumb"] {
+    width: 14px;
+    height: 14px;
+    box-sizing: content-box;
+
+    border-radius: 2px;
+    border: 1px solid var(--border-base);
+    background: var(--icon-invert-base);
+
+    /* shadows/shadow-xs */
+    box-shadow:
+      0 1px 2px -1px rgba(19, 16, 16, 0.04),
+      0 1px 2px 0 rgba(19, 16, 16, 0.06),
+      0 1px 3px 0 rgba(19, 16, 16, 0.08);
+
+    transform: translateX(-1px);
+    transition-property: transform, background-color, border-color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
+  [data-slot="switch-label"] {
+    user-select: none;
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-description"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-error"] {
+    color: var(--text-error);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-hover);
+    background-color: var(--surface-hover);
+  }
+
+  &:focus-within:not([data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 2px var(--surface-focus);
+  }
+
+  &[data-checked] [data-slot="switch-control"] {
+    box-sizing: border-box;
+    border-color: var(--icon-strong-base);
+    background-color: var(--icon-strong-base);
+  }
+
+  &[data-checked] [data-slot="switch-thumb"] {
+    border: none;
+    transform: translateX(12px);
+    background-color: var(--icon-invert-base);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-hover);
+    background-color: var(--surface-hover);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &[data-disabled] [data-slot="switch-control"] {
+    border-color: var(--border-disabled);
+    background-color: var(--surface-disabled);
+  }
+
+  &[data-disabled] [data-slot="switch-thumb"] {
+    background-color: var(--icon-disabled);
+  }
+
+  &[data-invalid] [data-slot="switch-control"] {
+    border-color: var(--border-error);
+  }
+
+  &[data-readonly] {
+    cursor: default;
+    pointer-events: none;
+  }
 }

packages/ui/src/components/tabs.css

@@ -1,454 +1,454 @@
 [data-component="tabs"] {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	background-color: var(--background-stronger);
-	overflow: clip;
-
-	[data-slot="tabs-list"] {
-		height: 48px;
-		width: 100%;
-		position: relative;
-		display: flex;
-		align-items: center;
-		overflow-x: auto;
-
-		/* Hide scrollbar */
-		scrollbar-width: none;
-		-ms-overflow-style: none;
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		/* After element to fill remaining space */
-		&::after {
-			content: "";
-			display: block;
-			flex-grow: 1;
-			height: 100%;
-			border-bottom: 1px solid var(--border-weak-base);
-			background-color: var(--background-base);
-		}
-
-		&:empty::after {
-			display: none;
-		}
-	}
-
-	[data-slot="tabs-trigger-wrapper"] {
-		position: relative;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		gap: 12px;
-		color: var(--text-base);
-
-		/* text-14-medium */
-		font-family: var(--font-family-sans);
-		font-size: 14px;
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large); /* 142.857% */
-		letter-spacing: var(--letter-spacing-normal);
-
-		white-space: nowrap;
-		flex-shrink: 0;
-		max-width: 280px;
-		border-bottom: 1px solid var(--border-weak-base);
-		border-right: 1px solid var(--border-weak-base);
-		background-color: var(--background-base);
-		transition-property: background-color, border-color, color;
-		transition-duration: var(--transition-duration);
-		transition-timing-function: var(--transition-easing);
-
-		[data-slot="tabs-trigger"] {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			padding: 14px 24px 14px 12px;
-			outline: none;
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			&:focus-visible {
-				outline: none;
-				box-shadow: none;
-			}
-		}
-
-		[data-slot="tabs-trigger-close-button"] {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		[data-component="icon-button"] {
-			margin: -0.25rem;
-		}
-
-		&:disabled {
-			pointer-events: none;
-			color: var(--text-weaker);
-		}
-		&:focus-visible {
-			outline: none;
-			box-shadow: none;
-		}
-		&:has([data-hidden]) {
-			[data-slot="tabs-trigger-close-button"] {
-				opacity: 0;
-			}
-
-			&:hover {
-				[data-slot="tabs-trigger-close-button"] {
-					opacity: 1;
-				}
-			}
-		}
-		&:has([data-selected]) {
-			color: var(--text-strong);
-			background-color: transparent;
-			border-bottom-color: transparent;
-			[data-slot="tabs-trigger-close-button"] {
-				opacity: 1;
-			}
-		}
-		&:hover:not(:disabled):not([data-selected]) {
-			color: var(--text-strong);
-		}
-		&:has([data-slot="tabs-trigger-close-button"]) {
-			padding-right: 12px;
-
-			[data-slot="tabs-trigger"] {
-				padding-right: 0;
-			}
-		}
-	}
-
-	[data-slot="tabs-content"] {
-		overflow-y: auto;
-		flex: 1;
-
-		/* Hide scrollbar */
-		scrollbar-width: none;
-		-ms-overflow-style: none;
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
-
-	&[data-variant="alt"] {
-		[data-slot="tabs-list"] {
-			padding-left: 24px;
-			padding-right: 24px;
-			gap: 12px;
-			border-bottom: 1px solid var(--border-weak-base);
-			background-color: transparent;
-
-			&::after {
-				border: none;
-				background-color: transparent;
-			}
-			&:empty::after {
-				display: none;
-			}
-		}
-
-		[data-slot="tabs-trigger-wrapper"] {
-			border: none;
-			color: var(--text-base);
-			background-color: transparent;
-			border-bottom-width: 2px;
-			border-bottom-style: solid;
-			border-bottom-color: transparent;
-			gap: 4px;
-
-			/* text-14-regular */
-			font-family: var(--font-family-sans);
-			font-size: var(--font-size-base);
-			font-style: normal;
-			font-weight: var(--font-weight-regular);
-			line-height: var(--line-height-x-large); /* 171.429% */
-			letter-spacing: var(--letter-spacing-normal);
-
-			[data-slot="tabs-trigger"] {
-				height: 100%;
-				padding: 4px;
-				background-color: transparent;
-				border-bottom-width: 2px;
-				border-bottom-color: transparent;
-			}
-
-			[data-slot="tabs-trigger-close-button"] {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-
-			[data-component="icon-button"] {
-				width: 16px;
-				height: 16px;
-				margin: 0;
-			}
-
-			&:has([data-selected]) {
-				color: var(--text-strong);
-				background-color: transparent;
-				border-bottom-color: var(--icon-strong-base);
-			}
-
-			&:hover:not(:disabled):not([data-selected]) {
-				color: var(--text-strong);
-			}
-
-			&:has([data-slot="tabs-trigger-close-button"]) {
-				padding-right: 0;
-				[data-slot="tabs-trigger"] {
-					padding-right: 0;
-				}
-			}
-		}
-
-		/* [data-slot="tabs-content"] { */
-		/* } */
-	}
-
-	&[data-variant="pill"][data-orientation="horizontal"] {
-		background-color: transparent;
-
-		[data-slot="tabs-list"] {
-			height: auto;
-			padding: 6px 0;
-			gap: 4px;
-			background-color: var(--background-base);
-
-			&::after {
-				display: none;
-			}
-		}
-
-		[data-slot="tabs-trigger-wrapper"] {
-			height: 32px;
-			border: none;
-			border-radius: var(--radius-sm);
-			background-color: transparent;
-			gap: 0;
-
-			/* text-13-medium */
-			font-family: var(--font-family-sans);
-			font-size: var(--font-size-small);
-			font-style: normal;
-			font-weight: var(--font-weight-medium);
-			line-height: var(--line-height-large);
-			letter-spacing: var(--letter-spacing-normal);
-
-			[data-slot="tabs-trigger"] {
-				height: 100%;
-				width: 100%;
-				padding: 0 12px;
-				background-color: transparent;
-			}
-
-			&:hover:not(:disabled) {
-				background-color: var(--surface-raised-base-hover);
-				color: var(--text-strong);
-			}
-
-			&:has([data-selected]) {
-				background-color: var(--surface-raised-base-active);
-				color: var(--text-strong);
-
-				&:hover:not(:disabled) {
-					background-color: var(--surface-raised-base-active);
-				}
-			}
-		}
-	}
-
-	&[data-variant="pill"][data-orientation="horizontal"][data-scope="filetree"] {
-		[data-slot="tabs-list"] {
-			height: 48px;
-			padding-inline: 12px;
-			gap: 8px;
-			align-items: center;
-		}
-
-		[data-slot="tabs-trigger-wrapper"] {
-			height: 26px;
-			border-radius: 6px;
-			color: var(--text-weak);
-
-			&:not(:has([data-selected])):hover:not(:disabled) {
-				color: var(--text-base);
-			}
-
-			&:has([data-selected]) {
-				color: var(--text-strong);
-			}
-		}
-	}
-
-	&[data-orientation="vertical"] {
-		flex-direction: row;
-
-		[data-slot="tabs-list"] {
-			flex-direction: column;
-			width: auto;
-			height: 100%;
-			overflow-x: hidden;
-			overflow-y: auto;
-			padding: 8px;
-			gap: 4px;
-			background-color: var(--background-base);
-			border-right: 1px solid var(--border-weak-base);
-
-			&::after {
-				display: none;
-			}
-		}
-
-		[data-slot="tabs-trigger-wrapper"] {
-			width: 100%;
-			height: 32px;
-			border: none;
-			border-radius: 8px;
-			background-color: transparent;
-
-			[data-slot="tabs-trigger"] {
-				height: 100%;
-				padding: 0 8px;
-				gap: 8px;
-				justify-content: flex-start;
-			}
-
-			&:hover:not(:disabled) {
-				background-color: var(--surface-raised-base-hover);
-			}
-
-			&:has([data-selected]) {
-				background-color: var(--surface-raised-base-active);
-				color: var(--text-strong);
-			}
-		}
-
-		[data-slot="tabs-content"] {
-			overflow-x: auto;
-			overflow-y: auto;
-		}
-
-		&[data-variant="alt"] {
-			[data-slot="tabs-list"] {
-				padding: 8px;
-				gap: 4px;
-				border: none;
-
-				&::after {
-					display: none;
-				}
-			}
-
-			[data-slot="tabs-trigger-wrapper"] {
-				height: 32px;
-				border: none;
-				border-radius: 8px;
-
-				[data-slot="tabs-trigger"] {
-					border: none;
-					padding: 0 8px;
-					gap: 8px;
-					justify-content: flex-start;
-				}
-
-				&:hover:not(:disabled) {
-					background-color: var(--surface-raised-base-hover);
-				}
-
-				&:has([data-selected]) {
-					background-color: var(--surface-raised-base-hover);
-					color: var(--text-strong);
-				}
-			}
-		}
-
-		&[data-variant="settings"] {
-			[data-slot="tabs-list"] {
-				width: 150px;
-				min-width: 150px;
-
-				@media (min-width: 640px) {
-					width: 200px;
-					min-width: 200px;
-				}
-				padding: 12px;
-				gap: 0;
-				background-color: var(--background-base);
-				border-right: 1px solid var(--border-weak-base);
-
-				&::after {
-					display: none;
-				}
-			}
-
-			[data-slot="tabs-section-title"] {
-				width: 100%;
-				padding: 0 0 0 4px;
-				font-family: var(--font-family-sans);
-				font-size: var(--font-size-small);
-				font-weight: var(--font-weight-medium);
-				color: var(--text-weak);
-			}
-
-			[data-slot="tabs-trigger-wrapper"] {
-				height: 32px;
-				border: none;
-				border-radius: var(--radius-md);
-
-				/* text-14-medium */
-				font-family: var(--font-family-sans);
-				font-size: var(--font-size-base);
-				font-weight: var(--font-weight-medium);
-				line-height: var(--line-height-large);
-
-				[data-slot="tabs-trigger"] {
-					border: none;
-					padding: 0 8px;
-					gap: 12px;
-					justify-content: flex-start;
-					width: 100%;
-					height: 100%;
-				}
-
-				[data-component="icon"] {
-					color: var(--icon-base);
-				}
-
-				&:hover:not(:disabled) {
-					background-color: var(--surface-raised-base-hover);
-				}
-
-				&:has([data-selected]) {
-					background-color: var(--surface-raised-base-active);
-					color: var(--text-strong);
-
-					[data-component="icon"] {
-						color: var(--icon-strong-base);
-					}
-
-					&:hover:not(:disabled) {
-						background-color: var(--surface-raised-base-active);
-					}
-				}
-			}
-
-			[data-slot="tabs-content"] {
-				background-color: var(--surface-raised-stronger-non-alpha);
-			}
-		}
-	}
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--background-stronger);
+  overflow: clip;
+
+  [data-slot="tabs-list"] {
+    height: 48px;
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* After element to fill remaining space */
+    &::after {
+      content: "";
+      display: block;
+      flex-grow: 1;
+      height: 100%;
+      border-bottom: 1px solid var(--border-weak-base);
+      background-color: var(--background-base);
+    }
+
+    &:empty::after {
+      display: none;
+    }
+  }
+
+  [data-slot="tabs-trigger-wrapper"] {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--text-base);
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    white-space: nowrap;
+    flex-shrink: 0;
+    max-width: 280px;
+    border-bottom: 1px solid var(--border-weak-base);
+    border-right: 1px solid var(--border-weak-base);
+    background-color: var(--background-base);
+    transition-property: background-color, border-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+
+    [data-slot="tabs-trigger"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 14px 24px 14px 12px;
+      outline: none;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: none;
+      }
+    }
+
+    [data-slot="tabs-trigger-close-button"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [data-component="icon-button"] {
+      margin: -0.25rem;
+    }
+
+    &:disabled {
+      pointer-events: none;
+      color: var(--text-weaker);
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+    }
+    &:has([data-hidden]) {
+      [data-slot="tabs-trigger-close-button"] {
+        opacity: 0;
+      }
+
+      &:hover {
+        [data-slot="tabs-trigger-close-button"] {
+          opacity: 1;
+        }
+      }
+    }
+    &:has([data-selected]) {
+      color: var(--text-strong);
+      background-color: transparent;
+      border-bottom-color: transparent;
+      [data-slot="tabs-trigger-close-button"] {
+        opacity: 1;
+      }
+    }
+    &:hover:not(:disabled):not([data-selected]) {
+      color: var(--text-strong);
+    }
+    &:has([data-slot="tabs-trigger-close-button"]) {
+      padding-right: 12px;
+
+      [data-slot="tabs-trigger"] {
+        padding-right: 0;
+      }
+    }
+  }
+
+  [data-slot="tabs-content"] {
+    overflow-y: auto;
+    flex: 1;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &[data-variant="alt"] {
+    [data-slot="tabs-list"] {
+      padding-left: 24px;
+      padding-right: 24px;
+      gap: 12px;
+      border-bottom: 1px solid var(--border-weak-base);
+      background-color: transparent;
+
+      &::after {
+        border: none;
+        background-color: transparent;
+      }
+      &:empty::after {
+        display: none;
+      }
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      border: none;
+      color: var(--text-base);
+      background-color: transparent;
+      border-bottom-width: 2px;
+      border-bottom-style: solid;
+      border-bottom-color: transparent;
+      gap: 4px;
+
+      /* text-14-regular */
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-base);
+      font-style: normal;
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-x-large); /* 171.429% */
+      letter-spacing: var(--letter-spacing-normal);
+
+      [data-slot="tabs-trigger"] {
+        height: 100%;
+        padding: 4px;
+        background-color: transparent;
+        border-bottom-width: 2px;
+        border-bottom-color: transparent;
+      }
+
+      [data-slot="tabs-trigger-close-button"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [data-component="icon-button"] {
+        width: 16px;
+        height: 16px;
+        margin: 0;
+      }
+
+      &:has([data-selected]) {
+        color: var(--text-strong);
+        background-color: transparent;
+        border-bottom-color: var(--icon-strong-base);
+      }
+
+      &:hover:not(:disabled):not([data-selected]) {
+        color: var(--text-strong);
+      }
+
+      &:has([data-slot="tabs-trigger-close-button"]) {
+        padding-right: 0;
+        [data-slot="tabs-trigger"] {
+          padding-right: 0;
+        }
+      }
+    }
+
+    /* [data-slot="tabs-content"] { */
+    /* } */
+  }
+
+  &[data-variant="pill"][data-orientation="horizontal"] {
+    background-color: transparent;
+
+    [data-slot="tabs-list"] {
+      height: auto;
+      padding: 6px 0;
+      gap: 4px;
+      background-color: var(--background-base);
+
+      &::after {
+        display: none;
+      }
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      height: 32px;
+      border: none;
+      border-radius: var(--radius-sm);
+      background-color: transparent;
+      gap: 0;
+
+      /* text-13-medium */
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-small);
+      font-style: normal;
+      font-weight: var(--font-weight-medium);
+      line-height: var(--line-height-large);
+      letter-spacing: var(--letter-spacing-normal);
+
+      [data-slot="tabs-trigger"] {
+        height: 100%;
+        width: 100%;
+        padding: 0 12px;
+        background-color: transparent;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: var(--surface-raised-base-hover);
+        color: var(--text-strong);
+      }
+
+      &:has([data-selected]) {
+        background-color: var(--surface-raised-base-active);
+        color: var(--text-strong);
+
+        &:hover:not(:disabled) {
+          background-color: var(--surface-raised-base-active);
+        }
+      }
+    }
+  }
+
+  &[data-variant="pill"][data-orientation="horizontal"][data-scope="filetree"] {
+    [data-slot="tabs-list"] {
+      height: 48px;
+      padding-inline: 12px;
+      gap: 8px;
+      align-items: center;
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      height: 26px;
+      border-radius: 6px;
+      color: var(--text-weak);
+
+      &:not(:has([data-selected])):hover:not(:disabled) {
+        color: var(--text-base);
+      }
+
+      &:has([data-selected]) {
+        color: var(--text-strong);
+      }
+    }
+  }
+
+  &[data-orientation="vertical"] {
+    flex-direction: row;
+
+    [data-slot="tabs-list"] {
+      flex-direction: column;
+      width: auto;
+      height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: 8px;
+      gap: 4px;
+      background-color: var(--background-base);
+      border-right: 1px solid var(--border-weak-base);
+
+      &::after {
+        display: none;
+      }
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      width: 100%;
+      height: 32px;
+      border: none;
+      border-radius: 8px;
+      background-color: transparent;
+
+      [data-slot="tabs-trigger"] {
+        height: 100%;
+        padding: 0 8px;
+        gap: 8px;
+        justify-content: flex-start;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: var(--surface-raised-base-hover);
+      }
+
+      &:has([data-selected]) {
+        background-color: var(--surface-raised-base-active);
+        color: var(--text-strong);
+      }
+    }
+
+    [data-slot="tabs-content"] {
+      overflow-x: auto;
+      overflow-y: auto;
+    }
+
+    &[data-variant="alt"] {
+      [data-slot="tabs-list"] {
+        padding: 8px;
+        gap: 4px;
+        border: none;
+
+        &::after {
+          display: none;
+        }
+      }
+
+      [data-slot="tabs-trigger-wrapper"] {
+        height: 32px;
+        border: none;
+        border-radius: 8px;
+
+        [data-slot="tabs-trigger"] {
+          border: none;
+          padding: 0 8px;
+          gap: 8px;
+          justify-content: flex-start;
+        }
+
+        &:hover:not(:disabled) {
+          background-color: var(--surface-raised-base-hover);
+        }
+
+        &:has([data-selected]) {
+          background-color: var(--surface-raised-base-hover);
+          color: var(--text-strong);
+        }
+      }
+    }
+
+    &[data-variant="settings"] {
+      [data-slot="tabs-list"] {
+        width: 150px;
+        min-width: 150px;
+
+        @media (min-width: 640px) {
+          width: 200px;
+          min-width: 200px;
+        }
+        padding: 12px;
+        gap: 0;
+        background-color: var(--background-base);
+        border-right: 1px solid var(--border-weak-base);
+
+        &::after {
+          display: none;
+        }
+      }
+
+      [data-slot="tabs-section-title"] {
+        width: 100%;
+        padding: 0 0 0 4px;
+        font-family: var(--font-family-sans);
+        font-size: var(--font-size-small);
+        font-weight: var(--font-weight-medium);
+        color: var(--text-weak);
+      }
+
+      [data-slot="tabs-trigger-wrapper"] {
+        height: 32px;
+        border: none;
+        border-radius: var(--radius-md);
+
+        /* text-14-medium */
+        font-family: var(--font-family-sans);
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-medium);
+        line-height: var(--line-height-large);
+
+        [data-slot="tabs-trigger"] {
+          border: none;
+          padding: 0 8px;
+          gap: 12px;
+          justify-content: flex-start;
+          width: 100%;
+          height: 100%;
+        }
+
+        [data-component="icon"] {
+          color: var(--icon-base);
+        }
+
+        &:hover:not(:disabled) {
+          background-color: var(--surface-raised-base-hover);
+        }
+
+        &:has([data-selected]) {
+          background-color: var(--surface-raised-base-active);
+          color: var(--text-strong);
+
+          [data-component="icon"] {
+            color: var(--icon-strong-base);
+          }
+
+          &:hover:not(:disabled) {
+            background-color: var(--surface-raised-base-active);
+          }
+        }
+      }
+
+      [data-slot="tabs-content"] {
+        background-color: var(--surface-raised-stronger-non-alpha);
+      }
+    }
+  }
 }

packages/ui/src/components/tag.css

@@ -1,40 +1,40 @@
 [data-component="tag"] {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
 
-	border-radius: var(--radius-xs);
-	border: 0.5px solid var(--border-weak-base);
-	background: var(--surface-raised-base);
-	color: var(--text-base);
-	transition-property: background-color, border-color, color;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
+  border-radius: var(--radius-xs);
+  border: 0.5px solid var(--border-weak-base);
+  background: var(--surface-raised-base);
+  color: var(--text-base);
+  transition-property: background-color, border-color, color;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
 
-	&[data-size="normal"] {
-		height: 18px;
-		padding: 0 6px;
+  &[data-size="normal"] {
+    height: 18px;
+    padding: 0 6px;
 
-		/* text-12-medium */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-small);
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large); /* 166.667% */
-		letter-spacing: var(--letter-spacing-normal);
-	}
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
 
-	&[data-size="large"] {
-		height: 22px;
-		padding: 0 8px;
+  &[data-size="large"] {
+    height: 22px;
+    padding: 0 8px;
 
-		/* text-14-medium */
-		font-family: var(--font-family-sans);
-		font-size: 14px;
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large); /* 142.857% */
-		letter-spacing: var(--letter-spacing-normal);
-	}
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
 }

packages/ui/src/components/text-field.css

@@ -1,134 +1,134 @@
 [data-component="input"] {
-	width: 100%;
-
-	[data-slot="input-input"] {
-		width: 100%;
-		color: var(--text-strong);
-
-		/* text-14-regular */
-		font-family: var(--font-family-sans);
-		font-size: 14px;
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-large); /* 142.857% */
-		letter-spacing: var(--letter-spacing-normal);
-
-		&:focus {
-			outline: none;
-		}
-
-		&::placeholder {
-			color: var(--text-weak);
-		}
-	}
-
-	&[data-variant="normal"] {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 8px;
-
-		[data-slot="input-label"] {
-			color: var(--text-weak);
-
-			/* text-12-medium */
-			font-family: var(--font-family-sans);
-			font-size: var(--font-size-small);
-			font-style: normal;
-			font-weight: var(--font-weight-medium);
-			line-height: 18px; /* 150% */
-			letter-spacing: var(--letter-spacing-normal);
-		}
-
-		[data-slot="input-wrapper"] {
-			display: flex;
-			align-items: start;
-			justify-content: space-between;
-			width: 100%;
-			padding-right: 4px;
-
-			border-radius: var(--radius-md);
-			border: 1px solid var(--border-weak-base);
-			background: var(--input-base);
-
-			&:focus-within:not(:has([data-readonly])) {
-				border-color: transparent;
-				/* border/shadow-xs/select */
-				box-shadow:
-					0 0 0 3px var(--border-weak-selected),
-					0 0 0 1px var(--border-selected),
-					0 1px 2px -1px rgba(19, 16, 16, 0.25),
-					0 1px 2px 0 rgba(19, 16, 16, 0.08),
-					0 1px 3px 0 rgba(19, 16, 16, 0.12);
-			}
-
-			&:has([data-invalid]) {
-				background: var(--surface-critical-weak);
-				border: 1px solid var(--border-critical-selected);
-			}
-
-			&:not(:has([data-slot="input-copy-button"])) {
-				padding-right: 0;
-			}
-		}
-
-		[data-slot="input-input"] {
-			color: var(--text-strong);
-
-			display: flex;
-			height: 32px;
-			padding: 2px 12px;
-			align-items: center;
-			flex: 1;
-			min-width: 0;
-
-			background: transparent;
-			border: none;
-
-			/* text-14-regular */
-			font-family: var(--font-family-sans);
-			font-size: 14px;
-			font-style: normal;
-			font-weight: var(--font-weight-regular);
-			line-height: var(--line-height-large); /* 142.857% */
-			letter-spacing: var(--letter-spacing-normal);
-
-			&:focus {
-				outline: none;
-			}
-
-			&::placeholder {
-				color: var(--text-weak);
-			}
-		}
-
-		textarea[data-slot="input-input"] {
-			height: auto;
-			min-height: 32px;
-			padding: 6px 12px;
-			resize: none;
-		}
-
-		[data-slot="input-copy-button"] {
-			flex-shrink: 0;
-			margin-top: 4px;
-			color: var(--icon-base);
-
-			&:hover {
-				color: var(--icon-strong-base);
-			}
-		}
-
-		[data-slot="input-error"] {
-			color: var(--text-on-critical-base);
-
-			/* text-12-medium */
-			font-family: var(--font-family-sans);
-			font-size: var(--font-size-small);
-			font-style: normal;
-			font-weight: var(--font-weight-medium);
-			line-height: 18px; /* 150% */
-			letter-spacing: var(--letter-spacing-normal);
-		}
-	}
+  width: 100%;
+
+  [data-slot="input-input"] {
+    width: 100%;
+    color: var(--text-strong);
+
+    /* text-14-regular */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--text-weak);
+    }
+  }
+
+  &[data-variant="normal"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+
+    [data-slot="input-label"] {
+      color: var(--text-weak);
+
+      /* text-12-medium */
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-small);
+      font-style: normal;
+      font-weight: var(--font-weight-medium);
+      line-height: 18px; /* 150% */
+      letter-spacing: var(--letter-spacing-normal);
+    }
+
+    [data-slot="input-wrapper"] {
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+      width: 100%;
+      padding-right: 4px;
+
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border-weak-base);
+      background: var(--input-base);
+
+      &:focus-within:not(:has([data-readonly])) {
+        border-color: transparent;
+        /* border/shadow-xs/select */
+        box-shadow:
+          0 0 0 3px var(--border-weak-selected),
+          0 0 0 1px var(--border-selected),
+          0 1px 2px -1px rgba(19, 16, 16, 0.25),
+          0 1px 2px 0 rgba(19, 16, 16, 0.08),
+          0 1px 3px 0 rgba(19, 16, 16, 0.12);
+      }
+
+      &:has([data-invalid]) {
+        background: var(--surface-critical-weak);
+        border: 1px solid var(--border-critical-selected);
+      }
+
+      &:not(:has([data-slot="input-copy-button"])) {
+        padding-right: 0;
+      }
+    }
+
+    [data-slot="input-input"] {
+      color: var(--text-strong);
+
+      display: flex;
+      height: 32px;
+      padding: 2px 12px;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+
+      background: transparent;
+      border: none;
+
+      /* text-14-regular */
+      font-family: var(--font-family-sans);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-large); /* 142.857% */
+      letter-spacing: var(--letter-spacing-normal);
+
+      &:focus {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: var(--text-weak);
+      }
+    }
+
+    textarea[data-slot="input-input"] {
+      height: auto;
+      min-height: 32px;
+      padding: 6px 12px;
+      resize: none;
+    }
+
+    [data-slot="input-copy-button"] {
+      flex-shrink: 0;
+      margin-top: 4px;
+      color: var(--icon-base);
+
+      &:hover {
+        color: var(--icon-strong-base);
+      }
+    }
+
+    [data-slot="input-error"] {
+      color: var(--text-on-critical-base);
+
+      /* text-12-medium */
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-small);
+      font-style: normal;
+      font-weight: var(--font-weight-medium);
+      line-height: 18px; /* 150% */
+      letter-spacing: var(--letter-spacing-normal);
+    }
+  }
 }

packages/ui/src/components/toast.css

@@ -1,205 +1,205 @@
 [data-component="toast-region"] {
-	position: fixed;
-	bottom: 48px;
-	right: 32px;
-	z-index: 1000;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 400px;
-	width: 100%;
-	pointer-events: none;
-
-	[data-slot="toast-list"] {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
+  position: fixed;
+  bottom: 48px;
+  right: 32px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 400px;
+  width: 100%;
+  pointer-events: none;
+
+  [data-slot="toast-list"] {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 }
 
 [data-component="toast"] {
-	display: flex;
-	align-items: flex-start;
-	gap: 20px;
-	padding: 16px 20px;
-	pointer-events: auto;
-	transition: all 150ms ease-out;
-
-	border-radius: var(--radius-lg);
-	border: 1px solid var(--border-weak-base);
-	background: var(--surface-float-base);
-	color: var(--text-invert-base);
-	box-shadow: var(--shadow-md);
-
-	[data-slot="toast-inner"] {
-		display: flex;
-		align-items: flex-start;
-		gap: 10px;
-	}
-
-	&[data-opened] {
-		animation: toastPopIn 150ms ease-out;
-	}
-
-	&[data-closed] {
-		animation: toastPopOut 100ms ease-in forwards;
-	}
-
-	&[data-swipe="move"] {
-		transform: translateX(var(--kb-toast-swipe-move-x));
-	}
-
-	&[data-swipe="cancel"] {
-		transform: translateX(0);
-		transition: transform 200ms ease-out;
-	}
-
-	&[data-swipe="end"] {
-		animation: toastSwipeOut 100ms ease-out forwards;
-	}
-
-	/* &[data-variant="success"] { */
-	/*   border-color: var(--color-semantic-positive); */
-	/* } */
-	/**/
-	/* &[data-variant="error"] { */
-	/*   border-color: var(--color-semantic-danger); */
-	/* } */
-	/**/
-	/* &[data-variant="loading"] { */
-	/*   border-color: var(--color-semantic-info); */
-	/* } */
-
-	[data-slot="toast-icon"] {
-		flex-shrink: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		[data-component="icon"] {
-			color: var(--text-invert-stronger);
-			/* color: var(--icon-invert-base); */
-		}
-	}
-
-	[data-slot="toast-content"] {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		min-width: 0;
-	}
-
-	[data-slot="toast-title"] {
-		color: var(--text-invert-strong);
-
-		/* text-14-medium */
-		font-family: var(--font-family-sans);
-		font-size: 14px;
-		font-style: normal;
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large); /* 142.857% */
-		letter-spacing: var(--letter-spacing-normal);
-
-		margin: 0;
-	}
-
-	[data-slot="toast-description"] {
-		color: var(--text-invert-base);
-		text-wrap-style: pretty;
-
-		/* text-14-regular */
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-base);
-		font-style: normal;
-		font-weight: var(--font-weight-regular);
-		line-height: var(--line-height-x-large); /* 171.429% */
-		letter-spacing: var(--letter-spacing-normal);
-
-		margin: 0;
-	}
-
-	[data-slot="toast-actions"] {
-		display: flex;
-		gap: 16px;
-		margin-top: 8px;
-	}
-
-	[data-slot="toast-action"] {
-		background: none;
-		border: none;
-		padding: 0;
-		cursor: pointer;
-
-		color: var(--text-invert-weak);
-		font-family: var(--font-family-sans);
-		font-size: var(--font-size-base);
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-large);
-		letter-spacing: var(--letter-spacing-normal);
-
-		&:hover {
-			text-decoration: underline;
-		}
-
-		&:first-child {
-			color: var(--text-invert-strong);
-		}
-	}
-
-	[data-slot="toast-close-button"] {
-		flex-shrink: 0;
-	}
-
-	[data-slot="toast-progress-track"] {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		height: 3px;
-		background-color: var(--surface-base);
-		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-		overflow: hidden;
-	}
-
-	[data-slot="toast-progress-fill"] {
-		height: 100%;
-		width: var(--kb-toast-progress-fill-width);
-		background-color: var(--color-primary);
-		transition: width 250ms linear;
-	}
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 16px 20px;
+  pointer-events: auto;
+  transition: all 150ms ease-out;
+
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-weak-base);
+  background: var(--surface-float-base);
+  color: var(--text-invert-base);
+  box-shadow: var(--shadow-md);
+
+  [data-slot="toast-inner"] {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  &[data-opened] {
+    animation: toastPopIn 150ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: toastPopOut 100ms ease-in forwards;
+  }
+
+  &[data-swipe="move"] {
+    transform: translateX(var(--kb-toast-swipe-move-x));
+  }
+
+  &[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe="end"] {
+    animation: toastSwipeOut 100ms ease-out forwards;
+  }
+
+  /* &[data-variant="success"] { */
+  /*   border-color: var(--color-semantic-positive); */
+  /* } */
+  /**/
+  /* &[data-variant="error"] { */
+  /*   border-color: var(--color-semantic-danger); */
+  /* } */
+  /**/
+  /* &[data-variant="loading"] { */
+  /*   border-color: var(--color-semantic-info); */
+  /* } */
+
+  [data-slot="toast-icon"] {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    [data-component="icon"] {
+      color: var(--text-invert-stronger);
+      /* color: var(--icon-invert-base); */
+    }
+  }
+
+  [data-slot="toast-content"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  [data-slot="toast-title"] {
+    color: var(--text-invert-strong);
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    margin: 0;
+  }
+
+  [data-slot="toast-description"] {
+    color: var(--text-invert-base);
+    text-wrap-style: pretty;
+
+    /* text-14-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-x-large); /* 171.429% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    margin: 0;
+  }
+
+  [data-slot="toast-actions"] {
+    display: flex;
+    gap: 16px;
+    margin-top: 8px;
+  }
+
+  [data-slot="toast-action"] {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    color: var(--text-invert-weak);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:first-child {
+      color: var(--text-invert-strong);
+    }
+  }
+
+  [data-slot="toast-close-button"] {
+    flex-shrink: 0;
+  }
+
+  [data-slot="toast-progress-track"] {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: var(--surface-base);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    overflow: hidden;
+  }
+
+  [data-slot="toast-progress-fill"] {
+    height: 100%;
+    width: var(--kb-toast-progress-fill-width);
+    background-color: var(--color-primary);
+    transition: width 250ms linear;
+  }
 }
 
 @keyframes toastPopIn {
-	from {
-		opacity: 0;
-		transform: translateY(20px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes toastPopOut {
-	from {
-		opacity: 1;
-		transform: translateY(0);
-	}
-	to {
-		opacity: 0;
-		transform: translateY(20px);
-	}
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
 }
 
 @keyframes toastSwipeOut {
-	from {
-		transform: translateX(var(--kb-toast-swipe-end-x));
-	}
-	to {
-		transform: translateX(100%);
-	}
+  from {
+    transform: translateX(var(--kb-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(100%);
+  }
 }

packages/ui/src/components/tooltip.css

@@ -1,74 +1,74 @@
 [data-component="tooltip-trigger"] {
-	display: flex;
+  display: flex;
 }
 
 [data-slot="tooltip-keybind"] {
-	display: flex;
-	align-items: center;
-	gap: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 [data-slot="tooltip-keybind-key"] {
-	color: var(--text-invert-base);
-	font-size: var(--font-size-small);
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-large);
+  color: var(--text-invert-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
 }
 
 [data-component="tooltip"] {
-	z-index: 1000;
-	max-width: 320px;
-	border-radius: var(--radius-sm);
-	background-color: var(--surface-float-base);
-	color: var(--text-invert-strong);
-	background: var(--surface-float-base);
-	padding: 2px 8px;
-	border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+  z-index: 1000;
+  max-width: 320px;
+  border-radius: var(--radius-sm);
+  background-color: var(--surface-float-base);
+  color: var(--text-invert-strong);
+  background: var(--surface-float-base);
+  padding: 2px 8px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
 
-	box-shadow: var(--shadow-md);
-	pointer-events: none !important;
-	/* transition: all 150ms ease-out; */
-	/* transform: translate3d(0, 0, 0); */
-	/* transform-origin: var(--kb-tooltip-content-transform-origin); */
+  box-shadow: var(--shadow-md);
+  pointer-events: none !important;
+  /* transition: all 150ms ease-out; */
+  /* transform: translate3d(0, 0, 0); */
+  /* transform-origin: var(--kb-tooltip-content-transform-origin); */
 
-	/* text-12-medium */
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-small);
-	font-style: normal;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-large); /* 166.667% */
-	letter-spacing: var(--letter-spacing-normal);
+  /* text-12-medium */
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
 
-	&[data-expanded] {
-		opacity: 1;
-		/* transform: translate3d(0, 0, 0); */
-	}
+  &[data-expanded] {
+    opacity: 1;
+    /* transform: translate3d(0, 0, 0); */
+  }
 
-	&[data-closed]:not([data-force-open="true"]) {
-		opacity: 0;
-	}
+  &[data-closed]:not([data-force-open="true"]) {
+    opacity: 0;
+  }
 
-	/* &[data-placement="top"] { */
-	/*   &[data-closed] { */
-	/*     transform: translate3d(0, 4px, 0); */
-	/*   } */
-	/* } */
-	/**/
-	/* &[data-placement="bottom"] { */
-	/*   &[data-closed] { */
-	/*     transform: translate3d(0, -4px, 0); */
-	/*   } */
-	/* } */
-	/**/
-	/* &[data-placement="left"] { */
-	/*   &[data-closed] { */
-	/*     transform: translate3d(4px, 0, 0); */
-	/*   } */
-	/* } */
-	/**/
-	/* &[data-placement="right"] { */
-	/*   &[data-closed] { */
-	/*     transform: translate3d(-4px, 0, 0); */
-	/*   } */
-	/* } */
+  /* &[data-placement="top"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, 4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="bottom"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, -4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="left"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(4px, 0, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="right"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(-4px, 0, 0); */
+  /*   } */
+  /* } */
 }

packages/ui/src/components/typewriter.css

@@ -1,14 +1,14 @@
 @keyframes blink {
-	0%,
-	50% {
-		opacity: 1;
-	}
-	51%,
-	100% {
-		opacity: 0;
-	}
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
 }
 
 .blinking-cursor {
-	animation: blink 1s step-end infinite;
+  animation: blink 1s step-end infinite;
 }

packages/ui/src/context/dialog.tsx

@@ -121,12 +121,16 @@ function init() {
 
   const render = (element: JSX.Element, id: string, owner: Owner) => {
     setRenders((renders) => ({ ...renders, [id]: element }))
-    show(() => element, owner, () => {
-      setRenders((renders) => {
-        const { [id]: _, ...rest } = renders
-        return rest
-      })
-    })
+    show(
+      () => element,
+      owner,
+      () => {
+        setRenders((renders) => {
+          const { [id]: _, ...rest } = renders
+          return rest
+        })
+      },
+    )
   }
 
   const isActive = (id: string) => {

packages/ui/src/styles/utilities.css

@@ -1,174 +1,173 @@
 :root {
-	interpolate-size: allow-keywords;
+  interpolate-size: allow-keywords;
 
-	/* Transition tokens */
-	--transition-duration: 200ms;
-	--transition-easing: cubic-bezier(0.25, 0, 0.5, 1);
-	--transition-fast: 150ms;
-	--transition-slow: 300ms;
+  /* Transition tokens */
+  --transition-duration: 200ms;
+  --transition-easing: cubic-bezier(0.25, 0, 0.5, 1);
+  --transition-fast: 150ms;
+  --transition-slow: 300ms;
 
-	/* Allow height transitions from 0 to auto */
-	@supports (interpolate-size: allow-keywords) {
-		interpolate-size: allow-keywords;
-	}
+  /* Allow height transitions from 0 to auto */
+  @supports (interpolate-size: allow-keywords) {
+    interpolate-size: allow-keywords;
+  }
 
-	[data-popper-positioner] {
-		pointer-events: none;
-	}
+  [data-popper-positioner] {
+    pointer-events: none;
+  }
 
-	/* ::selection { */
-	/*   background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); */
-	/*   background-color: var(--color-primary); */
-	/*   color: var(--color-background); */
-	/* } */
+  /* ::selection { */
+  /*   background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); */
+  /*   background-color: var(--color-primary); */
+  /*   color: var(--color-background); */
+  /* } */
 
-	::-webkit-scrollbar-track {
-		background: transparent;
-	}
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
 
-	::-webkit-scrollbar-thumb {
-		background-color: var(--surface-float-base);
-		border-radius: var(--radius-md);
-	}
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--surface-float-base);
+    border-radius: var(--radius-md);
+  }
 
-	* {
-		scrollbar-color: var(--surface-float-base) transparent;
-	}
+  * {
+    scrollbar-color: var(--surface-float-base) transparent;
+  }
 }
 
 .no-scrollbar {
-	&::-webkit-scrollbar {
-		display: none;
-	}
-	/* Hide scrollbar for IE, Edge and Firefox */
-	& {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }
 
 .sr-only {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border-width: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }
 
 .truncate-start {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-	direction: rtl;
-	text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
 }
 
 .text-12-regular {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-small);
-	font-style: normal;
-	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-large); /* 166.667% */
-	letter-spacing: var(--letter-spacing-normal);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-12-medium {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-small);
-	font-style: normal;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-large); /* 166.667% */
-	letter-spacing: var(--letter-spacing-normal);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-12-mono {
-	font-family: var(--font-family-mono);
-	font-feature-settings: var(--font-feature-settings-mono);
-	font-size: var(--font-size-small);
-	font-style: normal;
-	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-large); /* 166.667% */
-	letter-spacing: var(--letter-spacing-normal);
+  font-family: var(--font-family-mono);
+  font-feature-settings: var(--font-feature-settings-mono);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-14-regular {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-base);
-	font-style: normal;
-	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-x-large); /* 171.429% */
-	letter-spacing: var(--letter-spacing-normal);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-x-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-14-medium {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-base);
-	font-style: normal;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-large); /* 171.429% */
-	letter-spacing: var(--letter-spacing-normal);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-14-mono {
-	font-family: var(--font-family-mono);
-	font-feature-settings: var(--font-feature-settings-mono);
-	font-size: var(--font-size-base);
-	font-style: normal;
-	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-large); /* 171.429% */
-	letter-spacing: var(--letter-spacing-normal);
+  font-family: var(--font-family-mono);
+  font-feature-settings: var(--font-feature-settings-mono);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-16-medium {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-large);
-	font-style: normal;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-x-large); /* 150% */
-	letter-spacing: var(--letter-spacing-tight);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-large);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-x-large); /* 150% */
+  letter-spacing: var(--letter-spacing-tight);
 }
 
 .text-20-medium {
-	font-family: var(--font-family-sans);
-	font-size: var(--font-size-x-large);
-	font-style: normal;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-x-large); /* 120% */
-	letter-spacing: var(--letter-spacing-tightest);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-x-large);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-x-large); /* 120% */
+  letter-spacing: var(--letter-spacing-tightest);
 }
 
 /* Transition utility classes */
 .transition-colors {
-	transition-property: background-color, border-color, color, fill, stroke;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
 }
 
 .transition-opacity {
-	transition-property: opacity;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
 }
 
 .transition-transform {
-	transition-property: transform;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
+  transition-property: transform;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
 }
 
 .transition-shadow {
-	transition-property: box-shadow;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
+  transition-property: box-shadow;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
 }
 
 .transition-interactive {
-	transition-property:
-		background-color, border-color, color, box-shadow, opacity;
-	transition-duration: var(--transition-duration);
-	transition-timing-function: var(--transition-easing);
+  transition-property: background-color, border-color, color, box-shadow, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
 }