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

feat: deployable design studio and updated component showcase

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:18:06 +05:30
1 parent 3dddcaac1a
commit 3987ddbcfe
113 files changed
+4544 -1039
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/styles/global.css
+161 -30
View File
@@ -2415,7 +2415,7 @@ body {
.detail-hero {
grid-template-columns: minmax(0, 1fr) auto;
gap: .75rem;
gap: 0.75rem;
padding: 1rem 0;
border-radius: var(--wrn-radius-md);
}
@@ -2428,7 +2428,10 @@ body {
box-shadow: none;
}
.detail-hero-icon > span { width: 1.5rem; height: 1.5rem; }
.detail-hero-icon > span {
width: 1.5rem;
height: 1.5rem;
}
.detail-hero h1 {
font-size: clamp(1.5rem, 6vw, 2rem);
@@ -3016,34 +3019,162 @@ body {
min-height: 18rem;
}
[data-docs-empty][hidden] { display:none !important; }
.demo-render:has(.wrn-back-to-top), .playground-preview-source:has(.wrn-back-to-top) { position:relative; transform:translateZ(0); }
.demo-render:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table), .playground-preview-source:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table) { padding:1rem; }
.demo-case:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table) .demo-workbench { grid-template-columns:minmax(0,1fr); }
[data-docs-empty][hidden] {
display: none !important;
}
.demo-render:has(.wrn-back-to-top),
.playground-preview-source:has(.wrn-back-to-top) {
position: relative;
transform: translateZ(0);
}
.demo-render:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table),
.playground-preview-source:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table) {
padding: 1rem;
}
.demo-case:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table) .demo-workbench {
grid-template-columns: minmax(0, 1fr);
}
.example-catalog { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.25rem; }
.example-card { display:block; overflow:hidden; border:1px solid var(--wrn-color-border); border-radius:12px; color:var(--wrn-color-text); background:var(--wrn-color-surface); text-decoration:none; }
.example-card__art { display:grid; place-items:center; height:9rem; background:var(--wrn-color-surface-2); border-bottom:1px solid var(--wrn-color-border); }
.example-card__art span { width:2.5rem; height:2.5rem; color:var(--wrn-color-primary-text); }
.example-card > div:last-child { padding:1.25rem; }
.example-card h2 { font-size:1.1rem; margin:0 0 .5rem; }
.example-card p { font-size:.875rem; color:var(--wrn-color-muted); min-height:2.8rem; }
.example-card strong { font-size:.8rem; color:var(--wrn-color-primary-text); }
.example-toolbar { display:flex; justify-content:space-between; padding:1rem 2rem; border-bottom:1px solid var(--wrn-color-border); background:var(--wrn-color-surface); }
.example-code-panel { margin:2rem auto; width:min(100% - 2rem,80rem); border:1px solid var(--wrn-color-border); border-radius:10px; overflow:hidden; background:var(--wrn-color-surface); }
.example-code-panel header { display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid var(--wrn-color-border); }
.example-code-panel h2 { font-size:1rem; margin:0; }
.example-code-panel button { padding:.45rem .8rem; border:1px solid var(--wrn-color-border); border-radius:6px; background:var(--wrn-color-surface-2); color:var(--wrn-color-text); cursor:pointer; }
.example-code-panel pre { margin:0; padding:1.25rem; max-height:32rem; overflow:auto; font-size:.8rem; white-space:pre; }
.example-code-panel summary { padding:1rem; cursor:pointer; }
.block-live-preview { padding:clamp(1rem,3vw,2rem); border:1px solid var(--wrn-color-border); border-radius:10px; background:var(--wrn-color-bg); overflow:auto; }
.example-form-page { max-width:42rem; margin:3rem auto; padding:1.5rem; display:grid; gap:1.5rem; }
.example-form-page h1 { margin:0; font-size:1.75rem; }
.example-catalog {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1.25rem;
}
.example-card {
display: block;
overflow: hidden;
border: 1px solid var(--wrn-color-border);
border-radius: 12px;
color: var(--wrn-color-text);
background: var(--wrn-color-surface);
text-decoration: none;
}
.example-card__art {
display: grid;
place-items: center;
height: 9rem;
background: var(--wrn-color-surface-2);
border-bottom: 1px solid var(--wrn-color-border);
}
.example-card__art span {
width: 2.5rem;
height: 2.5rem;
color: var(--wrn-color-primary-text);
}
.example-card > div:last-child {
padding: 1.25rem;
}
.example-card h2 {
font-size: 1.1rem;
margin: 0 0 0.5rem;
}
.example-card p {
font-size: 0.875rem;
color: var(--wrn-color-muted);
min-height: 2.8rem;
}
.example-card strong {
font-size: 0.8rem;
color: var(--wrn-color-primary-text);
}
.example-toolbar {
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
border-bottom: 1px solid var(--wrn-color-border);
background: var(--wrn-color-surface);
}
.example-code-panel {
margin: 2rem auto;
width: min(100% - 2rem, 80rem);
border: 1px solid var(--wrn-color-border);
border-radius: 10px;
overflow: hidden;
background: var(--wrn-color-surface);
}
.example-code-panel header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid var(--wrn-color-border);
}
.example-code-panel h2 {
font-size: 1rem;
margin: 0;
}
.example-code-panel button {
padding: 0.45rem 0.8rem;
border: 1px solid var(--wrn-color-border);
border-radius: 6px;
background: var(--wrn-color-surface-2);
color: var(--wrn-color-text);
cursor: pointer;
}
.example-code-panel pre {
margin: 0;
padding: 1.25rem;
max-height: 32rem;
overflow: auto;
font-size: 0.8rem;
white-space: pre;
}
.example-code-panel summary {
padding: 1rem;
cursor: pointer;
}
.block-live-preview {
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid var(--wrn-color-border);
border-radius: 10px;
background: var(--wrn-color-bg);
overflow: auto;
}
.example-form-page {
max-width: 42rem;
margin: 3rem auto;
padding: 1.5rem;
display: grid;
gap: 1.5rem;
}
.example-form-page h1 {
margin: 0;
font-size: 1.75rem;
}
.gallery-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1rem,5vw,5rem); border-bottom:1px solid var(--wrn-color-border); }
.gallery-header nav { display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.875rem; }
.gallery-main { max-width:1440px; margin:auto; padding:clamp(1rem,4vw,4rem); }
.template-products { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1.25rem; }
@media(max-width:600px) { .gallery-header { align-items:flex-start; flex-direction:column; } }
.gallery-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem clamp(1rem, 5vw, 5rem);
border-bottom: 1px solid var(--wrn-color-border);
}
.gallery-header nav {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
font-size: 0.875rem;
}
.gallery-main {
max-width: 1440px;
margin: auto;
padding: clamp(1rem, 4vw, 4rem);
}
.template-products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 1.25rem;
}
@media (max-width: 600px) {
.gallery-header {
align-items: flex-start;
flex-direction: column;
}
}
.playground-preview-source:has(.wrn-confetti), .demo-render:has(.wrn-confetti) { justify-items:center; overflow:hidden; }
.playground-preview-source:has(.wrn-confetti),
.demo-render:has(.wrn-confetti) {
justify-items: center;
overflow: hidden;
}