Jeffrey Smith
e199777093
Some checks failed
CI/CD / detect-changes (pull_request) Successful in 4s
CI/CD / test-sqlite (pull_request) Has been cancelled
CI/CD / build-and-deploy (pull_request) Has been cancelled
CI/CD / test-go-pg (pull_request) Has been cancelled
CI/CD / test-frontend (pull_request) Has been cancelled
Retire old primitives.css button/toast/popup-menu/dropdown/tabs systems.
sw-primitives.css is now the single source of truth.
- Migrate 29 files from .btn-* to .sw-btn .sw-btn--{variant} .sw-btn--{size}
- Delete old toast, popup-menu, dropdown, tabs CSS (no JS references)
- Resolve .sw-dropdown and .sw-tabs class name collisions
- Resolve .settings-section duplicate (modals.css removed, surfaces.css authoritative)
- Add .sw-btn--success variant, --bg-active CSS variable
- Fix sdk-test-runner wrong variable names, icd-test-runner button fallbacks
- Add scripts/audit-css-collisions.sh
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
85 lines
3.5 KiB
JavaScript
85 lines
3.5 KiB
JavaScript
/**
|
|
* Hello Dashboard — sample extension surface.
|
|
*
|
|
* Platform contract:
|
|
* - Mounts into #extension-mount
|
|
* - window.__MANIFEST__ — surface manifest (json, lowercase keys)
|
|
* - sw.auth.user — authenticated user (from SDK boot)
|
|
* - UI.toast(msg, type) — platform toast (success/error/info/warning)
|
|
* - API._get(path) — authenticated fetch (returns parsed JSON)
|
|
*/
|
|
(function() {
|
|
'use strict';
|
|
|
|
var mount = document.getElementById('extension-mount');
|
|
if (!mount) return;
|
|
|
|
var manifest = window.__MANIFEST__ || {};
|
|
var user = window.sw?.auth?.user || {};
|
|
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
var name = user.display_name || user.username || 'World';
|
|
|
|
mount.innerHTML =
|
|
'<div class="hello-dashboard">' +
|
|
'<div class="hello-header">' +
|
|
'<h1>Hello, ' + esc(name) + '!</h1>' +
|
|
'<p class="hello-subtitle">Extension surface <code>' + esc(manifest.id || 'unknown') + '</code> loaded successfully.</p>' +
|
|
'</div>' +
|
|
'<div class="hello-cards">' +
|
|
card('Platform Access', (typeof UI !== 'undefined' ? '\u2713 Connected' : '\u2717 Unavailable'),
|
|
'API, Theme, UI primitives available', 'var(--accent)') +
|
|
card('Theme', isDark ? '\uD83C\uDF19 Dark' : '\u2600\uFE0F Light',
|
|
'Reads from platform theme system', '') +
|
|
card('Route', '<code>' + esc(manifest.route || '/s/hello-dashboard') + '</code>',
|
|
'Registered via surface manifest', '') +
|
|
'</div>' +
|
|
'<div class="hello-actions">' +
|
|
'<button class="sw-btn sw-btn--primary sw-btn--md" id="helloToast">Show Toast</button>' +
|
|
'<button class="sw-btn sw-btn--secondary sw-btn--md" id="helloApi">Test API</button>' +
|
|
'</div>' +
|
|
'<pre class="hello-manifest">' + esc(JSON.stringify(manifest, null, 2)) + '</pre>' +
|
|
'</div>';
|
|
|
|
// Wire toast button
|
|
document.getElementById('helloToast').addEventListener('click', function() {
|
|
if (typeof UI !== 'undefined' && UI.toast) {
|
|
UI.toast('Extension surface is working!', 'success');
|
|
} else {
|
|
alert('Extension surface is working! (UI.toast not available)');
|
|
}
|
|
});
|
|
|
|
// Wire API test button
|
|
document.getElementById('helloApi').addEventListener('click', function() {
|
|
if (typeof API === 'undefined' || !API._get) {
|
|
toast('API module not available', 'error');
|
|
return;
|
|
}
|
|
API._get('/api/v1/surfaces').then(function(resp) {
|
|
toast('API returned ' + (resp.surfaces || []).length + ' registered surfaces', 'info');
|
|
}).catch(function(e) {
|
|
toast('API error: ' + e.message, 'error');
|
|
});
|
|
});
|
|
|
|
function toast(msg, type) {
|
|
if (typeof UI !== 'undefined' && UI.toast) UI.toast(msg, type);
|
|
else alert(msg);
|
|
}
|
|
|
|
function card(title, value, detail, color) {
|
|
var style = color ? ' style="color:' + color + ';"' : '';
|
|
return '<div class="hello-card">' +
|
|
'<div class="hello-card-title">' + esc(title) + '</div>' +
|
|
'<div class="hello-card-value"' + style + '>' + value + '</div>' +
|
|
'<div class="hello-card-detail">' + esc(detail) + '</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
function esc(s) {
|
|
var el = document.createElement('span');
|
|
el.textContent = s;
|
|
return el.innerHTML;
|
|
}
|
|
})();
|