switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.37.4 (#216)

Browse Source 
Co-authored-by: gobha <jasafpro@gmail.com>
Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
gobha
2026-03-21 01:15:09 +00:00
committed by xcaliber
parent fc43618501
commit 05b5affdac
7 changed files with 294 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/dev.html
View File

@@ -62,6 +62,11 @@
const { Tabs } = await import('./js/sw/primitives/tabs.js');
const { Dropdown } = await import('./js/sw/primitives/dropdown.js');
const { AppShell } = await import('./js/sw/shell/app-shell.js');
const { UserMenu } = await import('./js/sw/shell/user-menu.js');
const { SurfaceViewport } = await import('./js/sw/shell/surface-viewport.js');
const { DialogStack } = await import('./js/sw/shell/dialog-stack.js');
const { confirm } = await import('./js/sw/primitives/confirm.js');
const { prompt } = await import('./js/sw/primitives/prompt.js');
// ── SDK Boot ────────────────────────────
const { boot } = await import('./js/sw/sdk/index.js');
@@ -209,6 +214,99 @@
`;
}
// ── Shell Demo Page ──────────────────────
function ShellPage() {
const [confirmResult, setConfirmResult] = useState(null);
const [promptResult, setPromptResult] = useState(null);
return html`
<div class="gallery">
<h1>Shell Demo</h1>
<p class="subtitle">Layer 2 — Application shell (v0.37.4)</p>
<!-- UserMenu -->
<div class="section">
<h2>UserMenu</h2>
<div class="row">
<${UserMenu} />
<${UserMenu} placement="down-left" />
</div>
<p style="color:var(--text-3); font-size:0.8rem; margin-top:0.5rem">
RBAC-gated flyout. Without backend, shows all items for demo.
</p>
</div>
<!-- Imperative Confirm -->
<div class="section">
<h2>sw.confirm()</h2>
<div class="row">
<${Button} variant="secondary" onClick=${async () => {
const ok = await sw.confirm('Delete this item?', { destructive: true });
setConfirmResult(ok);
}}>Confirm (destructive)<//>
<${Button} variant="secondary" onClick=${async () => {
const ok = await sw.confirm('Proceed with this action?');
setConfirmResult(ok);
}}>Confirm (normal)<//>
${confirmResult !== null && html`
<span style="font-weight:600; color: ${confirmResult ? 'var(--success)' : 'var(--danger)'}">
Result: ${String(confirmResult)}
</span>
`}
</div>
</div>
<!-- Imperative Prompt -->
<div class="section">
<h2>sw.prompt()</h2>
<div class="row">
<${Button} variant="secondary" onClick=${async () => {
const val = await sw.prompt('Enter a name:', { defaultValue: 'untitled' });
setPromptResult(val);
}}>Prompt<//>
${promptResult !== null && html`
<span style="font-weight:600; color:var(--text-2)">
Result: ${JSON.stringify(promptResult)}
</span>
`}
</div>
</div>
<!-- Surface Viewport -->
<div class="section">
<h2>SurfaceViewport</h2>
<p style="color:var(--text-3); font-size:0.8rem; margin-bottom:0.5rem">
UserMenu is placed by the surface (top-right), not the shell.
</p>
<div style="border:1px dashed var(--border); border-radius:var(--radius, 6px); height:200px; position:relative; overflow:hidden;">
<${SurfaceViewport} surface=${html`
<div style="padding:1rem; color:var(--text-2); height:100%;">
<p>Mock surface content. The shell provides the viewport; the surface owns everything inside.</p>
<div style="position:absolute; top:0.5rem; right:0.5rem;">
<${UserMenu} placement="down-left" />
</div>
</div>
`} />
</div>
</div>
<!-- App component tree -->
<div class="section">
<h2>App Component Tree</h2>
<div style="font-family:var(--font-mono, monospace); font-size:0.8rem; color:var(--text-2); background:var(--bg-1); padding:0.75rem; border-radius:6px; white-space:pre;">${
`<App>
<AppShell banner message footer>
<SurfaceViewport surface={...} />
</AppShell>
<ToastContainer />
<DialogStack />
</App>`
}</div>
</div>
</div>
`;
}
function PrimitivesPage() {
const [dialogOpen, setDialogOpen] = useState(false);
const [drawerOpen, setDrawerOpen] = useState(false);
@@ -424,8 +522,6 @@
<${Button} variant="secondary" onClick=${() => toast.info('New message received')}>Info<//>
</div>
</div>
<${ToastContainer} />
</div>
`;
}
@@ -492,10 +588,13 @@
</nav>
<div class="dev-page">
${page === 'primitives' && html`<${PrimitivesPage} />`}
${page === 'shell' && html`<${ShellPage} />`}
${page === 'sdk' && html`<${SDKPage} />`}
</div>
</div>
<//>
<${ToastContainer} />
<${DialogStack} />
`;
}