@cortexkit/opencode-anthropic-auth 2.0.3 → 2.1.0

package/src/sidebar-state.ts

@@ -128,9 +128,10 @@ import { tmpdir } from 'node:os'
 import { dirname, join } from 'node:path'
 import type { PrimeUsageCounters } from '@cortexkit/anthropic-auth-core'
 import {
+  formatQuota,
+  isQuotaStale,
   logger,
   quotaDisplayProjection,
-  quotaWindowParts,
 } from '@cortexkit/anthropic-auth-core'
 
 const STATE_FILE_ENV = 'OPENCODE_ANTHROPIC_AUTH_SIDEBAR_STATE_FILE'
@@ -655,7 +656,9 @@ async function writeSidebarStateAtomic(
       return 'lock-lost-before-rename'
     }
     await rename(tempFile, stateFile)
-    await testHooks?.afterRename?.(stateFile)
+    // Look the hooks up again: a test may start listening while this write is
+    // in flight, after reading the old file, and must still hear this rename.
+    await sidebarStateWriteHooksFor(stateFile)?.afterRename?.(stateFile)
     if (!(await ownsLock())) return 'lock-lost-after-rename'
     return 'written'
   } catch (error) {
@@ -945,71 +948,6 @@ export function formatQuotaRowLabel(name: string, width = 10): string {
   return label + ' '.repeat(Math.max(0, width - Bun.stringWidth(label)))
 }
 
-// common-auth 0.18.0 has no narrow form, so keep its one-line quota wording here.
-// Once supported, replace this body with formatQuota(quotaDisplayProjection(quota, now),
-// { now, form: 'narrow' }) from common-auth.
-function formatNarrowQuota(quota: AccountQuota, now: number): string {
-  const parts = quotaWindowParts(quotaDisplayProjection(quota, now), { now })
-  const percent = (remaining: number | undefined) =>
-    remaining === undefined ? '—' : `${Math.round(remaining)}%`
-  const values = ['5h', '7d'].map((name) => {
-    const part = parts.windows.find(
-      (part) => part.name === name && part.kind === 'window',
-    )
-    return `${name} ${percent(part?.remainingPercent)}`
-  })
-  const scoped = quota.scoped ?? []
-  const names = [...new Set(scoped.map((window) => window.modelName))]
-  const lengths = names.map(() => 2)
-  while (true) {
-    const aliases = names.map((name, index) =>
-      [...name].slice(0, lengths[index]).join(''),
-    )
-    let extended = false
-    for (const [index, alias] of aliases.entries()) {
-      const length = lengths[index] ?? 2
-      if (
-        aliases.some(
-          (other, otherIndex) => otherIndex !== index && other === alias,
-        ) &&
-        length < [...(names[index] ?? '')].length
-      ) {
-        lengths[index] = length + 1
-        extended = true
-      }
-    }
-    if (!extended) break
-  }
-  const tightest = scoped.reduce<ScopedQuotaWindow | undefined>(
-    (lowest, window) =>
-      !lowest || window.remainingPercent < lowest.remainingPercent
-        ? window
-        : lowest,
-    undefined,
-  )
-  const budget = parts.windows.find((part) => part.kind === 'budget')
-  const budgetRemaining = quota.extraUsage?.exhausted
-    ? 0
-    : budget?.remainingPercent
-  // Monetary ratios can land a few floating-point bits below an equal model reading.
-  const budgetTighter =
-    budget &&
-    (!tightest ||
-      (budgetRemaining !== undefined &&
-        tightest.remainingPercent - budgetRemaining > 1e-9))
-  if (budgetTighter) {
-    values.push(`cr ${percent(budgetRemaining)}`)
-  } else if (tightest) {
-    const index = names.indexOf(tightest.modelName)
-    const name = [...tightest.modelName].slice(0, lengths[index]).join('')
-    const part = parts.windows.find(
-      (part) => part.kind === 'window' && part.name === tightest.title,
-    )
-    values.push(`${name} ${percent(part?.remainingPercent)}`)
-  }
-  return `${values.join(' · ')} left`
-}
-
 export function getCollapsedQuotaSummary(
   quota: AccountQuota | null,
   now = Date.now(),
@@ -1040,14 +978,15 @@ export function getCollapsedQuotaSummary(
     }
   }
 
+  const projection = quotaDisplayProjection(quota, now)
   return {
     fiveHourUsedPercent,
     sevenDayUsedPercent,
     scopedUsedPercents,
-    text: formatNarrowQuota(quota, now),
-    stale:
-      quotaWindowParts(quotaDisplayProjection(quota, now), { now }).age !==
-      undefined,
+    // The narrow form leaves out the reading's age to stay on one line, so
+    // a stale reading is dimmed instead of labelled.
+    text: formatQuota(projection, { now, form: 'narrow' }),
+    stale: isQuotaStale(projection, { now }),
   }
 }
 

package/src/tui-compiled/sidebar-state.ts

@@ -128,9 +128,10 @@ import { tmpdir } from 'node:os'
 import { dirname, join } from 'node:path'
 import type { PrimeUsageCounters } from '@cortexkit/anthropic-auth-core'
 import {
+  formatQuota,
+  isQuotaStale,
   logger,
   quotaDisplayProjection,
-  quotaWindowParts,
 } from '@cortexkit/anthropic-auth-core'
 
 const STATE_FILE_ENV = 'OPENCODE_ANTHROPIC_AUTH_SIDEBAR_STATE_FILE'
@@ -655,7 +656,9 @@ async function writeSidebarStateAtomic(
       return 'lock-lost-before-rename'
     }
     await rename(tempFile, stateFile)
-    await testHooks?.afterRename?.(stateFile)
+    // Look the hooks up again: a test may start listening while this write is
+    // in flight, after reading the old file, and must still hear this rename.
+    await sidebarStateWriteHooksFor(stateFile)?.afterRename?.(stateFile)
     if (!(await ownsLock())) return 'lock-lost-after-rename'
     return 'written'
   } catch (error) {
@@ -945,71 +948,6 @@ export function formatQuotaRowLabel(name: string, width = 10): string {
   return label + ' '.repeat(Math.max(0, width - Bun.stringWidth(label)))
 }
 
-// common-auth 0.18.0 has no narrow form, so keep its one-line quota wording here.
-// Once supported, replace this body with formatQuota(quotaDisplayProjection(quota, now),
-// { now, form: 'narrow' }) from common-auth.
-function formatNarrowQuota(quota: AccountQuota, now: number): string {
-  const parts = quotaWindowParts(quotaDisplayProjection(quota, now), { now })
-  const percent = (remaining: number | undefined) =>
-    remaining === undefined ? '—' : `${Math.round(remaining)}%`
-  const values = ['5h', '7d'].map((name) => {
-    const part = parts.windows.find(
-      (part) => part.name === name && part.kind === 'window',
-    )
-    return `${name} ${percent(part?.remainingPercent)}`
-  })
-  const scoped = quota.scoped ?? []
-  const names = [...new Set(scoped.map((window) => window.modelName))]
-  const lengths = names.map(() => 2)
-  while (true) {
-    const aliases = names.map((name, index) =>
-      [...name].slice(0, lengths[index]).join(''),
-    )
-    let extended = false
-    for (const [index, alias] of aliases.entries()) {
-      const length = lengths[index] ?? 2
-      if (
-        aliases.some(
-          (other, otherIndex) => otherIndex !== index && other === alias,
-        ) &&
-        length < [...(names[index] ?? '')].length
-      ) {
-        lengths[index] = length + 1
-        extended = true
-      }
-    }
-    if (!extended) break
-  }
-  const tightest = scoped.reduce<ScopedQuotaWindow | undefined>(
-    (lowest, window) =>
-      !lowest || window.remainingPercent < lowest.remainingPercent
-        ? window
-        : lowest,
-    undefined,
-  )
-  const budget = parts.windows.find((part) => part.kind === 'budget')
-  const budgetRemaining = quota.extraUsage?.exhausted
-    ? 0
-    : budget?.remainingPercent
-  // Monetary ratios can land a few floating-point bits below an equal model reading.
-  const budgetTighter =
-    budget &&
-    (!tightest ||
-      (budgetRemaining !== undefined &&
-        tightest.remainingPercent - budgetRemaining > 1e-9))
-  if (budgetTighter) {
-    values.push(`cr ${percent(budgetRemaining)}`)
-  } else if (tightest) {
-    const index = names.indexOf(tightest.modelName)
-    const name = [...tightest.modelName].slice(0, lengths[index]).join('')
-    const part = parts.windows.find(
-      (part) => part.kind === 'window' && part.name === tightest.title,
-    )
-    values.push(`${name} ${percent(part?.remainingPercent)}`)
-  }
-  return `${values.join(' · ')} left`
-}
-
 export function getCollapsedQuotaSummary(
   quota: AccountQuota | null,
   now = Date.now(),
@@ -1040,14 +978,15 @@ export function getCollapsedQuotaSummary(
     }
   }
 
+  const projection = quotaDisplayProjection(quota, now)
   return {
     fiveHourUsedPercent,
     sevenDayUsedPercent,
     scopedUsedPercents,
-    text: formatNarrowQuota(quota, now),
-    stale:
-      quotaWindowParts(quotaDisplayProjection(quota, now), { now }).age !==
-      undefined,
+    // The narrow form leaves out the reading's age to stay on one line, so
+    // a stale reading is dimmed instead of labelled.
+    text: formatQuota(projection, { now, form: 'narrow' }),
+    stale: isQuotaStale(projection, { now }),
   }
 }
 

package/src/tui-compiled/tui.tsx

@@ -12,9 +12,9 @@ import { createElement as _$createElement } from "opentui:runtime-module:%40open
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { quotaDisplayProjection, quotaWindowParts } from "@cortexkit/anthropic-auth-core";
+import { formatCreditAmounts, quotaDisplayProjection, quotaWindowParts } from "@cortexkit/anthropic-auth-core";
 import { TextAttributes } from "opentui:runtime-module:%40opentui%2Fcore";
-import { createEffect, createSignal, For, onCleanup, Show } from "opentui:runtime-module:solid-js";
+import { createEffect, createSignal, For, Index, onCleanup, Show } from "opentui:runtime-module:solid-js";
 import { createRpcClient } from "./rpc/rpc-client.js";
 import { getRpcDir } from "./rpc/rpc-dir.js";
 import { computeQuotaPacing, DEFAULT_SIDEBAR_STATE, FIVE_HOUR_MS, formatPrimeAccountValue, formatQuotaRowLabel, getCollapsedAccounts, getCollapsedQuotaSummary, getFableRecoverySummary, getSidebarState, resolveActiveAccount, SEVEN_DAY_MS } from "./sidebar-state.js";
@@ -395,6 +395,20 @@ function QuotaRow(props) {
   });
 }
 
+// The shared credit figure followed by the spent and limit amounts:
+// `credits 75% left · $25.00/$100.00`. When that line is wider than the
+// measured width, the amounts drop their cents (`$1,250/$5,000`) instead of
+// wrapping onto a second line.
+function creditLine(figure, extraUsage, width) {
+  const amounts = formatCreditAmounts(extraUsage);
+  if (!amounts) return figure;
+  const line = `${figure} · ${amounts}`;
+  if (width === undefined || Bun.stringWidth(line) <= width) return line;
+  return `${figure} · ${formatCreditAmounts(extraUsage, {
+    wholeUnits: true
+  })}`;
+}
+
 // Account block: header row (name + status word) then per-window quota rows.
 // Pacing is computed here — per window, against the wall clock at render time
 // (re-evaluated on every state poll) — and disabled by passing false.
@@ -523,12 +537,26 @@ function AccountBlock(props) {
           get when() {
             return partFor('credits');
           },
-          children: budget => (() => {
-            var _el$38 = _$createElement("text");
-            _$insert(_el$38, () => budget().figure);
-            _$effect(_$p => _$setProp(_el$38, "fg", toneColor(props.theme, props.quota?.extraUsage?.severity === 'critical' ? 'err' : props.quota?.extraUsage?.severity === 'warning' || props.quota?.extraUsage?.exhausted ? 'warn' : 'muted'), _$p));
-            return _el$38;
-          })()
+          children: budget => {
+            // The line box's laid-out width, read when it mounts and on each
+            // resize. It is undefined (amounts keep their cents) until layout.
+            const [width, setWidth] = createSignal();
+            let line;
+            return (() => {
+              var _el$38 = _$createElement("box"),
+                _el$39 = _$createElement("text");
+              _$insertNode(_el$38, _el$39);
+              _$use(element => {
+                line = element;
+                setWidth(element.width || undefined);
+              }, _el$38);
+              _$setProp(_el$38, "width", '100%');
+              _$setProp(_el$38, "onSizeChange", () => setWidth(line?.width || undefined));
+              _$insert(_el$39, () => creditLine(budget().figure, props.quota?.extraUsage, width()));
+              _$effect(_$p => _$setProp(_el$39, "fg", toneColor(props.theme, props.quota?.extraUsage?.severity === 'critical' ? 'err' : props.quota?.extraUsage?.severity === 'warning' || props.quota?.extraUsage?.exhausted ? 'warn' : 'muted'), _$p));
+              return _el$38;
+            })();
+          }
         }), _$createComponent(Show, {
           get when() {
             return parts().age;
@@ -592,26 +620,26 @@ function QuotaDialogContent(props) {
   const theme = () => props.api.theme.current;
   const enabledFallbacks = () => (state().fallbacks ?? []).filter(f => f.enabled || f.custodyState && f.custodyState !== 'off');
   return (() => {
-    var _el$39 = _$createElement("box"),
-      _el$40 = _$createElement("box"),
+    var _el$40 = _$createElement("box"),
       _el$41 = _$createElement("box"),
-      _el$42 = _$createElement("text"),
-      _el$43 = _$createElement("b");
-    _$insertNode(_el$39, _el$40);
-    _$setProp(_el$39, "flexDirection", 'column');
-    _$setProp(_el$39, "padding", 2);
-    _$setProp(_el$39, "width", '100%');
-    _$setProp(_el$39, "alignItems", 'center');
+      _el$42 = _$createElement("box"),
+      _el$43 = _$createElement("text"),
+      _el$44 = _$createElement("b");
     _$insertNode(_el$40, _el$41);
     _$setProp(_el$40, "flexDirection", 'column');
-    _$setProp(_el$40, "width", 58);
+    _$setProp(_el$40, "padding", 2);
+    _$setProp(_el$40, "width", '100%');
+    _$setProp(_el$40, "alignItems", 'center');
     _$insertNode(_el$41, _el$42);
-    _$setProp(_el$41, "width", '100%');
-    _$setProp(_el$41, "justifyContent", 'center');
-    _$setProp(_el$41, "marginBottom", 1);
+    _$setProp(_el$41, "flexDirection", 'column');
+    _$setProp(_el$41, "width", 58);
     _$insertNode(_el$42, _el$43);
-    _$insertNode(_el$43, _$createTextNode(`Quota`));
-    _$insert(_el$40, _$createComponent(AccountBlock, {
+    _$setProp(_el$42, "width", '100%');
+    _$setProp(_el$42, "justifyContent", 'center');
+    _$setProp(_el$42, "marginBottom", 1);
+    _$insertNode(_el$43, _el$44);
+    _$insertNode(_el$44, _$createTextNode(`Quota`));
+    _$insert(_el$41, _$createComponent(AccountBlock, {
       get theme() {
         return theme();
       },
@@ -638,7 +666,7 @@ function QuotaDialogContent(props) {
         return state().main?.quotaDated;
       }
     }), null);
-    _$insert(_el$40, _$createComponent(Show, {
+    _$insert(_el$41, _$createComponent(Show, {
       get when() {
         return prefs().sections.fallbackAccounts;
       },
@@ -686,8 +714,8 @@ function QuotaDialogContent(props) {
         });
       }
     }), null);
-    _$effect(_$p => _$setProp(_el$42, "fg", theme().text, _$p));
-    return _el$39;
+    _$effect(_$p => _$setProp(_el$43, "fg", theme().text, _$p));
+    return _el$40;
   })();
 }
 
@@ -824,33 +852,33 @@ function QuotaSidebar(props) {
     return `${r.transport} \u00b7 ${r.enabled ? 'on' : 'off'}`;
   };
   return (() => {
-    var _el$45 = _$createElement("box"),
-      _el$46 = _$createElement("box"),
+    var _el$46 = _$createElement("box"),
       _el$47 = _$createElement("box"),
-      _el$48 = _$createElement("text"),
-      _el$49 = _$createElement("b");
-    _$insertNode(_el$45, _el$46);
-    _$setProp(_el$45, "width", '100%');
-    _$setProp(_el$45, "flexDirection", 'column');
-    _$setProp(_el$45, "border", SINGLE_BORDER);
-    _$setProp(_el$45, "paddingTop", 1);
-    _$setProp(_el$45, "paddingBottom", 1);
-    _$setProp(_el$45, "paddingLeft", 1);
-    _$setProp(_el$45, "paddingRight", 1);
+      _el$48 = _$createElement("box"),
+      _el$49 = _$createElement("text"),
+      _el$50 = _$createElement("b");
     _$insertNode(_el$46, _el$47);
     _$setProp(_el$46, "width", '100%');
-    _$setProp(_el$46, "flexDirection", 'row');
-    _$setProp(_el$46, "justifyContent", 'space-between');
-    _$setProp(_el$46, "alignItems", 'center');
-    _$setProp(_el$46, "onMouseDown", () => {
+    _$setProp(_el$46, "flexDirection", 'column');
+    _$setProp(_el$46, "border", SINGLE_BORDER);
+    _$setProp(_el$46, "paddingTop", 1);
+    _$setProp(_el$46, "paddingBottom", 1);
+    _$setProp(_el$46, "paddingLeft", 1);
+    _$setProp(_el$46, "paddingRight", 1);
+    _$insertNode(_el$47, _el$48);
+    _$setProp(_el$47, "width", '100%');
+    _$setProp(_el$47, "flexDirection", 'row');
+    _$setProp(_el$47, "justifyContent", 'space-between');
+    _$setProp(_el$47, "alignItems", 'center');
+    _$setProp(_el$47, "onMouseDown", () => {
       if (hasData()) props.controller.toggleCollapsed();
     });
-    _$insertNode(_el$47, _el$48);
-    _$setProp(_el$47, "paddingLeft", 1);
-    _$setProp(_el$47, "paddingRight", 1);
     _$insertNode(_el$48, _el$49);
-    _$insert(_el$49, headerLabel);
-    _$insert(_el$46, _$createComponent(Show, {
+    _$setProp(_el$48, "paddingLeft", 1);
+    _$setProp(_el$48, "paddingRight", 1);
+    _$insertNode(_el$49, _el$50);
+    _$insert(_el$50, headerLabel);
+    _$insert(_el$47, _$createComponent(Show, {
       get when() {
         return degraded();
       },
@@ -860,41 +888,41 @@ function QuotaSidebar(props) {
             return prefs().header.showVersion && PLUGIN_VERSION !== '';
           },
           get children() {
-            var _el$57 = _$createElement("text");
-            _$insert(_el$57, `v${PLUGIN_VERSION}`);
-            _$effect(_$p => _$setProp(_el$57, "fg", theme().textMuted, _$p));
-            return _el$57;
+            var _el$58 = _$createElement("text");
+            _$insert(_el$58, `v${PLUGIN_VERSION}`);
+            _$effect(_$p => _$setProp(_el$58, "fg", theme().textMuted, _$p));
+            return _el$58;
           }
         });
       },
       get children() {
-        var _el$50 = _$createElement("box"),
-          _el$51 = _$createElement("text"),
-          _el$52 = _$createElement("b");
-        _$insertNode(_el$50, _el$51);
-        _$setProp(_el$50, "paddingLeft", 1);
-        _$setProp(_el$50, "paddingRight", 1);
+        var _el$51 = _$createElement("box"),
+          _el$52 = _$createElement("text"),
+          _el$53 = _$createElement("b");
         _$insertNode(_el$51, _el$52);
-        _$insertNode(_el$52, _$createTextNode(`LIMITED`));
+        _$setProp(_el$51, "paddingLeft", 1);
+        _$setProp(_el$51, "paddingRight", 1);
+        _$insertNode(_el$52, _el$53);
+        _$insertNode(_el$53, _$createTextNode(`LIMITED`));
         _$effect(_p$ => {
           var _v$18 = theme().warning,
             _v$19 = theme().background;
-          _v$18 !== _p$.e && (_p$.e = _$setProp(_el$50, "backgroundColor", _v$18, _p$.e));
-          _v$19 !== _p$.t && (_p$.t = _$setProp(_el$51, "fg", _v$19, _p$.t));
+          _v$18 !== _p$.e && (_p$.e = _$setProp(_el$51, "backgroundColor", _v$18, _p$.e));
+          _v$19 !== _p$.t && (_p$.t = _$setProp(_el$52, "fg", _v$19, _p$.t));
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$50;
+        return _el$51;
       }
     }), null);
-    _$insert(_el$45, _$createComponent(Show, {
+    _$insert(_el$46, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!collapsed())() && hasData();
       },
       get children() {
-        return [_$createComponent(For, {
+        return [_$createComponent(Index, {
           get each() {
             return getCollapsedAccounts(state(), prefs().sections.fallbackAccounts);
           },
@@ -902,7 +930,9 @@ function QuotaSidebar(props) {
             get theme() {
               return theme();
             },
-            account: account,
+            get account() {
+              return account();
+            },
             get tone() {
               return activeQuotaTone();
             }
@@ -918,12 +948,12 @@ function QuotaSidebar(props) {
               },
               label: "Mode",
               get children() {
-                var _el$54 = _$createElement("text"),
-                  _el$55 = _$createElement("b");
-                _$insertNode(_el$54, _el$55);
-                _$insertNode(_el$55, _$createTextNode(`fast`));
-                _$effect(_$p => _$setProp(_el$54, "fg", toneColor(theme(), 'accent'), _$p));
-                return _el$54;
+                var _el$55 = _$createElement("text"),
+                  _el$56 = _$createElement("b");
+                _$insertNode(_el$55, _el$56);
+                _$insertNode(_el$56, _$createTextNode(`fast`));
+                _$effect(_$p => _$setProp(_el$55, "fg", toneColor(theme(), 'accent'), _$p));
+                return _el$55;
               }
             });
           }
@@ -937,18 +967,18 @@ function QuotaSidebar(props) {
             },
             label: "Recovery",
             get children() {
-              var _el$58 = _$createElement("text"),
-                _el$59 = _$createElement("b");
-              _$insertNode(_el$58, _el$59);
-              _$insert(_el$59, summary);
-              _$effect(_$p => _$setProp(_el$58, "fg", toneColor(theme(), fableRecoveryTone()), _$p));
-              return _el$58;
+              var _el$59 = _$createElement("text"),
+                _el$60 = _$createElement("b");
+              _$insertNode(_el$59, _el$60);
+              _$insert(_el$60, summary);
+              _$effect(_$p => _$setProp(_el$59, "fg", toneColor(theme(), fableRecoveryTone()), _$p));
+              return _el$59;
             }
           })
         })];
       }
     }), null);
-    _$insert(_el$45, _$createComponent(Show, {
+    _$insert(_el$46, _$createComponent(Show, {
       get when() {
         return !collapsed() || !hasData();
       },
@@ -959,14 +989,14 @@ function QuotaSidebar(props) {
           },
           get fallback() {
             return (() => {
-              var _el$60 = _$createElement("box"),
-                _el$61 = _$createElement("text");
-              _$insertNode(_el$60, _el$61);
-              _$setProp(_el$60, "marginTop", 1);
-              _$setProp(_el$60, "width", '100%');
-              _$insertNode(_el$61, _$createTextNode(`Waiting for quota…`));
-              _$effect(_$p => _$setProp(_el$61, "fg", theme().textMuted, _$p));
-              return _el$60;
+              var _el$61 = _$createElement("box"),
+                _el$62 = _$createElement("text");
+              _$insertNode(_el$61, _el$62);
+              _$setProp(_el$61, "marginTop", 1);
+              _$setProp(_el$61, "width", '100%');
+              _$insertNode(_el$62, _$createTextNode(`Waiting for quota…`));
+              _$effect(_$p => _$setProp(_el$62, "fg", theme().textMuted, _$p));
+              return _el$61;
             })();
           },
           get children() {
@@ -1245,16 +1275,16 @@ function QuotaSidebar(props) {
       var _v$20 = theme().borderActive,
         _v$21 = theme().accent,
         _v$22 = theme().background;
-      _v$20 !== _p$.e && (_p$.e = _$setProp(_el$45, "borderColor", _v$20, _p$.e));
-      _v$21 !== _p$.t && (_p$.t = _$setProp(_el$47, "backgroundColor", _v$21, _p$.t));
-      _v$22 !== _p$.a && (_p$.a = _$setProp(_el$48, "fg", _v$22, _p$.a));
+      _v$20 !== _p$.e && (_p$.e = _$setProp(_el$46, "borderColor", _v$20, _p$.e));
+      _v$21 !== _p$.t && (_p$.t = _$setProp(_el$48, "backgroundColor", _v$21, _p$.t));
+      _v$22 !== _p$.a && (_p$.a = _$setProp(_el$49, "fg", _v$22, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$45;
+    return _el$46;
   })();
 }
 const tui = async api => {