# @agentlang/lstudio

The **AgentLang Studio UI** package for local mode. This package contains the built static files of the AgentLang Design Studio UI.

## Installation

You can install this package from npm:

```bash
npm install @agentlang/lstudio
```

## Usage

This package contains the static build files (HTML, CSS, JavaScript) of the Studio UI. After installation, you can:

1. **Serve the static files** using any static file server
2. **Copy the files** to your web server's public directory
3. **Use with a web server** like Express, nginx, etc.

### Example: Serving with Express

```javascript
import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
const studioPath = path.join(__dirname, 'node_modules/@agentlang/lstudio/dist');

app.use(express.static(studioPath));

app.get('*', (req, res) => {
    res.sendFile(path.join(studioPath, 'index.html'));
});

app.listen(4000, () => {
    console.log('Studio UI available at http://localhost:4000');
});
```

## Development

If you are developing this package (within the AgentLang repository):

### Building the Package

To build and package the Studio UI for publishing:

```bash
# From the studio workspace root
npm run package:lstudio
```

Or using nx directly:

```bash
nx package lstudio
```

This will:

1. Build the Studio UI in local mode
2. Copy the built files to `apps/lstudio/dist`
3. Create a `package.json` in the dist folder with publish configuration

### Publishing

After packaging, publish to npm:

```bash
cd apps/lstudio/dist
npm publish --access public
```

### Local Testing

To test the package locally before publishing, you can use `npm link`:

**Step 1: Build and Link Locally**

```bash
# Build the package
npm run package:lstudio

# Link the package globally
cd apps/lstudio/dist
npm link
```

**Step 2: Link in Target Project**

Navigate to your test project and link the package:

```bash
cd /path/to/your/test-project
npm link @agentlang/lstudio
```

## Package Contents

The published package includes:

- `index.html` - Main HTML file
- `assets/` - JavaScript, CSS, and image assets
- `fonts/` - Font files
- `package.json` - Package metadata

## Version

Current version: `0.0.1`

## License

MIT
