@opencode/ui 2.0.23 → 2.0.25

package/dist/context/marked-parser.d.ts

@@ -1 +1,3 @@
+import type { MarkedExtension } from "marked";
 export declare function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>): import("marked").Marked<string, string>;
+export declare const markdownMath: MarkedExtension;

package/dist/i18n/en.d.ts

@@ -221,6 +221,7 @@ declare const source: {
     "ui.message.forkMessage": string;
     "ui.message.revertMessage": string;
     "ui.message.moveToQueue": string;
+    "ui.message.pending": string;
     "ui.message.deletePending": string;
     "ui.message.copyResponse": string;
     "ui.message.copied": string;

package/dist/icons/catalog.d.ts

@@ -184,6 +184,38 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "outline-arrow-left": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-arrow-right": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-arrow-up-right": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-rotate-clockwise": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-globe": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-globe-plus": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-cookie": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-browser-annotate": {
+        viewBox: string;
+        body: string;
+    };
     "arrow-up-right": {
         viewBox: string;
         body: string;
@@ -220,6 +252,10 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "outline-undo": {
+        viewBox: string;
+        body: string;
+    };
     "outline-reset": {
         viewBox: string;
         body: string;

package/dist/navigation/segmented-control/segmented-control.d.ts

@@ -1,7 +1,20 @@
-import { type JSX, type ParentProps } from "solid-js";
-import type { ComponentProps } from "solid-js";
+import { type Transition } from "@kitlangton/solid-motion";
+import { type ComponentProps, type JSX, type ParentProps } from "solid-js";
 import "./segmented-control.css";
 type OnChange = (value: string | null) => void;
+export declare const SEGMENTED_CONTROL_SPRING: Transition;
+export type OffsetElement = {
+    offsetLeft: number;
+    offsetWidth: number;
+    offsetParent: Element | OffsetElement | null;
+    getBoundingClientRect: () => {
+        left: number;
+    };
+};
+export declare function measureOffset(root: OffsetElement, button: OffsetElement): {
+    x: number;
+    width: number;
+};
 export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> & ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
     value?: string | null;
@@ -11,6 +24,8 @@ export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> & Pa
     /** When true, clicking the active segment clears selection (`onChange(null)`). Default false. */
     allowDeselect?: boolean;
     disabled?: boolean;
+    /** Motion transition for the active indicator pill. */
+    transition?: Transition;
 }>;
 export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
 export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> & ParentProps<{
@@ -18,4 +33,8 @@ export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" |
     children: JSX.Element;
 }>;
 export declare function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element;
+export declare const SegmentedControlV2: typeof SegmentedControl;
+export declare const SegmentedControlItemV2: typeof SegmentedControlItem;
+export type SegmentedControlV2Props = SegmentedControlProps;
+export type SegmentedControlItemV2Props = SegmentedControlItemProps;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -244,6 +244,7 @@
     "vite-plugin-solid": "2.11.10"
   },
   "dependencies": {
+    "@kitlangton/solid-motion": "0.2.2",
     "@kobalte/core": "0.13.13",
     "@pierre/diffs": "1.5.1",
     "@solid-primitives/event-listener": "2.4.6",

package/src/actions/button/button.css

@@ -1,12 +1,8 @@
 @import "../submit.css";
 
-* {
+[data-component="button-v2"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="button-v2"] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -26,6 +22,10 @@
   outline: none;
 }
 
+[data-component="button-v2"] > * {
+  pointer-events: none;
+}
+
 [data-component="button-v2"]:focus {
   outline: none;
 }
@@ -240,10 +240,12 @@
   color: var(--v2-icon-icon-muted);
 }
 
-[data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
-    [data-expanded]
-  ) {
-  background-color: var(--v2-overlay-simple-overlay-hover);
+@media (hover: hover) {
+  [data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
+      [data-expanded]
+    ) {
+    background-color: var(--v2-overlay-simple-overlay-hover);
+  }
 }
 
 [data-component="button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {

package/src/actions/button/button.tsx

@@ -23,6 +23,7 @@ export interface ButtonProps
 
 export function Button(props: ButtonProps) {
   const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
+
   return (
     <Root
       {...rest}

package/src/actions/icon-button/icon-button.css

@@ -1,12 +1,8 @@
 @import "../submit.css";
 
-* {
+[data-component="icon-button-v2"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="icon-button-v2"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/actions/icon-button/icon-button.tsx

@@ -14,6 +14,7 @@ export interface IconButtonProps
 
 export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
   const [local, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList", "state"])
+
   return (
     <Root
       {...rest}

package/src/actions/split-button/split-button.tsx

@@ -3,6 +3,7 @@ import "./split-button.css"
 
 export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <div
       data-component="split-button-v2"
@@ -19,6 +20,7 @@ export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
 
 export function SplitButtonAction(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <button
       type="button"
@@ -34,6 +36,7 @@ export function SplitButtonAction(props: ComponentProps<"button">) {
 
 export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <button
       type="button"

package/src/actions/submit.css

@@ -33,18 +33,20 @@
   color: var(--v2-icon-icon-inverse);
 }
 
-:is(
-    [data-component="button-v2"][data-variant="submit"],
-    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
-  ):is(:hover, [data-state="hover"]):not(:disabled) {
-  background-image:
-    linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
-    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
+@media (hover: hover) {
+  :is(
+      [data-component="button-v2"][data-variant="submit"],
+      [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
+    ):is(:hover, [data-state="hover"]):not(:disabled) {
+    background-image:
+      linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
+      linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
+      linear-gradient(
+        90deg,
+        var(--v2-background-bg-icon-button-contrast) 0%,
+        var(--v2-background-bg-icon-button-contrast) 100%
+      );
+  }
 }
 
 :is(

package/src/components/animated-number.tsx

@@ -2,6 +2,7 @@ import { For, Index, createEffect, createMemo, on } from "solid-js"
 import { createStore } from "solid-js/store"
 
 const TRACK = Array.from({ length: 30 }, (_, index) => index % 10)
+
 const DURATION = 600
 
 function normalize(value: number) {
@@ -10,7 +11,9 @@ function normalize(value: number) {
 
 function spin(from: number, to: number, direction: 1 | -1) {
   if (from === to) return 0
+
   if (direction > 0) return (to - from + 10) % 10
+
   return -((from - to + 10) % 10)
 }
 
@@ -19,6 +22,7 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
     step: props.value + 10,
     animating: false,
   })
+
   const step = () => state.step
   const animating = () => state.animating
   let last = props.value
@@ -29,9 +33,11 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
       (next) => {
         const delta = spin(last, next, props.direction)
         last = next
+
         if (!delta) {
           setState("animating", false)
           setState("step", next + 10)
+
           return
         }
 
@@ -65,6 +71,7 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
 export function AnimatedNumber(props: { value: number; class?: string }) {
   const target = createMemo(() => {
     if (!Number.isFinite(props.value)) return 0
+
     return Math.max(0, Math.round(props.value))
   })
 
@@ -72,6 +79,7 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
     value: target(),
     direction: 1 as 1 | -1,
   })
+
   const value = () => state.value
   const direction = () => state.direction
 
@@ -80,6 +88,7 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
       target,
       (next) => {
         const current = value()
+
         if (next === current) return
 
         setState("direction", next > current ? 1 : -1)
@@ -90,13 +99,17 @@ export function AnimatedNumber(props: { value: number; class?: string }) {
   )
 
   const label = createMemo(() => value().toString())
+
   const digits = createMemo(() =>
     Array.from(label(), (char) => {
       const code = char.charCodeAt(0) - 48
+
       if (code < 0 || code > 9) return 0
+
       return code
     }).reverse(),
   )
+
   const width = createMemo(() => `${digits().length}ch`)
 
   return (

package/src/components/app-icon.tsx

@@ -46,7 +46,9 @@ const themed: Partial<Record<IconName, { light: string; dark: string }>> = {
 
 const scheme = () => {
   if (typeof document !== "object") return "light" as const
+
   if (document.documentElement.dataset.colorScheme === "dark") return "dark" as const
+
   return "light" as const
 }
 

package/src/components/card.tsx

@@ -22,30 +22,44 @@ export interface CardTitleProps extends ComponentProps<"div"> {
 
 function pick(variant: Variant) {
   if (variant === "error") return "circle-ban-sign" as const
+
   if (variant === "warning") return "warning" as const
+
   if (variant === "success") return "circle-check" as const
+
   if (variant === "info") return "help" as const
+
   return
 }
 
 function mix(style: ComponentProps<"div">["style"], value?: string) {
   if (!value) return style
+
   if (!style) return { "--card-accent": value }
+
   if (typeof style === "string") return `${style};--card-accent:${value};`
+
   return { ...(style as Record<string, string | number>), "--card-accent": value }
 }
 
 export function Card(props: CardProps) {
   const [split, rest] = splitProps(props, ["variant", "style", "class", "classList"])
   const variant = () => split.variant ?? "normal"
+
   const accent = () => {
     const v = variant()
+
     if (v === "error") return "var(--v2-state-fg-danger)"
+
     if (v === "warning") return "var(--icon-warning-active)"
+
     if (v === "success") return "var(--icon-success-active)"
+
     if (v === "info") return "var(--icon-info-active)"
+
     return
   }
+
   return (
     <div
       {...rest}
@@ -65,12 +79,17 @@ export function Card(props: CardProps) {
 export function CardTitle(props: CardTitleProps) {
   const [split, rest] = splitProps(props, ["variant", "icon", "class", "classList", "children"])
   const show = () => split.icon !== false && split.icon !== null
+
   const name = () => {
     if (split.icon === false || split.icon === null) return
+
     if (typeof split.icon === "string") return split.icon
+
     return pick(split.variant ?? "normal")
   }
+
   const placeholder = () => !name()
+
   return (
     <div
       {...rest}
@@ -92,6 +111,7 @@ export function CardTitle(props: CardTitleProps) {
 
 export function CardDescription(props: ComponentProps<"div">) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <div
       {...rest}
@@ -108,6 +128,7 @@ export function CardDescription(props: ComponentProps<"div">) {
 
 export function CardActions(props: ComponentProps<"div">) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <div
       {...rest}

package/src/components/collapsible.tsx

@@ -10,6 +10,7 @@ export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
 
 function CollapsibleRoot(props: CollapsibleProps) {
   const [local, others] = splitProps(props, ["class", "classList", "variant"])
+
   return (
     <Kobalte
       data-component="collapsible"

package/src/components/context-menu.tsx

@@ -3,23 +3,41 @@ import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
 export interface ContextMenuProps extends ComponentProps<typeof Kobalte> {}
+
 export interface ContextMenuTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
+
 export interface ContextMenuIconProps extends ComponentProps<typeof Kobalte.Icon> {}
+
 export interface ContextMenuPortalProps extends ComponentProps<typeof Kobalte.Portal> {}
+
 export interface ContextMenuContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
 export interface ContextMenuArrowProps extends ComponentProps<typeof Kobalte.Arrow> {}
+
 export interface ContextMenuSeparatorProps extends ComponentProps<typeof Kobalte.Separator> {}
+
 export interface ContextMenuGroupProps extends ComponentProps<typeof Kobalte.Group> {}
+
 export interface ContextMenuGroupLabelProps extends ComponentProps<typeof Kobalte.GroupLabel> {}
+
 export interface ContextMenuItemProps extends ComponentProps<typeof Kobalte.Item> {}
+
 export interface ContextMenuItemLabelProps extends ComponentProps<typeof Kobalte.ItemLabel> {}
+
 export interface ContextMenuItemDescriptionProps extends ComponentProps<typeof Kobalte.ItemDescription> {}
+
 export interface ContextMenuItemIndicatorProps extends ComponentProps<typeof Kobalte.ItemIndicator> {}
+
 export interface ContextMenuRadioGroupProps extends ComponentProps<typeof Kobalte.RadioGroup> {}
+
 export interface ContextMenuRadioItemProps extends ComponentProps<typeof Kobalte.RadioItem> {}
+
 export interface ContextMenuCheckboxItemProps extends ComponentProps<typeof Kobalte.CheckboxItem> {}
+
 export interface ContextMenuSubProps extends ComponentProps<typeof Kobalte.Sub> {}
+
 export interface ContextMenuSubTriggerProps extends ComponentProps<typeof Kobalte.SubTrigger> {}
+
 export interface ContextMenuSubContentProps extends ComponentProps<typeof Kobalte.SubContent> {}
 
 function ContextMenuRoot(props: ContextMenuProps) {
@@ -28,6 +46,7 @@ function ContextMenuRoot(props: ContextMenuProps) {
 
 function ContextMenuTrigger(props: ParentProps<ContextMenuTriggerProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Trigger
       {...rest}
@@ -44,6 +63,7 @@ function ContextMenuTrigger(props: ParentProps<ContextMenuTriggerProps>) {
 
 function ContextMenuIcon(props: ParentProps<ContextMenuIconProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Icon
       {...rest}
@@ -64,6 +84,7 @@ function ContextMenuPortal(props: ContextMenuPortalProps) {
 
 function ContextMenuContent(props: ParentProps<ContextMenuContentProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Content
       {...rest}
@@ -80,6 +101,7 @@ function ContextMenuContent(props: ParentProps<ContextMenuContentProps>) {
 
 function ContextMenuArrow(props: ContextMenuArrowProps) {
   const [local, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <Kobalte.Arrow
       {...rest}
@@ -94,6 +116,7 @@ function ContextMenuArrow(props: ContextMenuArrowProps) {
 
 function ContextMenuSeparator(props: ContextMenuSeparatorProps) {
   const [local, rest] = splitProps(props, ["class", "classList"])
+
   return (
     <Kobalte.Separator
       {...rest}
@@ -108,6 +131,7 @@ function ContextMenuSeparator(props: ContextMenuSeparatorProps) {
 
 function ContextMenuGroup(props: ParentProps<ContextMenuGroupProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Group
       {...rest}
@@ -124,6 +148,7 @@ function ContextMenuGroup(props: ParentProps<ContextMenuGroupProps>) {
 
 function ContextMenuGroupLabel(props: ParentProps<ContextMenuGroupLabelProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.GroupLabel
       {...rest}
@@ -140,6 +165,7 @@ function ContextMenuGroupLabel(props: ParentProps<ContextMenuGroupLabelProps>) {
 
 function ContextMenuItem(props: ParentProps<ContextMenuItemProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.Item
       {...rest}
@@ -156,6 +182,7 @@ function ContextMenuItem(props: ParentProps<ContextMenuItemProps>) {
 
 function ContextMenuItemLabel(props: ParentProps<ContextMenuItemLabelProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.ItemLabel
       {...rest}
@@ -172,6 +199,7 @@ function ContextMenuItemLabel(props: ParentProps<ContextMenuItemLabelProps>) {
 
 function ContextMenuItemDescription(props: ParentProps<ContextMenuItemDescriptionProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.ItemDescription
       {...rest}
@@ -188,6 +216,7 @@ function ContextMenuItemDescription(props: ParentProps<ContextMenuItemDescriptio
 
 function ContextMenuItemIndicator(props: ParentProps<ContextMenuItemIndicatorProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.ItemIndicator
       {...rest}
@@ -204,6 +233,7 @@ function ContextMenuItemIndicator(props: ParentProps<ContextMenuItemIndicatorPro
 
 function ContextMenuRadioGroup(props: ParentProps<ContextMenuRadioGroupProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.RadioGroup
       {...rest}
@@ -220,6 +250,7 @@ function ContextMenuRadioGroup(props: ParentProps<ContextMenuRadioGroupProps>) {
 
 function ContextMenuRadioItem(props: ParentProps<ContextMenuRadioItemProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.RadioItem
       {...rest}
@@ -236,6 +267,7 @@ function ContextMenuRadioItem(props: ParentProps<ContextMenuRadioItemProps>) {
 
 function ContextMenuCheckboxItem(props: ParentProps<ContextMenuCheckboxItemProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.CheckboxItem
       {...rest}
@@ -256,6 +288,7 @@ function ContextMenuSub(props: ContextMenuSubProps) {
 
 function ContextMenuSubTrigger(props: ParentProps<ContextMenuSubTriggerProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.SubTrigger
       {...rest}
@@ -272,6 +305,7 @@ function ContextMenuSubTrigger(props: ParentProps<ContextMenuSubTriggerProps>) {
 
 function ContextMenuSubContent(props: ParentProps<ContextMenuSubContentProps>) {
   const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
   return (
     <Kobalte.SubContent
       {...rest}

package/src/components/dock-surface.tsx

@@ -6,6 +6,7 @@ export interface DockTrayProps extends ComponentProps<"div"> {
 
 export function DockShell(props: ComponentProps<"div">) {
   const [split, rest] = splitProps(props, ["children", "class", "classList"])
+
   return (
     <div
       {...rest}
@@ -22,6 +23,7 @@ export function DockShell(props: ComponentProps<"div">) {
 
 export function DockShellForm(props: ComponentProps<"form">) {
   const [split, rest] = splitProps(props, ["children", "class", "classList"])
+
   return (
     <form
       {...rest}
@@ -38,6 +40,7 @@ export function DockShellForm(props: ComponentProps<"form">) {
 
 export function DockTray(props: DockTrayProps) {
   const [split, rest] = splitProps(props, ["attach", "children", "class", "classList"])
+
   return (
     <div
       {...rest}

package/src/components/file-icon.tsx

@@ -13,6 +13,7 @@ export const FileIcon: Component<FileIconProps> = (props) => {
   const [local, rest] = splitProps(props, ["node", "class", "classList", "expanded", "mono"])
   const name = createMemo(() => chooseIconName(local.node.path, local.node.type, local.expanded || false))
   const id = `file-icon-mono-${createUniqueId()}`
+
   return (
     <svg
       data-component="file-icon"
@@ -542,8 +543,11 @@ const ICON_MAPS: IconMaps = {
 
 const toOpenVariant = (icon: IconName): IconName => {
   if (!icon.startsWith("Folder")) return icon
+
   if (icon.endsWith("_light")) return icon.replace("_light", "Open_light") as IconName
+
   if (!icon.endsWith("Open")) return (icon + "Open") as IconName
+
   return icon
 }
 
@@ -551,16 +555,20 @@ const basenameOf = (p: string) => p.split("\\").join("/").split("/").filter(Bool
 
 const folderNameVariants = (name: string) => {
   const n = name.toLowerCase()
+
   return [n, `.${n}`, `_${n}`, `__${n}__`]
 }
 
 const dottedSuffixesDesc = (name: string) => {
   const n = name.toLowerCase()
   const idxs: number[] = []
+
   for (let i = 0; i < n.length; i++) if (n[i] === ".") idxs.push(i)
   const out = new Set<string>()
   out.add(n) // allow exact whole-name "extensions" like "dockerfile"
+
   for (const i of idxs) if (i + 1 < n.length) out.add(n.slice(i + 1))
+
   return Array.from(out).sort((a, b) => b.length - a.length) // longest first
 }
 
@@ -571,16 +579,20 @@ export function chooseIconName(path: string, type: "directory" | "file", expande
   if (type === "directory") {
     for (const cand of folderNameVariants(baseLower)) {
       const icon = ICON_MAPS.folderNames[cand]
+
       if (icon) return expanded ? toOpenVariant(icon) : icon
     }
+
     return expanded ? ICON_MAPS.defaults.folderOpen : ICON_MAPS.defaults.folder
   }
 
   const byName = ICON_MAPS.fileNames[baseLower]
+
   if (byName) return byName
 
   for (const ext of dottedSuffixesDesc(baseLower)) {
     const icon = ICON_MAPS.fileExtensions[ext]
+
     if (icon) return icon
   }