WorkRoot/WorkRoot-WRNexusJSComponent
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(studio): deploy expanded presets and live proposal previews

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 14:54:19 +05:30
1 parent 27dcb561db
commit a1dc8ecd91
6 files changed
+33 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+13 -1
View File
@@ -150,6 +150,18 @@ The complete check includes mocked provider contract/error/lock tests and a
compiled-server deployment check. A real APIMart completion requires your key
and model access; it is not claimed by the mocked tests.
Studio 0.1.3 offers 13 presets and comparison choices: Square, Soft, Angular,
Swiss, Forest, Ocean, Rose, Violet, Ember, Editorial, Terminal, Brutalist and
Contrast. Each supports light and dark mode. The first valid generated proposal
appears in the large preview automatically; Review switches alternatives without
changing the draft. Show current draft returns to it, while Use reviewed proposal
creates an undoable revision. Create new starts with editable preset tokens.
Live APIMart verification on October 19 returned three distinct control-shape
alternatives in one attempt (0px, 8px and 16px). All three exported canonical
designs passed validation and compiled in both modes. Broader requests can still
fail provider or proposal validation; failures preserve the draft and candidates.
### HTTPS proxy origin
The app defaults STUDIO_PUBLIC_ORIGIN to https://component.wrnexusjs.dev. If you
@@ -167,7 +179,7 @@ load failures instead of leaving the editor permanently at Checking.
### Linux component previews
Studio is pinned to 0.1.2, which resolves component files through the UI registry
Studio is pinned to 0.1.3, which resolves component files through the UI registry
instead of assuming a filename from the public component name. This fixes Linux
lookups such as Input -> input.wrn. Install the committed lockfile before
rebuilding and restarting; restarting a deployment still using Studio 0.1.0
app/lib/studio-guide.ts
+1 -1
View File
@@ -19,7 +19,7 @@ export const studioHelpScript = `(() => {
})();`;
export function addStudioGuide(html: string, configured: boolean) {
const guide = `<details open class="help"><summary><strong>How to use Design Studio</strong></summary><ol><li><strong>Describe your website.</strong> Open Guided design, enter your product and audience, then choose colors, shapes and spacing with Next.</li><li><strong>Generate and compare.</strong> Click Generate three directions, review an alternative, then choose Use reviewed proposal.</li><li><strong>Refine it.</strong> Try “make buttons square and use blue as the primary color” under Edit with words. Lock decisions you want to keep.</li><li><strong>Use it in your app.</strong> Open Review &amp; apply and export Theme config or Compiled CSS. This website previews and exports designs; it does not change your deployed app automatically.</li></ol><p>${configured ? "APIMart AI is enabled with gpt-6-luna. Generation sends your brief and current design to APIMart only when you request it." : "AI is not configured. Local presets and supported rule-based edits still work. Set APIMART_API_KEY in the server .env and restart to enable gpt-6-luna."}</p></details>`;
const guide = `<details open class="help"><summary><strong>How to use Design Studio</strong></summary><ol><li><strong>Describe your website.</strong> Open Guided design, enter your product and audience, then choose colors, shapes and spacing with Next.</li><li><strong>Generate and compare.</strong> Click Generate three directions. The first valid alternative appears in the large preview. Review another to compare, then choose Use reviewed proposal to save it. Show current draft returns without accepting.</li><li><strong>Refine it.</strong> Try “make buttons square and use blue as the primary color” under Edit with words. Lock decisions you want to keep.</li><li><strong>Use it in your app.</strong> Open Review &amp; apply and export Theme config or Compiled CSS. This website previews and exports designs; it does not change your deployed app automatically.</li></ol><p>${configured ? "APIMart AI is enabled with gpt-6-luna. Generation sends your brief and current design to APIMart only when you request it." : "AI is not configured. Local presets and supported rule-based edits still work. Set APIMART_API_KEY in the server .env and restart to enable gpt-6-luna."}</p></details>`;
return html
.replace(
'<script type="module"',
bun.lock
+2 -2
View File
@@ -6,7 +6,7 @@
"name": "component-showcase",
"dependencies": {
"@wrnexus/core": "0.8.25",
"@wrnexus/design-studio": "0.1.2",
"@wrnexus/design-studio": "0.1.3",
"@wrnexus/design-system": "0.1.0",
"@wrnexus/dev-server": "0.8.83",
"@wrnexus/helpers": "0.8.10",
@@ -164,7 +164,7 @@
"@wrnexus/db": ["@wrnexus/db@0.8.24", "https://registry.workroot.in/repository/npm/@wrnexus/db/-/db-0.8.24.tgz", {}, "sha512-zLT7e+C1nWhYs3BnqEjEO0QSli0JNl5sSnSHObjSX0C+wty30ASWD1WyBnfu9xFjOFn1eucZGthzo1xdGGQ1TQ=="],
"@wrnexus/design-studio": ["@wrnexus/design-studio@0.1.2", "https://registry.workroot.in/repository/npm/@wrnexus/design-studio/-/design-studio-0.1.2.tgz", { "dependencies": { "@wrnexus/ai": "^0.8.10", "@wrnexus/compiler": "^0.8.44", "@wrnexus/core": "^0.8.25", "@wrnexus/csr": "^0.8.74", "@wrnexus/design-system": "^0.1.0", "@wrnexus/ssr": "^0.8.20", "@wrnexus/styles": "^0.8.27", "@wrnexus/ui": "^0.8.118" }, "bin": { "wrnexus-design-studio": "dist/cli.js" } }, "sha512-4ftDwf9dMXw+00123pE/dbXFRhCTNTwDbskubbk6R7yw+YRPJA6TSAAV0VAqmjdd9M8QV3DoEpKBJZ/yCCVlGw=="],
"@wrnexus/design-studio": ["@wrnexus/design-studio@0.1.3", "https://registry.workroot.in/repository/npm/@wrnexus/design-studio/-/design-studio-0.1.3.tgz", { "dependencies": { "@wrnexus/ai": "^0.8.10", "@wrnexus/compiler": "^0.8.44", "@wrnexus/core": "^0.8.25", "@wrnexus/csr": "^0.8.74", "@wrnexus/design-system": "^0.1.0", "@wrnexus/ssr": "^0.8.20", "@wrnexus/styles": "^0.8.27", "@wrnexus/ui": "^0.8.118" }, "bin": { "wrnexus-design-studio": "dist/cli.js" } }, "sha512-egL4uYsRxiVotuq63cakjSbay4z/uDfQr0rhPDoQa+SriIJHlkRFvPbNxv2p4d4Fy/9uMnGmmgqA6VsgeuFKaA=="],
"@wrnexus/design-system": ["@wrnexus/design-system@0.1.0", "https://registry.workroot.in/repository/npm/@wrnexus/design-system/-/design-system-0.1.0.tgz", {}, "sha512-gNH/B+kYYZy+Pvlvl3gXoQZlTS6iP/teXct2MoClmsGp6M1vKa8IEptVXKs7po3E83zj5kSh3FIXwcBJHtZqLg=="],
package-lock.json
Generated
+4 -4
View File
@@ -9,7 +9,7 @@
"version": "0.8.8",
"dependencies": {
"@wrnexus/core": "0.8.25",
"@wrnexus/design-studio": "0.1.2",
"@wrnexus/design-studio": "0.1.3",
"@wrnexus/design-system": "0.1.0",
"@wrnexus/dev-server": "0.8.83",
"@wrnexus/helpers": "0.8.10",
@@ -1186,9 +1186,9 @@
}
},
"node_modules/@wrnexus/design-studio": {
"version": "0.1.2",
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/design-studio/-/design-studio-0.1.2.tgz",
"integrity": "sha512-4ftDwf9dMXw+00123pE/dbXFRhCTNTwDbskubbk6R7yw+YRPJA6TSAAV0VAqmjdd9M8QV3DoEpKBJZ/yCCVlGw==",
"version": "0.1.3",
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/design-studio/-/design-studio-0.1.3.tgz",
"integrity": "sha512-egL4uYsRxiVotuq63cakjSbay4z/uDfQr0rhPDoQa+SriIJHlkRFvPbNxv2p4d4Fy/9uMnGmmgqA6VsgeuFKaA==",
"license": "MIT",
"dependencies": {
"@wrnexus/ai": "^0.8.10",
package.json
+1 -1
View File
@@ -28,7 +28,7 @@
"@wrnexus/styles": "0.8.27",
"@wrnexus/syntax": "0.8.20",
"@wrnexus/ui": "0.8.118",
"@wrnexus/design-studio": "0.1.2",
"@wrnexus/design-studio": "0.1.3",
"@wrnexus/design-system": "0.1.0"
},
"devDependencies": {
scripts/verify-deployment.ts
+12
View File
@@ -36,6 +36,18 @@ try {
]) {
const response = await fetch(origin + path);
if (!response.ok) throw Error(`${path} returned ${response.status}`);
if (path === "/design-studio/") {
const html = await response.clone().text();
const presetMenu =
html.match(/<select id="preset">([\s\S]*?)<\/select>/)?.[1] ?? "";
if (
(presetMenu.match(/<option value="[^"]+"/g) ?? []).length !== 13 ||
!html.includes('id="show-draft"')
)
throw Error(
"The deployed Studio is missing its thirteen presets or proposal preview controls.",
);
}
if (
path === "/design-studio/" &&
!(await response.clone().text()).includes("How to use Design Studio")