Skip to content

Commit fc71244

Browse files
serafimcloudserafimcloud
committed
release: 0.5.1
- Renamed all components from `StagewiseToolbar` to `TwentyFirstToolbar` for consistency with 21st.dev branding - Updated all user-facing messages and documentation to use "21st.dev Extension" and "21st.dev Toolbar" instead of "stagewise" - Maintained backward compatibility for existing integrations - Added runtime error tracking and display in chat context - Added new success state with visual feedback for completed actions - Enhanced CMD + . hotkey to open inspector even when text input has started - Added ability to remove attached elements, components, and errors using Backspace when input is empty - New loading states fix
1 parent e1174b8 commit fc71244

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+1264
-331
lines changed

‎ARCHITECTURE.md‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Архитектура проекта stagewise
1+
# 21st Extension Architecture
22

3-
stagewise - это браузерная toolbar, которая соединяет frontend UI с AI агентами в редакторах кода. Проект обеспечивает визуальное взаимодействие с кодом через веб-интерфейс.
3+
21st Extension is a browser toolbar that connects frontend UI with AI agents in code editors. The project provides visual code interaction through a web interface.
44

5-
## Обзор системы
5+
## System Overview
66

7-
Система состоит из нескольких основных компонентов, взаимодействующих друг с другом:
7+
The system consists of several main components interacting with each other:
88

99
```
1010
┌─────────────────┐ WebSocket/HTTP ┌─────────────────┐
@@ -20,48 +20,48 @@ stagewise - это браузерная toolbar, которая соединяе
2020
└─────────────────┘ └─────────────────┘
2121
```
2222

23-
## Структура monorepo
23+
## Monorepo Structure
2424

25-
Проект организован как monorepo с использованием:
26-
- **pnpm workspaces** - управление зависимостями
27-
- **Turbo** - система сборки и кэширования
28-
- **TypeScript** - основной язык разработки
25+
The project is organized as a monorepo using:
26+
- **pnpm workspaces** - dependency management
27+
- **Turbo** - build system and caching
28+
- **TypeScript** - primary development language
2929

30-
### Основные директории
30+
### Main Directories
3131

3232
```
3333
21st-extension/
34-
├── apps/ # Приложения
35-
│ └── vscode-extension/ # VSCode/Cursor расширение
36-
├── packages/ # Общие пакеты
37-
│ ├── srpc/ # Simple RPC система
38-
│ ├── extension-toolbar-srpc-contract/ # Контракт коммуникации
39-
│ ├── ui/ # UI компоненты
40-
│ └── typescript-config/ # Конфигурации TypeScript
41-
├── toolbar/ # Браузерная toolbar
42-
│ ├── core/ # Основная логика toolbar
43-
│ ├── react/ # React интеграция
44-
│ ├── vue/ # Vue интеграция
45-
│ └── next/ # Next.js интеграция
46-
├── plugins/ # Плагины для фреймворков
47-
│ ├── react/ # React плагин
48-
│ ├── vue/ # Vue плагин
49-
│ └── angular/ # Angular плагин
50-
└── examples/ # Примеры использования
34+
├── apps/ # Applications
35+
│ └── vscode-extension/ # VSCode/Cursor extension
36+
├── packages/ # Shared packages
37+
│ ├── srpc/ # Simple RPC system
38+
│ ├── extension-toolbar-srpc-contract/ # Communication contract
39+
│ ├── ui/ # UI components
40+
│ └── typescript-config/ # TypeScript configurations
41+
├── toolbar/ # Browser toolbar
42+
│ ├── core/ # Core toolbar logic
43+
│ ├── react/ # React integration
44+
│ ├── vue/ # Vue integration
45+
│ └── next/ # Next.js integration
46+
├── plugins/ # Framework plugins
47+
│ ├── react/ # React plugin
48+
│ ├── vue/ # Vue plugin
49+
│ └── angular/ # Angular plugin
50+
└── examples/ # Usage examples
5151
```
5252

53-
## Компоненты системы
53+
## System Components
5454

5555
### 1. VSCode Extension (`apps/vscode-extension/`)
5656

57-
**Назначение**: Расширение для редакторов кода (VSCode, Cursor, Windsurf), которое обеспечивает связь между toolbar и AI агентами.
57+
**Purpose**: Extension for code editors (VSCode, Cursor, Windsurf) that provides the connection between toolbar and AI agents.
5858

59-
**Ключевые возможности**:
60-
- Запуск HTTP/WebSocket сервера для коммуникации с toolbar
61-
- Интеграция с AI агентами через MCP (Model Context Protocol)
62-
- Автоматическая настройка toolbar в проекте
63-
- Обнаружение и переключение между окнами редактора
64-
- Телеметрия и аналитика
59+
**Key Features**:
60+
- Launch HTTP/WebSocket server for toolbar communication
61+
- AI agent integration through MCP (Model Context Protocol)
62+
- Automatic toolbar setup in projects
63+
- Editor window discovery and switching
64+
- Telemetry and analytics
6565

6666
**Архитектура**:
6767
```

‎CONTRIBUTING.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
# Contributing to Stagewise
1+
# Contributing to 21st.dev Extension
22

3-
Welcome! This document provides an in-depth overview of the structure and architecture of the Stagewise project. Understanding this layout will help you quickly find your way around the codebase and identify where to contribute.
3+
Welcome! This document provides an in-depth overview of the structure and architecture of the 21st.dev Extension project. Understanding this layout will help you quickly find your way around the codebase and identify where to contribute.
44

55
---
66

77
## Project Structure & Architecture
88

9-
Stagewise is organized as a **monorepo** using [pnpm workspaces](https://pnpm.io/workspaces) and [turborepo](https://turbo.build/). The repository is divided into several key areas:
9+
21st.dev Extension is organized as a **monorepo** using [pnpm workspaces](https://pnpm.io/workspaces) and [turborepo](https://turbo.build/). The repository is divided into several key areas:
1010

1111
### 1. Applications (`apps/`)
1212

@@ -17,7 +17,7 @@ Stagewise is organized as a **monorepo** using [pnpm workspaces](https://pnpm.io
1717
* **vscode-extension/**
1818

1919
* The official VSCode (and Cursor) extension.
20-
* Integrates the Stagewise toolbar with code editors, enabling communication between the browser and your local AI agent.
20+
* Integrates the 21st.dev Toolbar with code editors, enabling communication between the browser and your local AI agent.
2121
* Contains extension source code, packaging scripts, and related assets.
2222

2323
### 2. Packages (`packages/`)
@@ -29,11 +29,11 @@ Stagewise is organized as a **monorepo** using [pnpm workspaces](https://pnpm.io
2929
* The fundamental browser toolbar package, providing the core UI and logic for DOM element selection, prompt sending, and plugin support.
3030
* Contains the main React components, hooks, utilities, and configuration for the toolbar's core functionality.
3131
* **next/** (`@toolbar/next`)
32-
* The specific package for integrating the Stagewise toolbar with Next.js applications.
32+
* The specific package for integrating the 21st.dev Toolbar with Next.js applications.
3333
* **vue/** (`@toolbar/vue`)
34-
* The specific package for integrating the Stagewise toolbar with Vue.js applications.
34+
* The specific package for integrating the 21st.dev Toolbar with Vue.js applications.
3535
* **react/** (`@toolbar/react`)
36-
* The specific package for integrating the Stagewise toolbar with React applications (outside of Next.js, or for generic React usage).
36+
* The specific package for integrating the 21st.dev Toolbar with React applications (outside of Next.js, or for generic React usage).
3737
* **ui/**
3838

3939
* Shared React component library.
@@ -58,7 +58,7 @@ Stagewise is organized as a **monorepo** using [pnpm workspaces](https://pnpm.io
5858
* **next-example/** (Next.js)
5959
* **svelte-kit-example/** (SvelteKit)
6060
* **nuxt-example/** (Nuxt)
61-
* These serve as reference implementations for integrating the Stagewise toolbar into different frontend stacks.
61+
* These serve as reference implementations for integrating the 21st.dev Toolbar into different frontend stacks.
6262

6363
### 4. Playgrounds (`playgrounds/`)
6464

‎CONTRIBUTORS.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Day-One Contributors
44

5-
Without these guys, stagewise wouldn't be here. Huge props to:
5+
Without these guys, 21st.dev Extension wouldn't be here. Huge props to:
66

77

88
| <center><img src="https://github.com/juliangoetze.png?size=80" /></center><br/><center>[Julian Götze](https://github.com/juliangoetze)</center> | <center><img src="https://github.com/xn1cklas.png?size=80" /></center><br/><center>[Nicklas Scharpff](https://github.com/xn1cklas)</center> | <center><img src="https://github.com/glenntws.png?size=80" /></center><br/><center>[Glenn Töws](https://github.com/glenntws)</center> |

‎README.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ setupStagewise();
8484
8585
### Framework-specific integration examples
8686

87-
For easier integration, we provide framework-specific NPM packages that come with dedicated toolbar components (e.g., `<StagewiseToolbar>`). You can usually import these from `@21st-extension/toolbar-[framework-name]`.
87+
For easier integration, we provide framework-specific NPM packages that come with dedicated toolbar components (e.g., `<TwentyFirstToolbar>`). You can usually import these from `@21st-extension/toolbar-[framework-name]`.
8888

8989
<details>
9090
<summary>React.js</summary>
@@ -96,7 +96,7 @@ We provide the `@21st-extension/toolbar-react` package for React projects. Initi
9696
import { StrictMode } from 'react';
9797
import { createRoot } from 'react-dom/client';
9898
import App from './App.tsx';
99-
import { StagewiseToolbar } from '@21st-extension/toolbar-react';
99+
import { TwentyFirstToolbar } from '@21st-extension/toolbar-react';
100100
import './index.css';
101101

102102
// Render the main app
@@ -118,7 +118,7 @@ document.addEventListener('DOMContentLoaded', () => {
118118

119119
createRoot(toolbarRoot).render(
120120
<StrictMode>
121-
<StagewiseToolbar config={toolbarConfig} />
121+
<TwentyFirstToolbar config={toolbarConfig} />
122122
</StrictMode>
123123
);
124124
});
@@ -128,11 +128,11 @@ document.addEventListener('DOMContentLoaded', () => {
128128
<details>
129129
<summary>Next.js</summary>
130130

131-
Use the `@21st-extension/toolbar-next` package for Next.js applications. Include the `<StagewiseToolbar>` component in your root layout file (`src/app/layout.tsx`).
131+
Use the `@21st-extension/toolbar-next` package for Next.js applications. Include the `<TwentyFirstToolbar>` component in your root layout file (`src/app/layout.tsx`).
132132

133133
```tsx
134134
// src/app/layout.tsx
135-
import { StagewiseToolbar } from '@21st-extension/toolbar-next';
135+
import { TwentyFirstToolbar } from '@21st-extension/toolbar-next';
136136

137137
export default function RootLayout({
138138
children,
@@ -142,7 +142,7 @@ export default function RootLayout({
142142
return (
143143
<html lang="en">
144144
<body>
145-
<StagewiseToolbar
145+
<TwentyFirstToolbar
146146
config={{
147147
plugins: [], // Add your custom plugins here
148148
}}
@@ -159,12 +159,12 @@ export default function RootLayout({
159159
<details>
160160
<summary>Nuxt.js</summary>
161161

162-
For Nuxt.js projects, you can use the `@21st-extension/toolbar-vue` package. Place the `<StagewiseToolbar>` component in your `app.vue` or a relevant layout file.
162+
For Nuxt.js projects, you can use the `@21st-extension/toolbar-vue` package. Place the `<TwentyFirstToolbar>` component in your `app.vue` or a relevant layout file.
163163

164164
```vue
165165
// app.vue
166166
<script setup lang="ts">
167-
import { StagewiseToolbar, type ToolbarConfig } from '@21st-extension/toolbar-vue';
167+
import { TwentyFirstToolbar, type ToolbarConfig } from '@21st-extension/toolbar-vue';
168168
169169
const config: ToolbarConfig = {
170170
plugins: [], // Add your custom plugins here
@@ -175,7 +175,7 @@ const config: ToolbarConfig = {
175175
<div>
176176
<NuxtRouteAnnouncer />
177177
<ClientOnly>
178-
<StagewiseToolbar :config="config" />
178+
<TwentyFirstToolbar :config="config" />
179179
</ClientOnly>
180180
<NuxtWelcome />
181181
</div>
@@ -187,20 +187,20 @@ const config: ToolbarConfig = {
187187
<details>
188188
<summary>Vue.js</summary>
189189

190-
Use the `@21st-extension/toolbar-vue` package for Vue.js projects. Add the `<StagewiseToolbar>` component to your main App component (e.g., `App.vue`).
190+
Use the `@21st-extension/toolbar-vue` package for Vue.js projects. Add the `<TwentyFirstToolbar>` component to your main App component (e.g., `App.vue`).
191191

192192
```vue
193193
// src/App.vue
194194
<script setup lang="ts">
195-
import { StagewiseToolbar, type ToolbarConfig } from '@21st-extension/toolbar-vue';
195+
import { TwentyFirstToolbar, type ToolbarConfig } from '@21st-extension/toolbar-vue';
196196
197197
const config: ToolbarConfig = {
198198
plugins: [], // Add your custom plugins here
199199
};
200200
</script>
201201
202202
<template>
203-
<StagewiseToolbar :config="config" />
203+
<TwentyFirstToolbar :config="config" />
204204
<div>
205205
<!-- Your app content -->
206206
</div>
@@ -212,7 +212,7 @@ const config: ToolbarConfig = {
212212
<details>
213213
<summary>SvelteKit</summary>
214214

215-
For SvelteKit, you can integrate the toolbar using `@21st-extension/toolbar` and Svelte's lifecycle functions, or look for a dedicated `@21st-extension/toolbar-svelte` package if available. Create a component that conditionally renders/initializes the toolbar on the client side (e.g., `src/lib/components/StagewiseToolbarLoader.svelte` or directly in `src/routes/+layout.svelte`).
215+
For SvelteKit, you can integrate the toolbar using `@21st-extension/toolbar` and Svelte's lifecycle functions, or look for a dedicated `@21st-extension/toolbar-svelte` package if available. Create a component that conditionally renders/initializes the toolbar on the client side (e.g., `src/lib/components/TwentyFirstToolbarLoader.svelte` or directly in `src/routes/+layout.svelte`).
216216

217217
**Using `onMount` in `+layout.svelte` (with `@21st-extension/toolbar`):**
218218
```svelte
@@ -259,7 +259,7 @@ const stagewiseConfig: ToolbarConfig = {
259259
<ToolbarWrapper config={stagewiseConfig} />
260260
{/if}
261261
```
262-
You would then use `StagewiseToolbarLoader` in your `src/routes/+layout.svelte`.
262+
You would then use `TwentyFirstToolbarLoader` in your `src/routes/+layout.svelte`.
263263

264264
</details>
265265

‎apps/vscode-extension/CHANGELOG.md‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,27 @@
1-
# stagewise-vscode-extension
1+
# 21st.dev Extension
2+
3+
## 0.5.1
4+
5+
### Patch Changes
6+
7+
- Renamed all components from `StagewiseToolbar` to `TwentyFirstToolbar` for consistency with 21st.dev branding
8+
- Updated all user-facing messages and documentation to use "21st.dev Extension" and "21st.dev Toolbar" instead of "stagewise"
9+
- Maintained backward compatibility for existing integrations
10+
- Added runtime error tracking and display in chat context
11+
- Added new success state with visual feedback for completed actions
12+
- Enhanced CMD + . hotkey to open inspector even when text input has started
13+
- Added ability to remove attached elements, components, and errors using Backspace when input is empty
14+
- New loading states
15+
16+
## 0.5.0
17+
18+
### Major Changes
19+
20+
- **BREAKING**: Forked from stagewise-io/stagewise project
21+
- Integrated 21st.dev branding and Magic Chat functionality
22+
- Rebranded extension as "21st.dev Extension"
23+
- Added Magic Chat integration for enhanced AI interactions
24+
- Updated all package names to use `@21st-extension/` scope
225

326
## 0.5.2
427

0 commit comments

Comments
 (0)