gloomberb 0.9.7 → 0.9.8

package/src/components/chart/stock-chart/footer.ts

@@ -1,7 +1,8 @@
 import { useMemo, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
-import { formatCompact } from "../../../utils/format";
+import { formatCompact, formatPercentRaw } from "../../../utils/format";
 import { formatMarketPriceWithCurrency } from "../../../market-data/market/format";
 import { usePaneFooter, type PaneFooterSegment, type PaneHint } from "../../layout/pane/footer";
+import { priceColor } from "../../../theme/colors";
 import type { PricePoint } from "../../../types/financials";
 import type { ProjectedChartPoint } from "../core/data";
 import type { DateWindowRange } from "../core/controller";
@@ -24,8 +25,53 @@ import {
   type StockChartViewportState,
 } from "./viewport";
 
-interface StockChartFooterOptions {
+interface StockChartOhlcReadout extends ProjectedChartPoint {
+  changePercent: number | null;
+}
+
+function summarizeOhlcWindow(points: readonly ProjectedChartPoint[]): StockChartOhlcReadout | null {
+  const first = points[0];
+  const last = points.at(-1);
+  if (!first || !last) return null;
+
+  let high = first.high;
+  let low = first.low;
+  let volume = 0;
+  for (const point of points) {
+    high = Math.max(high, point.high);
+    low = Math.min(low, point.low);
+    volume += point.volume;
+  }
+
+  return {
+    date: last.date,
+    open: first.open,
+    high,
+    low,
+    close: last.close,
+    volume,
+    changePercent: Number.isFinite(first.open) && first.open !== 0
+      ? ((last.close - first.open) / first.open) * 100
+      : null,
+  };
+}
+
+export function resolveStockChartFooterOhlcReadout({
+  activePoint,
+  hasDisplayCursor,
+  points,
+}: {
   activePoint: ProjectedChartPoint | null;
+  hasDisplayCursor: boolean;
+  points: readonly ProjectedChartPoint[];
+}): StockChartOhlcReadout | null {
+  if (hasDisplayCursor) {
+    return activePoint ? { ...activePoint, changePercent: null } : null;
+  }
+  return summarizeOhlcWindow(points);
+}
+
+interface StockChartFooterOptions {
   activePreset: TimeRange | null;
   baseDateBounds: DateWindowRange | null;
   boundsHistoryDates: Date[];
@@ -37,6 +83,7 @@ interface StockChartFooterOptions {
   history: PricePoint[];
   manualMinimumSpanMs: number | null;
   navigableDateWindow: DateWindowRange | null;
+  ohlcReadout: StockChartOhlcReadout | null;
   pendingAutoWindowRef: MutableRefObject<DateWindowRange | null>;
   pendingCanonicalResetRef: MutableRefObject<number>;
   persistRenderMode: (mode: ChartRenderMode) => void;
@@ -50,7 +97,6 @@ interface StockChartFooterOptions {
   setRenderedAutoView: Dispatch<SetStateAction<AutoRenderedView | null>>;
   setResolution: (resolution: ChartResolution) => void;
   setViewState: Dispatch<SetStateAction<StockChartViewportState>>;
-  showOhlcSummary: boolean;
   updateDisplayCursorTarget: (next: DisplayCursorState, motionKind: ChartCursorMotionKind) => void;
   visibleDateWindow: DateWindowRange | null;
   visiblePriceRange: number | undefined;
@@ -58,7 +104,6 @@ interface StockChartFooterOptions {
 }
 
 export function useStockChartFooter({
-  activePoint,
   activePreset,
   baseDateBounds,
   boundsHistoryDates,
@@ -70,6 +115,7 @@ export function useStockChartFooter({
   history,
   manualMinimumSpanMs,
   navigableDateWindow,
+  ohlcReadout,
   pendingAutoWindowRef,
   pendingCanonicalResetRef,
   persistRenderMode,
@@ -83,7 +129,6 @@ export function useStockChartFooter({
   setRenderedAutoView,
   setResolution,
   setViewState,
-  showOhlcSummary,
   updateDisplayCursorTarget,
   visibleDateWindow,
   visiblePriceRange,
@@ -196,7 +241,7 @@ export function useStockChartFooter({
   ]);
 
   const chartFooterInfo = useMemo<PaneFooterSegment[]>(() => {
-    if (compact || !showOhlcSummary || !activePoint) return [];
+    if (compact || !ohlcReadout) return [];
 
     const formatPrice = (value: number) => formatMarketPriceWithCurrency(value, chartCurrency, {
       assetCategory: chartAssetCategory,
@@ -210,16 +255,27 @@ export function useStockChartFooter({
         ? []
         : [
             { text: "O", tone: "label" as const },
-            { text: formatPrice(activePoint.open), tone: "value" as const },
+            { text: formatPrice(ohlcReadout.open), tone: "value" as const },
           ]),
       { text: "H", tone: "label" },
-      { text: formatPrice(activePoint.high), tone: "value" },
+      { text: formatPrice(ohlcReadout.high), tone: "value" },
       { text: "L", tone: "label" },
-      { text: formatPrice(activePoint.low), tone: "value" },
+      { text: formatPrice(ohlcReadout.low), tone: "value" },
       { text: "C", tone: "label" },
-      { text: formatPrice(activePoint.close), tone: "value" },
+      { text: formatPrice(ohlcReadout.close), tone: "value" },
+      ...(ohlcReadout.changePercent === null
+        ? []
+        : [
+            { text: "%", tone: "label" as const },
+            {
+              text: formatPercentRaw(ohlcReadout.changePercent),
+              tone: "value" as const,
+              color: priceColor(ohlcReadout.changePercent),
+              bold: true,
+            },
+          ]),
       { text: "V", tone: "label" },
-      { text: formatCompact(activePoint.volume), tone: "value" },
+      { text: formatCompact(ohlcReadout.volume), tone: "value" },
     ];
 
     return [{
@@ -227,12 +283,11 @@ export function useStockChartFooter({
       parts,
     }];
   }, [
-    activePoint,
     chartAssetCategory,
     chartCurrency,
     compact,
+    ohlcReadout,
     projectionMode,
-    showOhlcSummary,
     visiblePriceRange,
   ]);
 

package/src/components/chart/stock-chart/resolved.tsx

@@ -1,5 +1,5 @@
-import { memo, type ComponentProps } from "react";
-import { useStockChartFooter } from "./footer";
+import { memo, useMemo, type ComponentProps } from "react";
+import { resolveStockChartFooterOhlcReadout, useStockChartFooter } from "./footer";
 import { useStockChartKeyboardShortcuts } from "./keyboard";
 import { useStockChartControlRenderInvalidation } from "./rendering/invalidation";
 import { useStockChartRenderOutput } from "./rendering/output";
@@ -139,9 +139,23 @@ function useResolvedStockChartControls(
   } = runtime;
   const { output, status } = render;
   const manualMinimumSpanMs = getChartResolutionStepMs(dataRuntime.renderedResolution);
+  const ohlcReadout = useMemo(
+    () => output.showOhlcSummary
+      ? resolveStockChartFooterOhlcReadout({
+        activePoint: output.activePoint,
+        hasDisplayCursor: output.hasDisplayCursor,
+        points: projectionModel.projection.points,
+      })
+      : null,
+    [
+      output.activePoint,
+      output.hasDisplayCursor,
+      output.showOhlcSummary,
+      projectionModel.projection.points,
+    ],
+  );
 
   useStockChartFooter({
-    activePoint: output.activePoint,
     activePreset: viewportRuntime.activePreset,
     baseDateBounds: dataRuntime.baseDateBounds,
     boundsHistoryDates: dataRuntime.boundsHistoryDates,
@@ -153,6 +167,7 @@ function useResolvedStockChartControls(
     history: dataRuntime.history,
     manualMinimumSpanMs,
     navigableDateWindow: dataRuntime.navigableDateWindow,
+    ohlcReadout,
     pendingAutoWindowRef: interactionRuntime.pendingAutoWindowRef,
     pendingCanonicalResetRef: interactionRuntime.pendingCanonicalResetRef,
     persistRenderMode: viewportRuntime.persistRenderMode,
@@ -166,7 +181,6 @@ function useResolvedStockChartControls(
     setRenderedAutoView: dataRuntime.setRenderedAutoView,
     setResolution: viewportRuntime.setResolution,
     setViewState: settings.setViewState,
-    showOhlcSummary: output.showOhlcSummary,
     updateDisplayCursorTarget: interactionRuntime.updateDisplayCursorTarget,
     visibleDateWindow: dataRuntime.visibleDateWindow,
     visiblePriceRange: output.visiblePriceRange,

package/src/components/command-bar/pane-templates/items.ts

@@ -139,6 +139,14 @@ export function buildPaneTemplateItem(options: {
       .join(" ")
     : null;
   const arg = options.createOptions?.arg;
+  const searchText = [
+    options.template.keywords?.join(" ") || "",
+    displayLabel,
+    options.template.label,
+    options.template.paneId,
+    shortcutLabel || "",
+    pluginName || "",
+  ].filter(Boolean).join(" ");
 
   const action = () => {
     if (
@@ -163,7 +171,7 @@ export function buildPaneTemplateItem(options: {
     kind: "action",
     right: options.showShortcut ? options.template.shortcut?.prefix : undefined,
     shortcutQuery: options.template.shortcut?.prefix,
-    searchText: `${displayLabel} ${options.template.label} ${options.template.paneId} ${options.template.keywords?.join(" ") || ""} ${shortcutLabel || ""} ${pluginName || ""}`,
+    searchText,
     action,
   };
 }
@@ -187,7 +195,7 @@ export function buildPaneShortcutItems(options: {
     }));
 
   return options.filterQuery
-    ? fuzzyFilter(items, options.filterQuery, (item) => `${item.label} ${item.detail} ${item.searchText || ""} ${item.right || ""}`)
+    ? fuzzyFilter(items, options.filterQuery, (item) => `${item.label} ${item.searchText || ""} ${item.detail} ${item.right || ""}`)
     : items;
 }
 
@@ -201,6 +209,6 @@ export function buildNonShortcutPaneTemplateItems(options: {
     .map((template) => options.createItem(template, { category: "Panes" }));
 
   return options.filterQuery
-    ? fuzzyFilter(items, options.filterQuery, (item) => `${item.label} ${item.detail} ${item.searchText || ""} ${item.right || ""}`)
+    ? fuzzyFilter(items, options.filterQuery, (item) => `${item.label} ${item.searchText || ""} ${item.detail} ${item.right || ""}`)
     : items;
 }

package/src/components/command-bar/routes/root/results.ts

@@ -196,7 +196,7 @@ export function buildRootResultModel(options: RootResultModelOptions): RootResul
       ...tickerActionItems(),
       ...pluginCommandItems(),
     ];
-    items.push(...fuzzyFilter(allItems, rootQuery, (item) => `${item.label} ${item.detail} ${item.searchText || ""} ${item.right || ""}`));
+    items.push(...fuzzyFilter(allItems, rootQuery, (item) => `${item.label} ${item.searchText || ""} ${item.detail} ${item.right || ""}`));
   }
 
   return { items, initialIdx };

package/src/components/command-bar/surface/index.test.tsx

@@ -6,6 +6,7 @@ import type { CommandDef, CommandShortcutArgContext, PaneTemplateCreateOptions,
 import {
   CommandBarHarness,
   createCommandBarTestControls,
+  emitKeypress,
   expectSingleBackControl,
   makeDataProvider,
   makeTicker,
@@ -26,6 +27,11 @@ type MutableCommandRegistry = {
   commands: ReadonlyMap<string, CommandDef>;
 };
 
+type MutablePaneRegistry = {
+  panes: ReadonlyMap<string, unknown>;
+  paneTemplates: ReadonlyMap<string, unknown>;
+};
+
 const DEFAULT_ALERT_OPTIONS = [
   { label: "Above", value: "above" },
   { label: "Below", value: "below" },
@@ -70,6 +76,10 @@ function registerAlertCommand(
   });
 }
 
+function mutablePaneRegistryMap(map: ReadonlyMap<string, unknown>): Map<string, unknown> {
+  return map as Map<string, unknown>;
+}
+
 describe("CommandBar", () => {
   test("renders the default layout with opencode-style chrome", async () => {
     testSetup = await testRender(<CommandBarHarness query="" selectedTicker="AAPL" />, {
@@ -129,6 +139,48 @@ describe("CommandBar", () => {
     expect(testSetup.captureCharFrame()).not.toContain("Commands");
   });
 
+  test("shows one account management result when searching profile", async () => {
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
+
+    testSetup = await testRender(<CommandBarHarness
+      query="profile"
+      live
+      configurePluginRegistry={(pluginRegistry) => {
+        const registry = pluginRegistry as MutablePaneRegistry;
+        mutablePaneRegistryMap(registry.panes).set("account-management", {
+          id: "account-management",
+          name: "Account Management",
+          component: () => null,
+          defaultPosition: "right",
+          defaultMode: "floating",
+        });
+        mutablePaneRegistryMap(registry.paneTemplates).set("account-management-pane", {
+          id: "account-management-pane",
+          paneId: "account-management",
+          label: "Account Management",
+          description: "Edit your Gloom Cloud profile, password, and public portfolio sharing settings",
+          keywords: ["account", "profile", "cloud", "acm", "password", "settings"],
+          shortcut: { prefix: "ACM" },
+        });
+        pluginRegistry.createPaneFromTemplateAsyncFn = async (templateId, options) => {
+          created.push({ templateId, options });
+        };
+      }}
+    />, {
+      width: 80,
+      height: 24,
+    });
+
+    await testSetup.renderOnce();
+    const frame = await waitForFrameToContain("Account Management");
+    expect(frame).not.toMatch(/\n\s*Profile\s*(?:\n|$)/);
+    expect(frame.indexOf("Account Management")).toBeLessThan(frame.indexOf("Add Broker Account"));
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+
+    expect(created).toEqual([{ templateId: "account-management-pane", options: undefined }]);
+  });
+
   test("shows theme picker rows and commits a filtered light theme", async () => {
     testSetup = await testRender(<CommandBarHarness query="TH light" live />, {
       width: 80,

package/src/components/command-bar/workflow/ops.ts

@@ -6,11 +6,22 @@ import { formatTickerListInput } from "../../../tickers/list";
 import { updatePaneInstance, setPaneSettings } from "../../../pane-settings";
 import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
 import { cleanPortfolioPaneSettings, resolvePortfolioPaneCollectionId } from "../../../plugins/builtin/portfolio-list/settings";
+import {
+  DEFAULT_RELATIONSHIP_SECOND_SYMBOL,
+  RELATIONSHIP_GRAPH_PANE_ID,
+  buildRelationshipGraphPaneTitle,
+} from "../../../plugins/builtin/correlation/relationship/model";
 import {
   buildComparisonChartPaneTitle,
   COMPARISON_CHART_PANE_ID,
   MIN_COMPARISON_CHART_SYMBOLS,
 } from "../../../plugins/builtin/comparison-chart";
+import {
+  FUNDAMENTAL_GRAPH_PANE_ID,
+  graphKindFromSettings,
+  graphShortcutForKind,
+  graphTemplateTitle,
+} from "../../../plugins/builtin/ticker-detail/data-panes/fundamental-graph/settings";
 import { buildQuoteMonitorPaneTitle } from "../../../plugins/builtin/ticker-detail/settings";
 import { getPaneTemplateDisplayLabel } from "../pane-templates/items";
 import {
@@ -54,6 +65,30 @@ interface ApplyPaneSettingDeps extends SharedWorkflowDeps {
   persistLayout: (layout: LayoutConfig, options?: { pushHistory?: boolean }) => void;
 }
 
+function updateTickerListPane(
+  layout: LayoutConfig,
+  targetId: string,
+  options: {
+    title: string;
+    symbols: readonly string[];
+    primarySymbol?: string;
+    settings?: Record<string, unknown>;
+  },
+): LayoutConfig {
+  const symbols = [...options.symbols];
+  return updatePaneInstance(layout, targetId, (instance) => ({
+    ...instance,
+    title: options.title,
+    ...(options.primarySymbol ? { binding: { kind: "fixed", symbol: options.primarySymbol } as PaneBinding } : {}),
+    settings: {
+      ...(instance.settings ?? {}),
+      symbols,
+      symbolsText: formatTickerListInput(symbols),
+      ...(options.settings ?? {}),
+    },
+  }));
+}
+
 async function resolvePaneTemplateOptions(
   template: PaneTemplateDef,
   options: PaneTemplateCreateOptions | undefined,
@@ -180,19 +215,50 @@ export async function applyPaneSettingFieldValue(
     const rawQuery = typeof value === "string" ? value.trim() : "";
     const symbols = await resolveTickerListInput(rawQuery, null, deps);
     const primarySymbol = symbols[0]!;
-    const symbolsText = formatTickerListInput(symbols);
-
-    const nextLayout = updatePaneInstance(state.config.layout, targetId, (instance) => ({
-      ...instance,
+    const nextLayout = updateTickerListPane(state.config.layout, targetId, {
       title: buildQuoteMonitorPaneTitle(symbols),
-      binding: { kind: "fixed", symbol: primarySymbol },
-      settings: {
-        ...(instance.settings ?? {}),
-        symbol: primarySymbol,
-        symbols,
-        symbolsText,
-      },
-    }));
+      symbols,
+      primarySymbol,
+      settings: { symbol: primarySymbol },
+    });
+    deps.persistLayout(nextLayout, { pushHistory: shouldPushHistory });
+    return;
+  }
+
+  if (descriptor.pane.paneId === FUNDAMENTAL_GRAPH_PANE_ID && field.key === "symbolsText") {
+    const rawInput = typeof value === "string" ? value : "";
+    const symbols = await resolveTickerListInput(
+      rawInput,
+      descriptor.context.activeCollectionId,
+      deps,
+    );
+    const primarySymbol = symbols[0]!;
+    const chartKind = graphKindFromSettings(descriptor.context.settings, "fundamental");
+    const nextLayout = updateTickerListPane(state.config.layout, targetId, {
+      title: graphTemplateTitle(graphShortcutForKind(chartKind), symbols),
+      symbols,
+      primarySymbol,
+    });
+    deps.persistLayout(nextLayout, { pushHistory: shouldPushHistory });
+    return;
+  }
+
+  if (descriptor.pane.paneId === RELATIONSHIP_GRAPH_PANE_ID && field.key === "symbolsText") {
+    const rawInput = typeof value === "string" ? value : "";
+    const symbols = await resolveTickerListInput(
+      rawInput,
+      descriptor.context.activeCollectionId,
+      deps,
+    );
+    if (symbols.length > 2) {
+      throw new Error("Enter one or two tickers.");
+    }
+    const pair: [string, string] = [symbols[0]!, symbols[1] ?? DEFAULT_RELATIONSHIP_SECOND_SYMBOL];
+    const nextLayout = updateTickerListPane(state.config.layout, targetId, {
+      title: buildRelationshipGraphPaneTitle(pair),
+      symbols: pair,
+      primarySymbol: pair[0],
+    });
     deps.persistLayout(nextLayout, { pushHistory: shouldPushHistory });
     return;
   }
@@ -207,15 +273,10 @@ export async function applyPaneSettingFieldValue(
     if (symbols.length < MIN_COMPARISON_CHART_SYMBOLS) {
       throw new Error(`Enter at least ${MIN_COMPARISON_CHART_SYMBOLS} tickers.`);
     }
-    const nextLayout = updatePaneInstance(state.config.layout, targetId, (instance) => ({
-      ...instance,
+    const nextLayout = updateTickerListPane(state.config.layout, targetId, {
       title: buildComparisonChartPaneTitle(symbols),
-      settings: {
-        ...(instance.settings ?? {}),
-        symbols,
-        symbolsText: formatTickerListInput(symbols),
-      },
-    }));
+      symbols,
+    });
     deps.persistLayout(nextLayout, { pushHistory: shouldPushHistory });
     return;
   }

package/src/components/index.ts

@@ -25,6 +25,7 @@ export { PaneFooterScope, usePaneFooter } from "./layout/pane/footer";
 export type { PaneFooterSegment, PaneHint } from "./layout/pane/footer";
 export { useExternalLinkFooter } from "./use-external-link-footer";
 export { Button } from "./ui/button";
+export { Checkbox } from "./ui/checkbox";
 export { ConfirmDialog } from "./ui/confirm-dialog";
 export { ChoiceDialog } from "./ui/choice-dialog";
 export type { ChoiceDialogChoice } from "./ui/choice-dialog";

package/src/components/toggle-list.tsx

@@ -1,6 +1,6 @@
-import { Box, Text, useUiHost } from "../ui";
-import { TextAttributes } from "../ui";
-import { blendHex, colors } from "../theme/colors";
+import { Box, useUiHost } from "../ui";
+import { colors } from "../theme/colors";
+import { Checkbox } from "./ui/checkbox";
 import { ListView, type ListRowState, type ListViewItem } from "./ui/list-view";
 
 interface ToggleListItem {
@@ -36,23 +36,14 @@ function DesktopToggleRow({
   state,
   rowIdPrefix,
   enabled,
+  onPress,
 }: {
   item: ListViewItem;
   state: ListRowState;
   rowIdPrefix?: string;
   enabled: boolean;
+  onPress: () => void;
 }) {
-  const checkboxBorder = enabled
-    ? colors.borderFocused
-    : state.selected
-    ? colors.textMuted
-    : colors.border;
-  const textColor = state.disabled
-    ? colors.textMuted
-    : state.selected
-    ? colors.text
-    : colors.textDim;
-
   return (
     <Box
       id={rowIdPrefix ? `${rowIdPrefix}:${item.id}` : undefined}
@@ -67,48 +58,15 @@ function DesktopToggleRow({
         opacity: state.disabled ? 0.55 : 1,
       }}
     >
-      <Box
-        alignItems="center"
-        justifyContent="center"
-        backgroundColor={enabled ? colors.borderFocused : "transparent"}
-        style={{
-          width: 16,
-          height: 16,
-          minWidth: 16,
-          alignSelf: "center",
-          border: `1px solid ${checkboxBorder}`,
-          borderRadius: 4,
-          boxShadow: enabled
-            ? `inset 0 1px 0 ${blendHex(colors.borderFocused, colors.textBright, 0.28)}`
-            : `inset 0 1px 0 ${blendHex(colors.bg, colors.textBright, 0.05)}`,
-        }}
-      >
-        {enabled && (
-          <Text
-            fg={colors.bg}
-            attributes={TextAttributes.BOLD}
-            style={{ fontSize: 12, lineHeight: "14px", fontWeight: 800 }}
-          >
-            {"✓"}
-          </Text>
-        )}
-      </Box>
-      <Box minWidth={0} flexShrink={1}>
-        <Text
-          fg={textColor}
-          attributes={state.selected ? TextAttributes.BOLD : 0}
-          style={{
-            display: "block",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            fontWeight: state.selected ? 700 : 500,
-            lineHeight: "16px",
-          }}
-        >
-          {item.label}
-        </Text>
-      </Box>
+      <Checkbox
+        label={item.label}
+        checked={enabled}
+        disabled={state.disabled}
+        active={state.selected}
+        width="100%"
+        variant="desktop"
+        onChange={onPress}
+      />
     </Box>
   );
 }
@@ -161,6 +119,13 @@ export function ToggleList({
       }}
       renderRow={(item, state, index) => {
         const toggleItem = items.find((entry) => entry.id === item.id);
+        const activate = (event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+          event?.stopPropagation?.();
+          event?.preventDefault?.();
+          if (state.disabled) return;
+          onSelect?.(index);
+          onToggle?.(item.id);
+        };
         if (isDesktopWeb) {
           return (
             <DesktopToggleRow
@@ -168,33 +133,24 @@ export function ToggleList({
               state={state}
               rowIdPrefix={rowIdPrefix}
               enabled={toggleItem?.enabled === true}
+              onPress={() => activate()}
             />
           );
         }
 
-        const checked = toggleItem?.enabled ? "\u2713" : " ";
-        const activate = (event: any) => {
-          event.stopPropagation?.();
-          if (state.disabled) return;
-          onSelect?.(index);
-          onToggle?.(item.id);
-        };
         return (
           <Box
             id={rowIdPrefix ? `${rowIdPrefix}:${item.id}` : undefined}
             flexDirection="row"
             onMouseDown={activate}
           >
-            <Text fg={state.selected ? colors.selectedText : colors.textDim}>
-              {state.selected ? "\u25b8 " : "  "}
-            </Text>
-            <Text
-              fg={state.selected ? colors.text : colors.textDim}
-              attributes={state.selected ? TextAttributes.BOLD : 0}
-              onMouseDown={activate}
-            >
-              {`[${checked}] ${item.label}`}
-            </Text>
+            <Checkbox
+              label={item.label}
+              checked={toggleItem?.enabled === true}
+              disabled={state.disabled}
+              active={state.selected}
+              onChange={() => activate()}
+            />
           </Box>
         );
       }}

package/src/components/ui/button.tsx

@@ -14,6 +14,7 @@ export interface ButtonProps {
   active?: boolean;
   shortcut?: string;
   width?: number;
+  height?: number | string;
 }
 
 function resolveButtonColors(variant: ButtonVariant, active: boolean, disabled: boolean) {
@@ -45,6 +46,7 @@ export function Button({
   active = false,
   shortcut,
   width,
+  height,
 }: ButtonProps) {
   useRemoteUiNode({
     role: "button",
@@ -68,6 +70,7 @@ export function Button({
         active={active}
         shortcut={shortcut}
         width={width}
+        height={height}
       />
     );
   }
@@ -77,7 +80,7 @@ export function Button({
   return (
     <Box
       width={width}
-      height={1}
+      height={height ?? 1}
       flexDirection="row"
       backgroundColor={palette.bg}
       onMouseDown={() => {