@aiworkbench/vibe-cli 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +8966 -0
- package/package.json +14 -7
- package/templates/react/.env.example +21 -0
- package/templates/react/index.html +82 -0
- package/templates/react/manifest.json +7 -0
- package/templates/react/package.json +24 -0
- package/templates/react/src/App.tsx +15 -0
- package/templates/react/src/main.tsx +35 -0
- package/templates/react/tsconfig.json +13 -0
- package/templates/react/vite.config.ts +23 -0
- package/templates/vanilla/.env.example +21 -0
- package/templates/vanilla/index.html +82 -0
- package/templates/vanilla/manifest.json +7 -0
- package/templates/vanilla/package.json +19 -0
- package/templates/vanilla/src/main.ts +61 -0
- package/templates/vanilla/tsconfig.json +12 -0
- package/templates/vanilla/vite.config.ts +12 -0
- package/templates/vue/.env.example +21 -0
- package/templates/vue/index.html +82 -0
- package/templates/vue/manifest.json +7 -0
- package/templates/vue/package.json +21 -0
- package/templates/vue/src/App.vue +15 -0
- package/templates/vue/src/main.ts +10 -0
- package/templates/vue/tsconfig.json +12 -0
- package/templates/vue/vite.config.ts +22 -0
package/package.json
CHANGED
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aiworkbench/vibe-cli",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"publishConfig": {
|
|
3
|
+
"version": "0.0.5",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
5
7
|
"type": "module",
|
|
6
8
|
"bin": {
|
|
7
9
|
"vibe-kit": "./dist/index.js",
|
|
8
10
|
"vibe-cli": "./dist/index.js"
|
|
9
11
|
},
|
|
10
12
|
"scripts": {
|
|
11
|
-
"build": "bun build ./src/index.ts --outfile ./dist/index.js --target=node --external eslint --external @typescript-eslint/parser --external vue-eslint-parser --external typescript",
|
|
13
|
+
"build": "bun build ./src/index.ts --outfile ./dist/index.js --target=node --external eslint --external @typescript-eslint/parser --external vue-eslint-parser --external typescript && bun run copy-templates",
|
|
14
|
+
"copy-templates": "rm -rf templates && cp -r ../../templates templates",
|
|
12
15
|
"dev": "bun --watch ./src/index.ts",
|
|
13
16
|
"test": "bun test",
|
|
14
17
|
"type-check": "tsc --noEmit",
|
|
15
|
-
"clean": "rm -rf dist"
|
|
18
|
+
"clean": "rm -rf dist templates",
|
|
19
|
+
"prepublishOnly": "bun run build"
|
|
16
20
|
},
|
|
17
21
|
"dependencies": {
|
|
18
|
-
"@aiworkbench/vibe-types": "^0.0.
|
|
22
|
+
"@aiworkbench/vibe-types": "^0.0.4",
|
|
19
23
|
"@inquirer/prompts": "^8.2.0",
|
|
20
24
|
"@typescript-eslint/parser": "^8.0.0",
|
|
21
25
|
"eslint": "^9.29.0",
|
|
@@ -25,5 +29,8 @@
|
|
|
25
29
|
"devDependencies": {
|
|
26
30
|
"@types/node": "^22.0.0"
|
|
27
31
|
},
|
|
28
|
-
"files": [
|
|
29
|
-
|
|
32
|
+
"files": [
|
|
33
|
+
"dist",
|
|
34
|
+
"templates"
|
|
35
|
+
]
|
|
36
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# vibe-publish configuration
|
|
2
|
+
# Copy this file to .env and fill in your values.
|
|
3
|
+
# These are used by `vibe-publish` for local publishing.
|
|
4
|
+
# In CI, set these as repository/organization secrets instead.
|
|
5
|
+
#
|
|
6
|
+
# SECURITY: Credentials are environment-scoped. The values below are for dev only.
|
|
7
|
+
# Staging/prod use separate secrets (e.g. VIBE_STORAGE_ACCOUNT_KEY_STAGING)
|
|
8
|
+
# that should only exist in CI — never in local .env files.
|
|
9
|
+
|
|
10
|
+
# Azure Blob Storage — dev environment
|
|
11
|
+
VIBE_STORAGE_ACCOUNT_NAME=
|
|
12
|
+
VIBE_STORAGE_ACCOUNT_KEY=
|
|
13
|
+
VIBE_STORAGE_CONTAINER_NAME=
|
|
14
|
+
|
|
15
|
+
# Registry repository — e.g. my-org/vibe-registry
|
|
16
|
+
VIBE_REGISTRY_REPO=
|
|
17
|
+
VIBE_REGISTRY_TOKEN=
|
|
18
|
+
|
|
19
|
+
# GitHub Enterprise Server (optional — only if not using github.com)
|
|
20
|
+
# VIBE_GITHUB_API_URL=https://github.example.com/api/v3
|
|
21
|
+
# VIBE_GITHUB_SERVER_URL=https://github.example.com
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title><%= it.projectName %> — Dev Sandbox</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding-top: 40px;
|
|
11
|
+
}
|
|
12
|
+
#dev-toolbar {
|
|
13
|
+
position: fixed;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
height: 40px;
|
|
18
|
+
background: #1a1a2e;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
padding: 0 16px;
|
|
22
|
+
gap: 16px;
|
|
23
|
+
z-index: 99999;
|
|
24
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
25
|
+
font-size: 13px;
|
|
26
|
+
}
|
|
27
|
+
#dev-toolbar .toolbar-label {
|
|
28
|
+
color: #a78bfa;
|
|
29
|
+
font-weight: 600;
|
|
30
|
+
letter-spacing: 0.02em;
|
|
31
|
+
}
|
|
32
|
+
#dev-toolbar .toolbar-hint {
|
|
33
|
+
color: #6b7280;
|
|
34
|
+
margin-left: auto;
|
|
35
|
+
}
|
|
36
|
+
#dev-toolbar button {
|
|
37
|
+
background: #2d2d44;
|
|
38
|
+
color: #e5e7eb;
|
|
39
|
+
border: 1px solid #3f3f5c;
|
|
40
|
+
border-radius: 4px;
|
|
41
|
+
padding: 4px 12px;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
font-size: 13px;
|
|
44
|
+
font-family: inherit;
|
|
45
|
+
}
|
|
46
|
+
#dev-toolbar button:hover {
|
|
47
|
+
background: #3f3f5c;
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
50
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<div id="dev-toolbar">
|
|
53
|
+
<span class="toolbar-label">Dev Sandbox</span>
|
|
54
|
+
<button id="theme-toggle">Theme: light</button>
|
|
55
|
+
<span class="toolbar-hint">Bridge calls logged to console</span>
|
|
56
|
+
</div>
|
|
57
|
+
<<%= it.projectName %> id="app"></<%= it.projectName %>>
|
|
58
|
+
<script type="module">
|
|
59
|
+
import "./src/main.tsx";
|
|
60
|
+
import { mockBridge } from "./src/mock-bridge.ts";
|
|
61
|
+
|
|
62
|
+
let currentTheme = "light";
|
|
63
|
+
const app = document.getElementById("app");
|
|
64
|
+
app.bridge = mockBridge;
|
|
65
|
+
|
|
66
|
+
document.getElementById("theme-toggle").addEventListener("click", () => {
|
|
67
|
+
currentTheme = currentTheme === "light" ? "dark" : "light";
|
|
68
|
+
document.getElementById("theme-toggle").textContent = `Theme: ${currentTheme}`;
|
|
69
|
+
|
|
70
|
+
const original = mockBridge.theme.current;
|
|
71
|
+
mockBridge.theme.current = () => currentTheme;
|
|
72
|
+
|
|
73
|
+
if (mockBridge.events && mockBridge.events.emit) {
|
|
74
|
+
mockBridge.events.emit("theme-changed", { theme: currentTheme });
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Re-assign bridge to trigger re-render
|
|
78
|
+
app.bridge = mockBridge;
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "<%= it.projectName %>",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
+
"validate": "vibe-kit validate"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"react": "^19.0.0",
|
|
14
|
+
"react-dom": "^19.0.0",
|
|
15
|
+
"@aiworkbench/vibe-types": "^0.0.4"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@vitejs/plugin-react": "^4.3.0",
|
|
19
|
+
"@types/react": "^19.0.0",
|
|
20
|
+
"@types/react-dom": "^19.0.0",
|
|
21
|
+
"typescript": "^5.7.0",
|
|
22
|
+
"vite": "^6.0.0"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { VibeProps } from "@aiworkbench/vibe-types";
|
|
2
|
+
|
|
3
|
+
export default function App({ bridge }: VibeProps) {
|
|
4
|
+
const user = bridge.auth.getUser();
|
|
5
|
+
|
|
6
|
+
return (
|
|
7
|
+
<div style={{ padding: "2rem", fontFamily: "system-ui" }}>
|
|
8
|
+
<h1>Hello, {user.name}!</h1>
|
|
9
|
+
<p>This is your vibe-coded mini-app.</p>
|
|
10
|
+
<button onClick={() => bridge.toast.show("It works!")}>
|
|
11
|
+
Show Toast
|
|
12
|
+
</button>
|
|
13
|
+
</div>
|
|
14
|
+
);
|
|
15
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
|
+
import App from "./App";
|
|
4
|
+
|
|
5
|
+
class VibeElement extends HTMLElement {
|
|
6
|
+
private _bridge: any;
|
|
7
|
+
private _root: ReactDOM.Root | null = null;
|
|
8
|
+
|
|
9
|
+
set bridge(value: any) {
|
|
10
|
+
this._bridge = value;
|
|
11
|
+
this.render();
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
connectedCallback() {
|
|
15
|
+
const shadow = this.attachShadow({ mode: "open" });
|
|
16
|
+
const container = document.createElement("div");
|
|
17
|
+
shadow.appendChild(container);
|
|
18
|
+
this._root = ReactDOM.createRoot(container);
|
|
19
|
+
this.render();
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
disconnectedCallback() {
|
|
23
|
+
this._root?.unmount();
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
private render() {
|
|
27
|
+
if (this._root && this._bridge) {
|
|
28
|
+
this._root.render(React.createElement(App, { bridge: this._bridge }));
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (!customElements.get("<%= it.projectName %>")) {
|
|
34
|
+
customElements.define("<%= it.projectName %>", VibeElement);
|
|
35
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { defineConfig } from "vite";
|
|
2
|
+
import react from "@vitejs/plugin-react";
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
plugins: [react()],
|
|
6
|
+
build: {
|
|
7
|
+
lib: {
|
|
8
|
+
entry: "./src/main.tsx",
|
|
9
|
+
name: "<%= it.projectNamePascal %>",
|
|
10
|
+
fileName: "index",
|
|
11
|
+
formats: ["es"],
|
|
12
|
+
},
|
|
13
|
+
rollupOptions: {
|
|
14
|
+
external: ["react", "react-dom"],
|
|
15
|
+
output: {
|
|
16
|
+
globals: {
|
|
17
|
+
react: "React",
|
|
18
|
+
"react-dom": "ReactDOM",
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# vibe-publish configuration
|
|
2
|
+
# Copy this file to .env and fill in your values.
|
|
3
|
+
# These are used by `vibe-publish` for local publishing.
|
|
4
|
+
# In CI, set these as repository/organization secrets instead.
|
|
5
|
+
#
|
|
6
|
+
# SECURITY: Credentials are environment-scoped. The values below are for dev only.
|
|
7
|
+
# Staging/prod use separate secrets (e.g. VIBE_STORAGE_ACCOUNT_KEY_STAGING)
|
|
8
|
+
# that should only exist in CI — never in local .env files.
|
|
9
|
+
|
|
10
|
+
# Azure Blob Storage — dev environment
|
|
11
|
+
VIBE_STORAGE_ACCOUNT_NAME=
|
|
12
|
+
VIBE_STORAGE_ACCOUNT_KEY=
|
|
13
|
+
VIBE_STORAGE_CONTAINER_NAME=
|
|
14
|
+
|
|
15
|
+
# Registry repository — e.g. my-org/vibe-registry
|
|
16
|
+
VIBE_REGISTRY_REPO=
|
|
17
|
+
VIBE_REGISTRY_TOKEN=
|
|
18
|
+
|
|
19
|
+
# GitHub Enterprise Server (optional — only if not using github.com)
|
|
20
|
+
# VIBE_GITHUB_API_URL=https://github.example.com/api/v3
|
|
21
|
+
# VIBE_GITHUB_SERVER_URL=https://github.example.com
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title><%= it.projectName %> — Dev Sandbox</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding-top: 40px;
|
|
11
|
+
}
|
|
12
|
+
#dev-toolbar {
|
|
13
|
+
position: fixed;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
height: 40px;
|
|
18
|
+
background: #1a1a2e;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
padding: 0 16px;
|
|
22
|
+
gap: 16px;
|
|
23
|
+
z-index: 99999;
|
|
24
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
25
|
+
font-size: 13px;
|
|
26
|
+
}
|
|
27
|
+
#dev-toolbar .toolbar-label {
|
|
28
|
+
color: #a78bfa;
|
|
29
|
+
font-weight: 600;
|
|
30
|
+
letter-spacing: 0.02em;
|
|
31
|
+
}
|
|
32
|
+
#dev-toolbar .toolbar-hint {
|
|
33
|
+
color: #6b7280;
|
|
34
|
+
margin-left: auto;
|
|
35
|
+
}
|
|
36
|
+
#dev-toolbar button {
|
|
37
|
+
background: #2d2d44;
|
|
38
|
+
color: #e5e7eb;
|
|
39
|
+
border: 1px solid #3f3f5c;
|
|
40
|
+
border-radius: 4px;
|
|
41
|
+
padding: 4px 12px;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
font-size: 13px;
|
|
44
|
+
font-family: inherit;
|
|
45
|
+
}
|
|
46
|
+
#dev-toolbar button:hover {
|
|
47
|
+
background: #3f3f5c;
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
50
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<div id="dev-toolbar">
|
|
53
|
+
<span class="toolbar-label">Dev Sandbox</span>
|
|
54
|
+
<button id="theme-toggle">Theme: light</button>
|
|
55
|
+
<span class="toolbar-hint">Bridge calls logged to console</span>
|
|
56
|
+
</div>
|
|
57
|
+
<<%= it.projectName %> id="app"></<%= it.projectName %>>
|
|
58
|
+
<script type="module">
|
|
59
|
+
import "./src/main.ts";
|
|
60
|
+
import { mockBridge } from "./src/mock-bridge.ts";
|
|
61
|
+
|
|
62
|
+
let currentTheme = "light";
|
|
63
|
+
const app = document.getElementById("app");
|
|
64
|
+
app.bridge = mockBridge;
|
|
65
|
+
|
|
66
|
+
document.getElementById("theme-toggle").addEventListener("click", () => {
|
|
67
|
+
currentTheme = currentTheme === "light" ? "dark" : "light";
|
|
68
|
+
document.getElementById("theme-toggle").textContent = `Theme: ${currentTheme}`;
|
|
69
|
+
|
|
70
|
+
const original = mockBridge.theme.current;
|
|
71
|
+
mockBridge.theme.current = () => currentTheme;
|
|
72
|
+
|
|
73
|
+
if (mockBridge.events && mockBridge.events.emit) {
|
|
74
|
+
mockBridge.events.emit("theme-changed", { theme: currentTheme });
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Re-assign bridge to trigger re-render
|
|
78
|
+
app.bridge = mockBridge;
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "<%= it.projectName %>",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
+
"validate": "vibe-kit validate"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@aiworkbench/vibe-types": "^0.0.4"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"typescript": "^5.7.0",
|
|
17
|
+
"vite": "^6.0.0"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import type { Bridge } from "@aiworkbench/vibe-types";
|
|
2
|
+
|
|
3
|
+
class VibeElement extends HTMLElement {
|
|
4
|
+
private _bridge: Bridge | null = null;
|
|
5
|
+
private _shadow: ShadowRoot;
|
|
6
|
+
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this._shadow = this.attachShadow({ mode: "open" });
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
set bridge(value: Bridge) {
|
|
13
|
+
this._bridge = value;
|
|
14
|
+
this.render();
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
connectedCallback() {
|
|
18
|
+
this.render();
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
private render() {
|
|
22
|
+
if (!this._bridge) return;
|
|
23
|
+
|
|
24
|
+
const user = this._bridge.auth.getUser();
|
|
25
|
+
const bridge = this._bridge;
|
|
26
|
+
|
|
27
|
+
this._shadow.innerHTML = `
|
|
28
|
+
<style>
|
|
29
|
+
:host {
|
|
30
|
+
display: block;
|
|
31
|
+
font-family: system-ui, sans-serif;
|
|
32
|
+
padding: 2rem;
|
|
33
|
+
}
|
|
34
|
+
button {
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
padding: 0.5rem 1rem;
|
|
37
|
+
border: 1px solid #ccc;
|
|
38
|
+
border-radius: 4px;
|
|
39
|
+
background: #fff;
|
|
40
|
+
}
|
|
41
|
+
button:hover {
|
|
42
|
+
background: #f0f0f0;
|
|
43
|
+
}
|
|
44
|
+
</style>
|
|
45
|
+
<h1>Hello, <span id="user-name"></span>!</h1>
|
|
46
|
+
<p>This is your vibe-coded mini-app.</p>
|
|
47
|
+
<button id="toast-btn">Show Toast</button>
|
|
48
|
+
`;
|
|
49
|
+
|
|
50
|
+
const nameEl = this._shadow.getElementById("user-name");
|
|
51
|
+
if (nameEl) nameEl.textContent = user.name;
|
|
52
|
+
|
|
53
|
+
this._shadow
|
|
54
|
+
.getElementById("toast-btn")
|
|
55
|
+
?.addEventListener("click", () => bridge.toast.show("It works!"));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
if (!customElements.get("<%= it.projectName %>")) {
|
|
60
|
+
customElements.define("<%= it.projectName %>", VibeElement);
|
|
61
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# vibe-publish configuration
|
|
2
|
+
# Copy this file to .env and fill in your values.
|
|
3
|
+
# These are used by `vibe-publish` for local publishing.
|
|
4
|
+
# In CI, set these as repository/organization secrets instead.
|
|
5
|
+
#
|
|
6
|
+
# SECURITY: Credentials are environment-scoped. The values below are for dev only.
|
|
7
|
+
# Staging/prod use separate secrets (e.g. VIBE_STORAGE_ACCOUNT_KEY_STAGING)
|
|
8
|
+
# that should only exist in CI — never in local .env files.
|
|
9
|
+
|
|
10
|
+
# Azure Blob Storage — dev environment
|
|
11
|
+
VIBE_STORAGE_ACCOUNT_NAME=
|
|
12
|
+
VIBE_STORAGE_ACCOUNT_KEY=
|
|
13
|
+
VIBE_STORAGE_CONTAINER_NAME=
|
|
14
|
+
|
|
15
|
+
# Registry repository — e.g. my-org/vibe-registry
|
|
16
|
+
VIBE_REGISTRY_REPO=
|
|
17
|
+
VIBE_REGISTRY_TOKEN=
|
|
18
|
+
|
|
19
|
+
# GitHub Enterprise Server (optional — only if not using github.com)
|
|
20
|
+
VIBE_GITHUB_API_URL=https://github.example.com/api/v3
|
|
21
|
+
VIBE_GITHUB_SERVER_URL=https://github.example.com
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title><%= it.projectName %> — Dev Sandbox</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding-top: 40px;
|
|
11
|
+
}
|
|
12
|
+
#dev-toolbar {
|
|
13
|
+
position: fixed;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
height: 40px;
|
|
18
|
+
background: #1a1a2e;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
padding: 0 16px;
|
|
22
|
+
gap: 16px;
|
|
23
|
+
z-index: 99999;
|
|
24
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
25
|
+
font-size: 13px;
|
|
26
|
+
}
|
|
27
|
+
#dev-toolbar .toolbar-label {
|
|
28
|
+
color: #a78bfa;
|
|
29
|
+
font-weight: 600;
|
|
30
|
+
letter-spacing: 0.02em;
|
|
31
|
+
}
|
|
32
|
+
#dev-toolbar .toolbar-hint {
|
|
33
|
+
color: #6b7280;
|
|
34
|
+
margin-left: auto;
|
|
35
|
+
}
|
|
36
|
+
#dev-toolbar button {
|
|
37
|
+
background: #2d2d44;
|
|
38
|
+
color: #e5e7eb;
|
|
39
|
+
border: 1px solid #3f3f5c;
|
|
40
|
+
border-radius: 4px;
|
|
41
|
+
padding: 4px 12px;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
font-size: 13px;
|
|
44
|
+
font-family: inherit;
|
|
45
|
+
}
|
|
46
|
+
#dev-toolbar button:hover {
|
|
47
|
+
background: #3f3f5c;
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
50
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<div id="dev-toolbar">
|
|
53
|
+
<span class="toolbar-label">Dev Sandbox</span>
|
|
54
|
+
<button id="theme-toggle">Theme: light</button>
|
|
55
|
+
<span class="toolbar-hint">Bridge calls logged to console</span>
|
|
56
|
+
</div>
|
|
57
|
+
<<%= it.projectName %> id="app"></<%= it.projectName %>>
|
|
58
|
+
<script type="module">
|
|
59
|
+
import "./src/main.ts";
|
|
60
|
+
import { mockBridge } from "./src/mock-bridge.ts";
|
|
61
|
+
|
|
62
|
+
let currentTheme = "light";
|
|
63
|
+
const app = document.getElementById("app");
|
|
64
|
+
app.bridge = mockBridge;
|
|
65
|
+
|
|
66
|
+
document.getElementById("theme-toggle").addEventListener("click", () => {
|
|
67
|
+
currentTheme = currentTheme === "light" ? "dark" : "light";
|
|
68
|
+
document.getElementById("theme-toggle").textContent = `Theme: ${currentTheme}`;
|
|
69
|
+
|
|
70
|
+
const original = mockBridge.theme.current;
|
|
71
|
+
mockBridge.theme.current = () => currentTheme;
|
|
72
|
+
|
|
73
|
+
if (mockBridge.events && mockBridge.events.emit) {
|
|
74
|
+
mockBridge.events.emit("theme-changed", { theme: currentTheme });
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Re-assign bridge to trigger re-render
|
|
78
|
+
app.bridge = mockBridge;
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "<%= it.projectName %>",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview",
|
|
10
|
+
"validate": "vibe-kit validate"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"vue": "^3.5.0",
|
|
14
|
+
"@aiworkbench/vibe-types": "^0.0.4"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@vitejs/plugin-vue": "^5.2.0",
|
|
18
|
+
"typescript": "^5.7.0",
|
|
19
|
+
"vite": "^6.0.0"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { Bridge } from "@aiworkbench/vibe-types";
|
|
3
|
+
|
|
4
|
+
const props = defineProps<{ bridge: Bridge }>();
|
|
5
|
+
|
|
6
|
+
const user = props.bridge.auth.getUser();
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<template>
|
|
10
|
+
<div style="padding: 2rem; font-family: system-ui">
|
|
11
|
+
<h1>Hello, {{ user.name }}!</h1>
|
|
12
|
+
<p>This is your vibe-coded mini-app.</p>
|
|
13
|
+
<button @click="props.bridge.toast.show('It works!')">Show Toast</button>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { defineCustomElement } from "vue";
|
|
2
|
+
import App from "./App.vue";
|
|
3
|
+
|
|
4
|
+
const VibeElement = defineCustomElement(App, {
|
|
5
|
+
shadowRoot: true,
|
|
6
|
+
});
|
|
7
|
+
|
|
8
|
+
if (!customElements.get("<%= it.projectName %>")) {
|
|
9
|
+
customElements.define("<%= it.projectName %>", VibeElement);
|
|
10
|
+
}
|