gloomberb 0.5.1 → 0.6.0

package/src/components/markdown-editor.tsx

@@ -1,6 +1,7 @@
+import { Textarea, useSyntaxStyleFactory } from "../ui";
+import { type SyntaxStyleLike } from "../ui";
 import { useRef, useEffect, useCallback } from "react";
-import { SyntaxStyle, RGBA } from "@opentui/core";
-import type { TextareaRenderable, Highlight } from "@opentui/core";
+import { type Highlight, type TextareaRenderable } from "../ui";
 import { colors } from "../theme/colors";
 
 interface LinePattern {
@@ -24,21 +25,25 @@ const LINE_PATTERNS: LinePattern[] = [
   { regex: /^(\s*[-*]|\s*\d+\.)\s/, styleId: "md.list" },
 ];
 
-function createMarkdownStyle(): { style: SyntaxStyle; ids: Record<string, number> } {
-  const style = SyntaxStyle.create();
+function createMarkdownStyle(
+  createSyntaxStyle: () => SyntaxStyleLike | null,
+  colorFromHex: (hex: string) => unknown,
+): { style: SyntaxStyleLike; ids: Record<string, number> } | null {
+  const style = createSyntaxStyle();
+  if (!style) return null;
   const ids: Record<string, number> = {};
   ids["md.heading"] = style.registerStyle("md.heading", {
-    fg: RGBA.fromHex(colors.borderFocused),
+    fg: colorFromHex(colors.borderFocused),
     bold: true,
   });
   ids["md.bold"] = style.registerStyle("md.bold", { bold: true });
   ids["md.italic"] = style.registerStyle("md.italic", { italic: true });
   ids["md.strikethrough"] = style.registerStyle("md.strikethrough", { dim: true });
   ids["md.code"] = style.registerStyle("md.code", {
-    fg: RGBA.fromHex(colors.textDim),
+    fg: colorFromHex(colors.textDim),
   });
   ids["md.list"] = style.registerStyle("md.list", {
-    fg: RGBA.fromHex(colors.borderFocused),
+    fg: colorFromHex(colors.borderFocused),
     bold: true,
   });
   return { style, ids };
@@ -73,6 +78,7 @@ export interface MarkdownEditorProps {
   initialValue?: string;
   placeholder?: string;
   onRef?: (ref: TextareaRenderable | null) => void;
+  onChange?: (value: string) => void;
 }
 
 export function MarkdownEditor({
@@ -81,9 +87,11 @@ export function MarkdownEditor({
   initialValue = "",
   placeholder = "Write notes...",
   onRef,
+  onChange,
 }: MarkdownEditorProps) {
+  const syntaxFactory = useSyntaxStyleFactory();
   const textareaRef = useRef<TextareaRenderable>(null);
-  const styleRef = useRef<{ style: SyntaxStyle; ids: Record<string, number> } | null>(null);
+  const styleRef = useRef<{ style: SyntaxStyleLike; ids: Record<string, number> } | null>(null);
 
   const applyHighlights = useCallback(() => {
     const ta = textareaRef.current;
@@ -92,10 +100,10 @@ export function MarkdownEditor({
     const lines = text.split("\n");
     const { ids } = styleRef.current;
     for (let i = 0; i < lines.length; i++) {
-      ta.clearLineHighlights(i);
+      ta.clearLineHighlights?.(i);
       const lineHls = computeLineHighlights(lines[i]!, ids);
       for (const hl of lineHls) {
-        ta.addHighlight(i, hl);
+        ta.addHighlight?.(i, hl);
       }
     }
   }, []);
@@ -103,15 +111,19 @@ export function MarkdownEditor({
   useEffect(() => {
     const ta = textareaRef.current;
     if (!ta) return;
-    const created = createMarkdownStyle();
+    const created = createMarkdownStyle(syntaxFactory.createSyntaxStyle, syntaxFactory.colorFromHex);
+    if (!created) return;
     styleRef.current = created;
     ta.syntaxStyle = created.style;
     applyHighlights();
-    ta.onContentChange = () => applyHighlights();
+    ta.onContentChange = () => {
+      applyHighlights();
+      onChange?.(ta.editBuffer.getText());
+    };
     return () => {
       if (ta) ta.onContentChange = undefined;
     };
-  }, [textareaKey, applyHighlights]);
+  }, [textareaKey, applyHighlights, onChange, syntaxFactory]);
 
   useEffect(() => {
     onRef?.(textareaRef.current);
@@ -119,7 +131,7 @@ export function MarkdownEditor({
   }, [textareaKey, onRef]);
 
   return (
-    <textarea
+    <Textarea
       key={textareaKey}
       ref={textareaRef}
       initialValue={initialValue}
@@ -129,7 +141,10 @@ export function MarkdownEditor({
       placeholderColor={colors.textDim}
       backgroundColor={focused ? colors.panel : colors.bg}
       flexGrow={1}
+      height="100%"
+      width="100%"
       wrapText
+      onInput={onChange}
     />
   );
 }

package/src/components/markdown-text.tsx

@@ -1,5 +1,6 @@
+import { Box, Span, Text } from "../ui";
 import { useState } from "react";
-import { TextAttributes } from "@opentui/core";
+import { TextAttributes } from "../ui";
 import { TickerBadge } from "./ticker-badge";
 import { tokenizeTickerText } from "../utils/ticker-tokenizer";
 import type { InlineTickerCatalogEntry } from "../state/use-inline-tickers";
@@ -7,10 +8,10 @@ import { colors } from "../theme/colors";
 
 export interface MarkdownTextProps {
   text: string;
-  lineWidth: number;
-  catalog: Record<string, InlineTickerCatalogEntry>;
-  textColor: string;
-  openTicker: (symbol: string) => void;
+  lineWidth?: number;
+  catalog?: Record<string, InlineTickerCatalogEntry>;
+  textColor?: string;
+  openTicker?: (symbol: string) => void;
 }
 
 interface StyledSegment {
@@ -88,19 +89,19 @@ function parseLine(line: string): ParsedLine {
 
 function SegmentSpan({ segment }: { segment: StyledSegment }) {
   if (segment.code) {
-    return <span fg={colors.textDim}>{segment.text}</span>;
+    return <Span fg={colors.textDim}>{segment.text}</Span>;
   }
   const attrs =
     (segment.bold ? TextAttributes.BOLD : 0) |
     (segment.italic ? TextAttributes.ITALIC : 0) |
     (segment.dim ? TextAttributes.DIM : 0);
   return (
-    <span
+    <Span
       fg={segment.color ?? undefined}
       attributes={attrs || undefined}
     >
       {segment.text}
-    </span>
+    </Span>
   );
 }
 
@@ -114,7 +115,7 @@ function MarkdownLine({
   onHover,
 }: {
   parsed: ParsedLine;
-  lineWidth: number;
+  lineWidth?: number;
   catalog: Record<string, InlineTickerCatalogEntry>;
   textColor: string;
   openTicker: (symbol: string) => void;
@@ -132,37 +133,37 @@ function MarkdownLine({
   if (!hasTickers) {
     // Simple case: no tickers, render as styled text
     return (
-      <text fg={textColor}>
+      <Text fg={textColor}>
         {indentStr}
         {parsed.segments.map((segment, i) => (
           <SegmentSpan key={i} segment={segment} />
         ))}
-      </text>
+      </Text>
     );
   }
 
   // Complex case: need to handle tickers within styled segments
   // Render as a flex row to allow badge elements
   return (
-    <box flexDirection="row" flexWrap="wrap" width={lineWidth}>
-      {indentStr ? <text fg={textColor}>{indentStr}</text> : null}
+    <Box flexDirection="row" flexWrap="wrap" {...(lineWidth != null ? { width: lineWidth } : {})}>
+      {indentStr ? <Text fg={textColor}>{indentStr}</Text> : null}
       {parsed.segments.map((segment, segIdx) => {
         const tokens = tokenizeTickerText(segment.text);
         return tokens.map((token, tokIdx) => {
           if (token.kind === "text") {
             if (!token.value) return null;
             return (
-              <text key={`${segIdx}:${tokIdx}`} fg={textColor}>
+              <Text key={`${segIdx}:${tokIdx}`} fg={textColor}>
                 <SegmentSpan segment={{ ...segment, text: token.value }} />
-              </text>
+              </Text>
             );
           }
           const entry = catalog[token.symbol];
           if (!entry || entry.status === "missing") {
             return (
-              <text key={`${segIdx}:${tokIdx}`} fg={textColor}>
+              <Text key={`${segIdx}:${tokIdx}`} fg={textColor}>
                 <SegmentSpan segment={{ ...segment, text: token.value }} />
-              </text>
+              </Text>
             );
           }
           return (
@@ -179,25 +180,25 @@ function MarkdownLine({
           );
         });
       })}
-    </box>
+    </Box>
   );
 }
 
 export function MarkdownText({
   text,
   lineWidth,
-  catalog,
-  textColor,
-  openTicker,
+  catalog = {},
+  textColor = colors.text,
+  openTicker = () => {},
 }: MarkdownTextProps) {
   const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
   const lines = text.split("\n");
 
   return (
-    <box flexDirection="column" width={lineWidth}>
+    <Box flexDirection="column" {...(lineWidth != null ? { width: lineWidth } : {})}>
       {lines.map((line, index) => {
         if (line.trim() === "") {
-          return <text key={index}>{" "}</text>;
+          return <Text key={index}>{" "}</Text>;
         }
         const parsed = parseLine(line);
         return (
@@ -213,6 +214,6 @@ export function MarkdownText({
           />
         );
       })}
-    </box>
+    </Box>
   );
 }

package/src/components/onboarding/onboarding-wizard.test.tsx

@@ -3,7 +3,7 @@ import { mkdtemp, rm } from "fs/promises";
 import { tmpdir } from "os";
 import { join } from "path";
 import { act } from "react";
-import { testRender } from "@opentui/react/test-utils";
+import { testRender } from "../../renderers/opentui/test-utils";
 import { OnboardingWizard } from "./onboarding-wizard";
 import { createDefaultConfig, type AppConfig } from "../../types/config";
 import type { BrokerAdapter } from "../../types/broker";
@@ -166,10 +166,14 @@ describe("OnboardingWizard", () => {
     } as unknown as PluginRegistry;
 
     let completedConfig: AppConfig | null = null;
+    const config = {
+      ...createDefaultConfig(tempDataDir),
+      disabledPlugins: ["demo-plugin"],
+    };
 
     testSetup = await testRender(
       <OnboardingWizard
-        config={createDefaultConfig(tempDataDir)}
+        config={config}
         pluginRegistry={pluginRegistry}
         onComplete={(nextConfig) => {
           completedConfig = nextConfig;
@@ -216,7 +220,7 @@ describe("OnboardingWizard", () => {
     }
 
     frame = testSetup.captureCharFrame();
-    expect(frame).toContain("Select plugins to enable");
+    expect(frame).toContain("After launch shortcuts");
 
     for (let index = 0; index < 3 && !frame.includes("Imported 1 position"); index += 1) {
       await emitKeypress(testSetup, { name: "return", sequence: "\r" });
@@ -241,6 +245,7 @@ describe("OnboardingWizard", () => {
       throw new Error("Onboarding did not complete.");
     }
     const finalConfig: AppConfig = completedConfig;
+    expect(finalConfig.disabledPlugins).toEqual([]);
     expect(finalConfig.portfolios.some((portfolio) => portfolio.id === "broker:demo-demo-broker:ACC-1")).toBe(true);
     expect(finalConfig.layout.instances.find((instance) => instance.paneId === "portfolio-list")?.params?.collectionId)
       .toBe("broker:demo-demo-broker:ACC-1");