Release 0.5.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notios",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "description": "",
   "keywords": [
@@ -40,13 +40,13 @@
     "commander": "^12.1.0",
     "cross-spawn": "7.0.3",
     "ink": "^5.0.1",
-    "ink-divider": "3.0.0",
     "node-ipc": "10.1.0",
     "npm-run-all": "4.1.5",
     "pidtree": "^0.5.0",
     "react": "^18.3.1",
     "source-map-support": "^0.5.21",
     "string-length": "^5.0.1",
+    "string-width": "^7.2.0",
     "wcwidth": "^1.0.1",
     "xdg-portable": "10.6.0"
   },

src/components/full_divider.tsx

@@ -1,26 +1,38 @@
 import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import BoxWithSize from './box_with_size';
+import { Box, Text } from 'ink';
+import stringWidth from 'string-width';
 
-export interface FullDividerProps {
-  title?: string;
-  dividerChar?: string;
-  dividerColor?: string;
-}
-const FullDivider: FC<FullDividerProps> = ({ title, dividerChar, dividerColor }) => {
-  const [Divider, setDivider] = useState<FC<any>>();
-
-  useEffect(() => {
-    import('ink-divider').then(setDivider);
-  }, []);
+const paddingChar = ' ';
 
+const FullDivider: FC<{ title?: string; dividerChar?: string; dividerColor?: string }> = ({
+  title,
+  dividerChar = '-',
+  dividerColor,
+}) => {
   return (
     <BoxWithSize>
-      {({ width }) =>
-        Divider && (
-          <Divider title={title} dividerChar={dividerChar} dividerColor={dividerColor} width={Math.max(width - 5, 1)} />
-        )
-      }
+      {(size) => {
+        const width = Math.max(size.width - 5, 1);
+        const titleString = title ? `${paddingChar}${title}${paddingChar}` : '';
+        const titleWidth = stringWidth(titleString);
+        const dividerWidth = (width - titleWidth) / 2;
+        const numberOfCharsPerSide = dividerWidth / stringWidth(dividerChar);
+        const dividerSideString = dividerChar.repeat(numberOfCharsPerSide);
+
+        return (
+          <Box flexDirection="row">
+            <Text>
+              {paddingChar}
+              <Text color={dividerColor}>{dividerSideString}</Text>
+              <Text color="#fff">{titleString}</Text>
+              <Text color={dividerColor}>{dividerSideString}</Text>
+              {paddingChar}
+            </Text>
+          </Box>
+        );
+      }}
     </BoxWithSize>
   );
 };

src/global.d.ts

@@ -1,2 +1 @@
-declare module 'ink-divider';
 declare module 'npm-run-all/*';