bertui-code 1.0.0

package/README.md

@@ -0,0 +1,360 @@
+# 🎨 bertui-code
+
+**Zero-config syntax highlighting for React. Built exclusively for the BertUI ecosystem.**
+
+[![BertUI Compatible](https://img.shields.io/badge/BertUI-Compatible-10b981)](https://bertui.dev)
+[![Zero Dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)](package.json)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+The simplest way to add beautiful, functional code blocks to your BertUI applications. Dark theme by default, copy button included, zero configuration required.
+
+> ⚠️ **BertUI Compatibility Note:** bertui-code is built specifically for BertUI's build system. It uses ES modules and works with BertUI's transpiler. Some advanced JavaScript features may need workarounds in BertUI's JSX files.
+
+## ✨ Features
+
+- **Zero-config by default** - Just wrap your code
+- **Multiple themes** - Dark, light, pink + custom colors
+- **Built-in copy button** - One click to copy any code
+- **Line numbers** - Optional, beautifully aligned
+- **Inline code snippets** - Perfect for documentation
+- **20+ language support** - Auto-detection included
+- **BertUI-exclusive** - Optimized for BertUI's build system
+- **Zero dependencies** - Except React (peer dependency)
+- **Accessible** - Proper ARIA labels, keyboard navigation
+
+## 📦 Installation
+
+```bash
+bun add bertui-code
+```
+
+## 🚀 Quick Start
+
+```jsx
+import { Code, InlineCode } from 'bertui-code';
+
+// Basic usage (zero config!)
+<Code>
+  const hello = "world";
+  console.log(hello);
+</Code>
+
+// With line numbers
+<Code showLineNumbers>
+  function calculate(a, b) {
+    return a + b;
+  }
+</Code>
+
+// Inline code in paragraphs
+<p>
+  Use the <InlineCode>useState</InlineCode> hook for state management.
+</p>
+```
+
+## ⚠️ BertUI Compatibility Notes
+
+BertUI's transpiler is lightweight and fast, but has some limitations. Here are workarounds for common issues:
+
+### ✅ **DO: Use simple strings in JSX**
+```jsx
+// ✅ GOOD - Plain strings work perfectly
+<Code>
+  console.log("Hello BertUI!");
+</Code>
+
+// ✅ GOOD - Pre-defined variables
+const myCode = 'function test() {\n  return "works";\n}';
+<Code>{myCode}</Code>
+```
+
+### ❌ **AVOID: Complex template literals in JSX**
+```jsx
+// ❌ BAD - BertUI may freak out with nested backticks
+<Code>
+  {`function test() {
+    return \`template literal\`;
+  }`}
+</Code>
+
+// ✅ GOOD - Escape properly or use variables
+const code = 'function test() {\n  return `template literal`;\n}';
+<Code>{code}</Code>
+```
+
+### ✅ **Best Practice: Store code in variables**
+```jsx
+// Store complex code in variables
+const exampleCode = `function complex() {
+  const data = { key: "value" };
+  return \`Template: \${data.key}\`;
+}`;
+
+// Then use in JSX
+<Code>{exampleCode}</Code>
+```
+
+## 🎨 Themes & Colors
+
+### Built-in Themes
+
+```jsx
+// Dark (default)
+<Code theme="dark">console.log("Dark theme");</Code>
+
+// Light
+<Code theme="light">// Perfect for docs</Code>
+
+// Pink
+<Code theme="pink">// For pink lovers! 🎀</Code>
+```
+
+### Custom Colors
+
+```jsx
+<Code
+  theme="custom"
+  colors={{
+    background: '#0a0a0a',
+    text: '#00ff00',
+    header: '#1a1a1a',
+    border: '#00ff00',
+    meta: '#00ff00',
+    button: '#00ff00',
+    buttonText: '#0a0a0a',
+    success: '#00ff00'
+  }}
+>
+  // Custom hacker theme
+</Code>
+```
+
+## 📖 API Reference
+
+### `<Code />` Component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string` | **Required** | The code to display |
+| `language` | `string` | `'javascript'` | Programming language (`'auto'` for detection) |
+| `theme` | `'dark' \| 'light' \| 'pink' \| 'custom'` | `'dark'` | Color theme |
+| `colors` | `Object` | `{}` | Custom colors for `theme="custom"` |
+| `showLineNumbers` | `boolean` | `false` | Show line numbers |
+| `showCopyButton` | `boolean` | `true` | Show copy-to-clipboard button |
+| `className` | `string` | `''` | Additional CSS classes |
+
+### `<InlineCode />` Component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string` | **Required** | The inline code |
+| `theme` | `'dark' \| 'light' \| 'pink'` | `'dark'` | Color theme |
+
+### `detectLanguage(code: string): string`
+
+Utility function to detect programming language from code content.
+
+## 🌐 Language Support
+
+bertui-code supports **20+ programming languages** with auto-detection:
+
+- **Web**: JavaScript, TypeScript, JSX, HTML, CSS, JSON
+- **Backend**: Python, Ruby, PHP, Java, Go, Rust, C, C++, C#
+- **Data**: SQL, YAML, XML
+- **Shell**: Bash, Shell, PowerShell
+- **Other**: Markdown, Swift, Kotlin, Dart
+
+```jsx
+// Auto-detection
+<Code language="auto">
+  def hello():
+      print("Auto-detected as Python!")
+</Code>
+
+// Manual specification
+<Code language="rust">
+  fn main() {
+      println!("Hello Rust!");
+  }
+</Code>
+```
+
+## 🔧 Advanced Usage Examples
+
+### Documentation Page (BertUI-safe)
+```jsx
+import React from 'react';
+import { Code, InlineCode } from 'bertui-code';
+
+// Store code in variables (BertUI-safe pattern)
+const apiExample = 'function fetchData(url) {\n  return fetch(url).then(r => r.json());\n}';
+
+const errorHandling = `interface Result<T> {
+  data: T | null;
+  error: string | null;
+}
+
+async function getUser(): Promise<Result<User>> {
+  try {
+    const response = await fetch('/api/user');
+    return { data: await response.json(), error: null };
+  } catch (error) {
+    return { data: null, error: error.message };
+  }
+}`;
+
+export default function Documentation() {
+  return (
+    <article style={{ padding: '2rem' }}>
+      <h1>API Reference</h1>
+      
+      <p>
+        Import the component: <InlineCode>import {'{ Code }'} from 'bertui-code'</InlineCode>
+      </p>
+      
+      <h2>Basic Example</h2>
+      <Code showLineNumbers>
+        {apiExample}
+      </Code>
+      
+      <h2>Error Handling</h2>
+      <Code language="typescript" theme="light">
+        {errorHandling}
+      </Code>
+    </article>
+  );
+}
+```
+
+### Interactive Component (BertUI-safe)
+```jsx
+import React, { useState } from 'react';
+import { Code } from 'bertui-code';
+
+export default function InteractiveDemo() {
+  const [theme, setTheme] = useState('dark');
+  
+  // Store dynamic code in variable
+  const dynamicCode = `// Current theme: ${theme}
+const user = {
+  name: "Developer",
+  preferences: {
+    theme: "${theme}",
+    timestamp: new Date().toISOString()
+  }
+};
+
+console.log(\`Hello \${user.name}!\`);`;
+
+  return (
+    <div style={{ padding: '1rem' }}>
+      <div style={{ marginBottom: '1rem' }}>
+        <label>
+          Select Theme: 
+          <select 
+            value={theme} 
+            onChange={(e) => setTheme(e.target.value)}
+            style={{ marginLeft: '0.5rem', padding: '0.25rem' }}
+          >
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+            <option value="pink">Pink</option>
+          </select>
+        </label>
+      </div>
+      
+      <Code theme={theme} showLineNumbers>
+        {dynamicCode}
+      </Code>
+    </div>
+  );
+}
+```
+
+## 🛠️ Troubleshooting BertUI Issues
+
+### Problem: "Unexpected return" or compilation errors
+**Solution:** BertUI's transpiler sometimes struggles with:
+- Nested template literals in JSX
+- Complex string interpolation
+- Certain JavaScript syntax in JSX attributes
+
+**Workaround:**
+```jsx
+// ❌ Problematic
+<Code>
+  {`function test() {
+    return \`Complex \${expression}\`;
+  }`}
+</Code>
+
+// ✅ Solution - Use variables
+const safeCode = 'function test() {\n  return `Complex ${expression}`;\n}';
+<Code>{safeCode}</Code>
+```
+
+### Problem: Import not working
+**Solution:** Make sure:
+1. Package is installed : `bun install  bertui-code`
+2. BertUI restarted after installing 
+3. No cache issues: `rm -rf .bertui` then restart
+
+### Problem: Colors not applying
+**Solution:** Ensure custom colors object has all required properties:
+```jsx
+// Complete custom colors object
+colors={{
+  background: '#...',
+  text: '#...',
+  header: '#...',
+  border: '#...',
+  meta: '#...',
+  button: '#...',
+  buttonHover: '#...',
+  buttonText: '#...',
+  success: '#...'
+}}
+```
+
+## 📁 Project Structure
+
+```
+bertui-code/
+├── src/
+│   ├── Code.js          # Main component (BertUI-safe JS)
+│   ├── CopyButton.js    # Copy button component
+│   ├── InlineCode.js    # Inline code component
+│   └── index.js         # Main exports
+├── dist/
+│   └── index.js         # Built bundle (ES module)
+├── package.json
+└── README.md
+```
+
+## 🤝 Compatibility
+
+- **BertUI**: ✅ Fully compatible (built specifically for BertUI)
+- **React**: ✅ 18.0.0+ (peer dependency)
+- **Browsers**: ✅ Chrome, Firefox, Safari, Edge (modern)
+- **Other Frameworks**: ❌ Not compatible (BertUI-exclusive optimizations)
+
+## 📄 License
+
+MIT © Pease Ernest
+
+---
+
+<div align="center">
+  <p>
+    <strong>Part of the BertUI ecosystem</strong><br/>
+    Built with ❤️ for developers who value simplicity and beauty
+  </p>
+  
+  <p>
+    <a href="https://bertui-docswebsite.pages.dev/">BertUI Website</a> •
+    <a href="https://github.com/BunElysiaReact/bertui-code.git">GitHub</a> •
+    <a href="https://npmjs.com/package/bertui-code">npm</a>
+  </p>
+</div>
+```
+

package/dist/bertui-code.css

@@ -0,0 +1,275 @@
+/* bertui-code - Zero-config syntax highlighting for BertUI */
+
+/* Container */
+.bertui-code {
+  background: #1e1e1e;
+  border-radius: 8px;
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 1rem 0;
+  overflow: hidden;
+  color: #d4d4d4;
+}
+
+/* Header */
+.bertui-code-header {
+  background: #2d2d2d;
+  padding: 8px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #3d3d3d;
+}
+
+.bertui-code-language {
+  color: #858585;
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: lowercase;
+}
+
+/* Copy button */
+.bertui-copy-button {
+  background: #3d3d3d;
+  border: none;
+  color: #d4d4d4;
+  cursor: pointer;
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.bertui-copy-button:hover {
+  background: #4d4d4d;
+}
+
+.bertui-copy-button.copied {
+  background: #2e7d32;
+  color: white;
+}
+
+/* Code content */
+.bertui-code-content {
+  display: flex;
+  overflow-x: auto;
+  padding: 16px 0;
+}
+
+/* Line numbers */
+.bertui-line-numbers {
+  color: #858585;
+  padding: 0 16px;
+  text-align: right;
+  user-select: none;
+  border-right: 1px solid #3d3d3d;
+  min-width: 40px;
+}
+
+.bertui-line-numbers span {
+  display: block;
+}
+
+/* Code block */
+.bertui-code-pre {
+  margin: 0;
+  padding: 0 16px;
+  flex: 1;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+/* Syntax highlighting tokens (users can override) */
+.token.keyword {
+  color: #569cd6;
+  font-weight: bold;
+}
+
+.token.string {
+  color: #ce9178;
+}
+
+.token.comment {
+  color: #6a9955;
+  font-style: italic;
+}
+
+.token.function {
+  color: #dcdcaa;
+}
+
+.token.number {
+  color: #b5cea8;
+}
+
+.token.operator {
+  color: #d4d4d4;
+}
+
+.token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.class-name {
+  color: #4ec9b0;
+}
+
+.token.parameter {
+  color: #9cdcfe;
+}
+
+/* Inline code */
+.bertui-inline-code {
+  background: #2d2d2d;
+  color: #d4d4d4;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 0.9em;
+  line-height: 1.4;
+}
+
+/* Light theme variant */
+.bertui-code.light-theme,
+.bertui-code[data-theme="light"] {
+  background: #ffffff;
+  color: #374151;
+  border: 1px solid #e5e7eb;
+}
+
+.bertui-code.light-theme .bertui-code-header,
+.bertui-code[data-theme="light"] .bertui-code-header {
+  background: #f3f4f6;
+  border-bottom: 1px solid #d1d5db;
+}
+
+.bertui-code.light-theme .bertui-code-language,
+.bertui-code[data-theme="light"] .bertui-code-language {
+  color: #6b7280;
+}
+
+.bertui-code.light-theme .bertui-copy-button,
+.bertui-code[data-theme="light"] .bertui-copy-button {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+.bertui-code.light-theme .bertui-copy-button:hover,
+.bertui-code[data-theme="light"] .bertui-copy-button:hover {
+  background: #d1d5db;
+}
+
+.bertui-code.light-theme .bertui-line-numbers,
+.bertui-code[data-theme="light"] .bertui-line-numbers {
+  color: #6b7280;
+  border-right: 1px solid #d1d5db;
+}
+
+.bertui-code.light-theme .bertui-inline-code,
+.bertui-code[data-theme="light"] .bertui-inline-code {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+/* Pink theme variant */
+.bertui-code.pink-theme,
+.bertui-code[data-theme="pink"] {
+  background: #fdf2f8;
+  color: #831843;
+  border: 1px solid #fbcfe8;
+}
+
+.bertui-code.pink-theme .bertui-code-header,
+.bertui-code[data-theme="pink"] .bertui-code-header {
+  background: #fce7f3;
+  border-bottom: 1px solid #f9a8d4;
+}
+
+.bertui-code.pink-theme .bertui-code-language,
+.bertui-code[data-theme="pink"] .bertui-code-language {
+  color: #be185d;
+}
+
+.bertui-code.pink-theme .bertui-copy-button,
+.bertui-code[data-theme="pink"] .bertui-copy-button {
+  background: #f472b6;
+  color: white;
+}
+
+.bertui-code.pink-theme .bertui-copy-button:hover,
+.bertui-code[data-theme="pink"] .bertui-copy-button:hover {
+  background: #ec4899;
+}
+
+.bertui-code.pink-theme .bertui-line-numbers,
+.bertui-code[data-theme="pink"] .bertui-line-numbers {
+  color: #db2777;
+  border-right: 1px solid #f9a8d4;
+}
+
+.bertui-code.pink-theme .bertui-inline-code,
+.bertui-code[data-theme="pink"] .bertui-inline-code {
+  background: #fce7f3;
+  color: #831843;
+}
+
+/* Light theme syntax */
+.bertui-code.light-theme .token.keyword,
+.bertui-code[data-theme="light"] .token.keyword {
+  color: #059669;
+}
+
+.bertui-code.light-theme .token.string,
+.bertui-code[data-theme="light"] .token.string {
+  color: #dc2626;
+}
+
+.bertui-code.light-theme .token.comment,
+.bertui-code[data-theme="light"] .token.comment {
+  color: #6b7280;
+}
+
+/* Pink theme syntax */
+.bertui-code.pink-theme .token.keyword,
+.bertui-code[data-theme="pink"] .token.keyword {
+  color: #db2777;
+}
+
+.bertui-code.pink-theme .token.string,
+.bertui-code[data-theme="pink"] .token.string {
+  color: #ea580c;
+}
+
+.bertui-code.pink-theme .token.comment,
+.bertui-code[data-theme="pink"] .token.comment {
+  color: #a855f7;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 640px) {
+  .bertui-code {
+    font-size: 13px;
+    border-radius: 6px;
+  }
+  
+  .bertui-code-content {
+    padding: 12px 0;
+  }
+  
+  .bertui-code-header {
+    padding: 6px 12px;
+  }
+  
+  .bertui-line-numbers {
+    padding: 0 12px;
+    min-width: 36px;
+  }
+  
+  .bertui-code-pre {
+    padding: 0 12px;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * CSS module declaration for bertui-code styles
+ */
+
+declare module 'bertui-code/bertui-code.css' {
+  const styles: {
+    /** bertui-code container class */
+    readonly 'bertui-code': string;
+    /** Code block header */
+    readonly 'bertui-code-header': string;
+    /** Language label */
+    readonly 'bertui-code-language': string;
+    /** Copy button */
+    readonly 'bertui-copy-button': string;
+    /** Copy button copied state */
+    readonly 'copied': string;
+    /** Code content wrapper */
+    readonly 'bertui-code-content': string;
+    /** Line numbers container */
+    readonly 'bertui-line-numbers': string;
+    /** Individual line number */
+    readonly 'bertui-line-number': string;
+    /** Preformatted code block */
+    readonly 'bertui-code-pre': string;
+    /** Inline code element */
+    readonly 'bertui-inline-code': string;
+    /** Syntax highlighting tokens */
+    readonly 'token': string;
+    readonly 'keyword': string;
+    readonly 'string': string;
+    readonly 'comment': string;
+    readonly 'function': string;
+    readonly 'number': string;
+    readonly 'operator': string;
+  };
+  
+  export default styles;
+}

package/dist/index.js

@@ -0,0 +1,2 @@
+import r from"react";import f,{useState as k}from"react";function e({code:t,themeColors:n={}}){let[d,o]=k(!1),u=async()=>{try{await navigator.clipboard.writeText(t),o(!0),setTimeout(()=>o(!1),2000)}catch(p){let a=document.createElement("textarea");a.value=t,a.style.position="fixed",a.style.opacity="0",document.body.appendChild(a),a.select(),document.execCommand("copy"),document.body.removeChild(a),o(!0),setTimeout(()=>o(!1),2000)}},i={background:d?n.success||"#2e7d32":n.button||"#3d3d3d",border:"none",color:n.buttonText||"#d4d4d4",cursor:"pointer",padding:"4px 12px",borderRadius:"4px",fontSize:"12px",transition:"all 0.2s"};return f.createElement("button",{onClick:u,title:d?"Copied!":"Copy code",style:i,onMouseEnter:(p)=>{if(!d)p.currentTarget.style.background=n.buttonHover||"#4d4d4d"},onMouseLeave:(p)=>{if(!d)p.currentTarget.style.background=n.button||"#3d3d3d"}},d?"✓":"\uD83D\uDCCB")}function y({children:t,language:n="javascript",showLineNumbers:d=!1,showCopyButton:o=!0,className:u="",theme:i="dark",colors:p={}}){let x=t.split(`
+`).length,c=v(i,p);return r.createElement("div",{className:`bertui-code ${u}`,style:{background:c.background,borderRadius:"8px",fontFamily:"'Menlo', 'Monaco', monospace",fontSize:"14px",margin:"1rem 0",overflow:"hidden",color:c.text}},[r.createElement("div",{key:"header",style:{background:c.header,padding:"8px 16px",display:"flex",justifyContent:"space-between",alignItems:"center",borderBottom:`1px solid ${c.border}`}},[r.createElement("span",{key:"language",style:{color:c.meta,fontSize:"12px",fontWeight:"500"}},n),o&&r.createElement(e,{key:"copy",code:t,themeColors:c})].filter(Boolean)),r.createElement("div",{key:"content",style:{display:"flex",padding:"16px 0"}},[d&&r.createElement("div",{key:"lines",style:{color:c.meta,padding:"0 16px",textAlign:"right",userSelect:"none",minWidth:"40px"}},Array.from({length:x}).map((T,b)=>r.createElement("span",{key:b,style:{display:"block",paddingRight:"8px"}},b+1))),r.createElement("pre",{key:"pre",style:{margin:0,padding:"0 16px",flex:1,overflowX:"auto"}},r.createElement("code",{className:`language-${n}`,style:{color:c.text,background:"transparent",fontFamily:"inherit"}},t))].filter(Boolean))])}function v(t,n={}){let d={dark:{background:"#1e1e1e",header:"#2d2d2d",text:"#d4d4d4",meta:"#858585",border:"#3d3d3d",button:"#3d3d3d",buttonHover:"#4d4d4d",buttonText:"#d4d4d4",success:"#2e7d32"},light:{background:"#ffffff",header:"#f3f4f6",text:"#374151",meta:"#6b7280",border:"#d1d5db",button:"#e5e7eb",buttonHover:"#d1d5db",buttonText:"#374151",success:"#10b981"},pink:{background:"#fdf2f8",header:"#fce7f3",text:"#831843",meta:"#be185d",border:"#f472b6",button:"#f472b6",buttonHover:"#ec4899",buttonText:"#ffffff",success:"#10b981"}};return{...d[t]||d.dark,...n}}function M(t){let n={javascript:/(\bconsole\.|\bfunction\b|\bconst\b|\blet\b|\bvar\b|\bimport\b|\bexport\b)/,typescript:/(:\s*\w+\s*[=;]|\binterface\b|\btype\b|\bnamespace\b)/,python:/(\bdef\b|\bclass\b|\bimport\b|\bfrom\b|\bprint\b|:\s*$)/,html:/(<!DOCTYPE|<\/?\w+[^>]*>|&[a-z]+;)/,css:/({[^}]*}|\.\w+\s*{|#\w+\s*{|\bcolor:\s*)/,rust:/(\bfn\b|\blet\b|\bmut\b|\bimpl\b|->\s*\w+)/,cpp:/(#include|std::|cout\s*<<|->\s*\w+)/,java:/(public\s+class|System\.out\.println|\bvoid\b\s+\w+\s*\()/,go:/(\bfunc\b|\bpackage\b|:=|fmt\.Println)/,php:/(<\?php|\$\w+\s*=|echo\s+)/,sql:/(\bSELECT\b|\bFROM\b|\bWHERE\b|\bJOIN\b)/,shell:/(^\s*#!|\$\w+|mkdir\s+|cd\s+)/,json:/^\s*[{[]/,yaml:/(^[\w-]+:\s|^- )/,markdown:/(^#+|^-{3,}|^\s*\[)/,xml:/(<\?xml|<\/?[\w:]+>)/,ruby:/(\bdef\b|\bend\b|\bputs\b|:\w+=>)/,swift:/(\bfunc\b|\bvar\b|\blet\b|:\s*\w+\s*{)/,kotlin:/(\bfun\b|\bval\b|\bvar\b|:\s*\w+\s*[=;])/},d=t.toLowerCase();for(let[o,u]of Object.entries(n))if(u.test(d))return o;return"plaintext"}import S from"react";function E({children:t,theme:n="dark"}){let d={dark:{background:"#2d2d2d",color:"#d4d4d4"},light:{background:"#e5e7eb",color:"#374151"},pink:{background:"#fce7f3",color:"#831843"}},o=d[n]||d.dark;return S.createElement("code",{style:{background:o.background,color:o.color,padding:"2px 6px",borderRadius:"4px",fontFamily:"'Menlo', 'Monaco', monospace",fontSize:"0.9em"}},t)}export{M as detectLanguage,E as InlineCode,y as Code};

package/package.json

@@ -0,0 +1,31 @@
+{
+"name": "bertui-code",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./bertui-code.css": {
+      "import": "./dist/bertui-code.css",
+      "types": "./dist/bertui-code.css.d.ts"
+    }
+  },
+  "files": ["dist"],
+
+  "scripts": {
+    "build": "bun build src/index.js --outdir dist --target browser --format esm --minify --external react --external fs --external path",
+    "dev": "bun build src/index.js --outdir dist --target browser --format esm --watch --external react --external fs --external path"
+  },
+
+  "keywords": ["react", "syntax-highlighting", "bertui", "code"],
+  "author": "Your Name",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0"
+  }
+}
+