notjs-react 0.3.3 → 0.3.6

package/README.md

@@ -58,6 +58,7 @@ function App() {
 | `initialDarkMode` | `boolean` | `true` | Enable dark mode by default |
 | `initialCode` | `string` | (language default) | Custom starting code |
 | `hideHeader` | `boolean` | `false` | Hide header for embedding |
+| `editorWidthPercent` | `number` | `50` | Initial editor width as percentage (20-80) |
 
 ## Features
 
@@ -144,6 +145,53 @@ int main() {
 />
 ```
 
+## Troubleshooting
+
+### CSS Styling Issues in Frameworks (Astro, Next.js, etc.)
+
+Although NotJS includes self-contained CSS, some frameworks may experience styling issues due to **CSS purging/tree-shaking**. The terminal styles (xterm.js) are added dynamically at runtime, so build tools may incorrectly remove them as "unused."
+
+#### Symptoms
+- Terminal appears with white/blank background
+- Terminal resizing doesn't work
+- Missing terminal UI elements
+
+#### Solution: Wrapper Component (Recommended)
+
+Create a wrapper component with explicit dimensions and **always import the CSS in the wrapper**:
+
+```tsx
+// components/NotJSWrapper.tsx
+import { NotJS } from 'notjs-react'
+import 'notjs-react/styles.css'  // Critical: Import styles here
+
+export function NotJSWrapper({ width = '100%', height = '600px', ...props }) {
+  return (
+    <div style={{ width, height }}>
+      <NotJS {...props} />
+    </div>
+  )
+}
+```
+
+Then use the wrapper in your MDX/pages:
+
+```mdx
+import { NotJSWrapper } from '@/components/NotJSWrapper'
+
+# My Blog Post
+
+<NotJSWrapper
+  width="100%"
+  height="500px"
+  apiBaseUrl="https://your-api.com/api"
+  websocketUrl="wss://your-api.com/terminal"
+  initialLanguage="java"
+/>
+```
+
+**Important**: The CSS import (`import 'notjs-react/styles.css'`) must be in the wrapper component file, not just in your page/MDX file. This ensures the styles are properly bundled and not purged by the build process.
+
 ## Development
 
 To develop the library locally:
@@ -215,6 +263,11 @@ The `NotJS` component accepts the following props:
 - Default: `false`
 - Description: Hide the header (language selector, version, theme toggle) for embedded views
 
+#### `editorWidthPercent` (optional)
+- Type: `number`
+- Default: `50`
+- Description: Initial width of the editor panel as a percentage (constrained between 20-80). The console panel takes the remaining space. Users can still manually resize using the drag handle.
+
 ## Architecture
 
 The NotJS component architecture:

package/dist/NotJS.d.ts

@@ -12,6 +12,7 @@ export interface NotJSProps {
     initialVersion?: string;
     initialDarkMode?: boolean;
     hideHeader?: boolean;
+    editorWidthPercent?: number;
 }
-export default function NotJS({ websocketUrl, apiBaseUrl, initialCode, initialLanguage, initialVersion, initialDarkMode, hideHeader }: NotJSProps): import("react/jsx-runtime").JSX.Element;
+export default function NotJS({ websocketUrl, apiBaseUrl, initialCode, initialLanguage, initialVersion, initialDarkMode, hideHeader, editorWidthPercent }: NotJSProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NotJS.d.ts.map

package/dist/NotJS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotJS.d.ts","sourceRoot":"","sources":["../src/NotJS.tsx"],"names":[],"mappings":"AAGA,OAAO,4BAA4B,CAAA;AAgGnC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,SAAS,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,YAA6C,EAC7C,UAAwC,EACxC,WAAW,EACX,eAAwB,EACxB,cAAqB,EACrB,eAAsB,EACtB,UAAkB,EACnB,EAAE,UAAU,2CAqpBZ"}
+{"version":3,"file":"NotJS.d.ts","sourceRoot":"","sources":["../src/NotJS.tsx"],"names":[],"mappings":"AAGA,OAAO,4BAA4B,CAAA;AAgGnC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,SAAS,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,YAA6C,EAC7C,UAAwC,EACxC,WAAW,EACX,eAAwB,EACxB,cAAqB,EACrB,eAAsB,EACtB,UAAkB,EAClB,kBAAuB,EACxB,EAAE,UAAU,2CAqpBZ"}