@cueloop/client 0.1.0-alpha.33 → 0.1.0-alpha.34

package/src/components/SettingsRows.tsx

@@ -29,7 +29,11 @@ function RowShell({ label, isActive, onPress, theme, children }: RowShellProps):
   const tokens = useComponentTheme(theme);
   return (
     <box
-      style={{ flexDirection: "row", height: 1, backgroundColor: isActive ? tokens.border : undefined }}
+      style={{
+        flexDirection: "row",
+        height: 1,
+        backgroundColor: isActive ? tokens.border : undefined,
+      }}
       onMouseUp={onPress}
     >
       <box style={{ width: 26, paddingLeft: 1 }}>
@@ -48,7 +52,13 @@ export interface ToggleRowProps {
   theme?: Theme;
 }
 
-export function ToggleRow({ label, value, isActive, onPress, theme }: ToggleRowProps): React.ReactNode {
+export function ToggleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: ToggleRowProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   return (
     <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
@@ -65,7 +75,13 @@ export interface CycleRowProps {
   theme?: Theme;
 }
 
-export function CycleRow({ label, value, isActive, onPress, theme }: CycleRowProps): React.ReactNode {
+export function CycleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: CycleRowProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   return (
     <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>

package/src/components/Toast.tsx

@@ -15,8 +15,23 @@ export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
   const { width: terminalWidth } = useTerminalDimensions();
   const width = Math.min(terminalWidth - 6, Math.max(28, body.length + 4));
   return (
-    <Dialog isOpen title={title ? ` ${title} ` : undefined} width={width} height={6} theme={theme}>
-      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1 }}>
+    <Dialog
+      isOpen
+      title={title ? ` ${title} ` : undefined}
+      width={width}
+      height={6}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
         <text fg={tokens.text}>{body}</text>
         <box style={{ flexGrow: 1 }} />
         <box style={{ flexDirection: "row" }}>

package/src/components/WalkWizard.stories.tsx

@@ -23,7 +23,12 @@ const FILES: WalkFile[] = [
     removed: 0,
     preview: [{ sign: "+", text: "export function firstUnviewedIndex(files, viewed) {" }],
   },
-  { path: "packages/schema/src/types.ts", added: 3, removed: 0, preview: [{ sign: "+", text: "viewedPaths?: string[];" }] },
+  {
+    path: "packages/schema/src/types.ts",
+    added: 3,
+    removed: 0,
+    preview: [{ sign: "+", text: "viewedPaths?: string[];" }],
+  },
 ];
 
 const noop = (): void => {};
@@ -40,7 +45,13 @@ export const FirstFile: Story = {
     />
   ),
   // the main card wears the accent border; stats carry the +/- colors
-  expectedColors: [DARK.accent, DARK.green, DARK.red, DARK.insertedForeground, DARK.deletedForeground],
+  expectedColors: [
+    DARK.accent,
+    DARK.green,
+    DARK.red,
+    DARK.insertedForeground,
+    DARK.deletedForeground,
+  ],
 };
 
 export const WithAgentNote: Story = {

package/src/components/WalkWizard.tsx

@@ -106,9 +106,11 @@ export function WalkWizard({
               <text fg={tokens.text}>{currentFile.path}</text>
               <text>
                 <span fg={tokens.green}>{`+${currentFile.added}`}</span>
-                <span fg={tokens.textDim}>{" "}</span>
+                <span fg={tokens.textDim}> </span>
                 <span fg={tokens.red}>{`-${currentFile.removed}`}</span>
-                <span fg={tokens.textDim}>{viewedPaths.has(currentFile.path) ? " · viewed" : ""}</span>
+                <span fg={tokens.textDim}>
+                  {viewedPaths.has(currentFile.path) ? " · viewed" : ""}
+                </span>
               </text>
               <box style={{ height: 1 }} />
               {currentFile.preview.length === 0 ? (
@@ -118,7 +120,11 @@ export function WalkWizard({
                   <text
                     key={previewIndex}
                     style={{ wrapMode: "none" }}
-                    fg={previewLine.sign === "+" ? tokens.insertedForeground : tokens.deletedForeground}
+                    fg={
+                      previewLine.sign === "+"
+                        ? tokens.insertedForeground
+                        : tokens.deletedForeground
+                    }
                   >
                     {previewLine.sign + previewLine.text}
                   </text>