From 3987ddbcfeceee1121e9c63e3a604ee98734e447 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Mon, 19 Oct 2026 13:18:06 +0530 Subject: [PATCH] feat: deployable design studio and updated component showcase --- README.md | 35 + app/layouts/showcase.wrn | 6 +- app/pages/accessibility.wrn | 2 +- app/pages/colors.wrn | 2 +- app/pages/components/accordion.wrn | 6 +- app/pages/components/advanced-select.wrn | 82 +- app/pages/components/alert.wrn | 6 +- app/pages/components/avatar-group.wrn | 6 +- app/pages/components/avatar.wrn | 6 +- app/pages/components/back-to-top.wrn | 10 +- app/pages/components/badge.wrn | 6 +- app/pages/components/blockquote.wrn | 10 +- app/pages/components/breadcrumb.wrn | 6 +- app/pages/components/button-group.wrn | 6 +- app/pages/components/button.wrn | 16 +- app/pages/components/card.wrn | 14 +- app/pages/components/carousel.wrn | 6 +- app/pages/components/chart.wrn | 663 ++++++++- app/pages/components/chat-bubble.wrn | 6 +- app/pages/components/checkbox.wrn | 6 +- app/pages/components/clipboard.wrn | 6 +- app/pages/components/collapse.wrn | 6 +- app/pages/components/color-picker.wrn | 6 +- app/pages/components/columns.wrn | 10 +- app/pages/components/combo-box.wrn | 42 +- app/pages/components/confetti.wrn | 6 +- app/pages/components/container.wrn | 10 +- app/pages/components/custom-scrollbar.wrn | 8 +- app/pages/components/data-map.wrn | 6 +- app/pages/components/data-table.wrn | 18 +- app/pages/components/date-picker.wrn | 6 +- app/pages/components/device-frame.wrn | 6 +- app/pages/components/divider.wrn | 10 +- app/pages/components/drag-and-drop.wrn | 6 +- app/pages/components/drawflow-canvas.wrn | 132 ++ app/pages/components/file-input.wrn | 6 +- app/pages/components/file-upload-progress.wrn | 6 +- app/pages/components/flow-canvas.wrn | 1234 +++++++++++++++++ app/pages/components/grid.wrn | 10 +- app/pages/components/image.wrn | 10 +- app/pages/components/input-group.wrn | 6 +- app/pages/components/input-number.wrn | 24 +- app/pages/components/input.wrn | 6 +- app/pages/components/kbd.wrn | 10 +- app/pages/components/layout-splitter.wrn | 4 +- app/pages/components/legend-indicator.wrn | 2 +- app/pages/components/link.wrn | 10 +- app/pages/components/list-group.wrn | 6 +- app/pages/components/list.wrn | 6 +- app/pages/components/map.wrn | 4 +- app/pages/components/marquee.wrn | 6 +- app/pages/components/mega-menu.wrn | 4 +- app/pages/components/metric-card.wrn | 6 +- app/pages/components/nav.wrn | 6 +- app/pages/components/navbar.wrn | 6 +- app/pages/components/pagination.wrn | 6 +- app/pages/components/pin-input.wrn | 32 +- app/pages/components/preference-switcher.wrn | 8 +- app/pages/components/progress.wrn | 10 +- app/pages/components/radio.wrn | 6 +- app/pages/components/range-slider.wrn | 2 +- app/pages/components/rating.wrn | 6 +- app/pages/components/scrollspy.wrn | 4 +- app/pages/components/search-box.wrn | 6 +- app/pages/components/section.wrn | 10 +- app/pages/components/select.wrn | 6 +- app/pages/components/sidebar.wrn | 4 +- app/pages/components/skeleton.wrn | 10 +- app/pages/components/spinner.wrn | 10 +- app/pages/components/stepper.wrn | 10 +- app/pages/components/strong-password.wrn | 12 +- app/pages/components/styled-icon.wrn | 10 +- app/pages/components/switch.wrn | 18 +- app/pages/components/tabs.wrn | 8 +- app/pages/components/text-link.wrn | 6 +- app/pages/components/textarea.wrn | 6 +- app/pages/components/time-picker.wrn | 2 +- app/pages/components/timeline.wrn | 6 +- app/pages/components/toaster.wrn | 2 +- app/pages/components/toggle-count.wrn | 6 +- app/pages/components/toggle-password.wrn | 20 +- app/pages/components/tree-view.wrn | 6 +- app/pages/components/typography.wrn | 10 +- app/pages/components/wysiwyg-editor.wrn | 6 +- app/pages/core.wrn | 26 +- app/pages/dark-mode.wrn | 2 +- app/pages/fonts.wrn | 2 +- app/pages/forms.wrn | 2 +- app/pages/framework-guides.wrn | 2 +- app/pages/index.wrn | 10 +- app/pages/integrations.wrn | 6 +- app/pages/resources.wrn | 2 +- app/pages/sizing.wrn | 2 +- app/pages/themes.wrn | 2 +- app/routes.gen.ts | 6 + app/styles/global.css | 191 ++- app/types/wrnexus.generated.d.ts | 2 +- bun.lock | 94 +- deploy/nginx-design-studio.conf | 14 + package-lock.json | 474 ++++--- package.json | 30 +- public/playground.js | 21 +- scripts/generate-catalog-pages.mjs | 234 +++- scripts/generate-showcase.mjs | 962 ++++++++++--- scripts/showcase-profiles.mjs | 354 ++++- scripts/start.ts | 18 + scripts/studio.ts | 18 + showcase-manifest.json | 32 +- test/hosted-studio.test.ts | 33 + test/playground-interaction.test.ts | 7 +- test/showcase.test.ts | 229 ++- tsconfig.json | 2 +- wrnexus.config.ts | 8 +- 113 files changed, 4544 insertions(+), 1039 deletions(-) create mode 100644 app/pages/components/drawflow-canvas.wrn create mode 100644 app/pages/components/flow-canvas.wrn create mode 100644 deploy/nginx-design-studio.conf create mode 100644 scripts/start.ts create mode 100644 scripts/studio.ts create mode 100644 test/hosted-studio.test.ts diff --git a/README.md b/README.md index 8279af3..ae3c2b3 100644 --- a/README.md +++ b/README.md @@ -69,3 +69,38 @@ bun run --cwd examples/component-showcase check Review representative component pages at mobile, tablet, and desktop widths and in light, dark, keyboard-only, and reduced-motion modes before publishing. + +## Design Studio on the deployed site + +The navigation opens `/design-studio/`. It includes guided alternatives, decision +locks, natural-language edits, component recipes, previews and portable exports. +Drafts and incomplete source edits remain in each browser's local storage; use +Export raw draft before clearing browser data or changing the site's origin. +The hosted demo uses local rule generation, needs no AI credentials, and cannot +apply designs to server files or access agent workspaces. + +On the VM, pull this repository and use Bun 1.3 or newer: + +```sh +git pull --ff-only +bun install --frozen-lockfile +bun run check +PORT=3000 bun run start +``` + +`start` runs the production component site and an export-only Studio sidecar +bound to loopback port 4320. Include `deploy/nginx-design-studio.conf` inside your +existing nginx server block, retain its existing component-site proxy, validate +with `nginx -t`, then reload nginx. The proxy must preserve `/design-studio/` and +Host, and pass Origin unchanged. If port 4320 is occupied, set DESIGN_STUDIO_PORT +and update the proxy upstream to the same port. Manage the `bun run start` +process using your existing service manager and restart it after each build. + +The private `@wrnexus` registry is configured in `.npmrc`. Supply registry +credentials on the VM through its user configuration or secret store; no tokens +are committed. Dependencies are pinned and bun.lock is the deployment lock. +A refreshed package-lock.json is retained for npm tooling, but Bun runs the app. + +After deployment, check `/`, a component playground and `/design-studio/`. +Create a draft, generate alternatives, open a preview, export JSON, then reload +and confirm draft recovery. Existing Studio drafts on other origins remain there. diff --git a/app/layouts/showcase.wrn b/app/layouts/showcase.wrn index c0db2c9..0862aa6 100644 --- a/app/layouts/showcase.wrn +++ b/app/layouts/showcase.wrn @@ -9,7 +9,7 @@ layout Showcase {
- +
@@ -27,14 +27,14 @@ layout Showcase {