Feat v0.6.12 css isolation (#47)
All checks were successful
CI/CD / detect-changes (push) Successful in 4s
CI/CD / test-frontend (push) Successful in 6s
CI/CD / test-go-pg (push) Successful in 2m44s
CI/CD / test-sqlite (push) Successful in 2m47s
CI/CD / build-and-deploy (push) Successful in 1m46s

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
2026-04-01 11:58:39 +00:00
committed by xcaliber
parent 786bc92768
commit 221ae94f4f
33 changed files with 1385 additions and 1074 deletions

View File

@@ -103,25 +103,25 @@
if (!mount) return;
const surface = document.createElement('div');
surface.className = 'surface-workflow-demo';
surface.className = 'ext-workflow-demo';
mount.appendChild(surface);
// Topbar with user menu
const topbar = document.createElement('div');
topbar.className = 'demo-topbar';
topbar.className = 'ext-workflow-demo-topbar';
topbar.innerHTML = '<h1>Workflow Demo</h1>';
surface.appendChild(topbar);
sw.userMenu(topbar, { flyout: 'down' });
// Subtitle
const subtitle = document.createElement('p');
subtitle.className = 'demo-subtitle';
subtitle.className = 'ext-workflow-demo-subtitle';
subtitle.textContent = 'Four example workflows that prove the engine works end-to-end. Install any package via Admin > Packages.';
surface.appendChild(subtitle);
// Workflow cards
const grid = document.createElement('div');
grid.className = 'demo-grid';
grid.className = 'ext-workflow-demo-grid';
surface.appendChild(grid);
// Fetch installed workflows to check status
@@ -145,28 +145,28 @@
function _buildCard(wf, installedWf) {
const card = document.createElement('div');
card.className = 'demo-card';
card.className = 'ext-workflow-demo-card';
// Title row
const titleRow = document.createElement('div');
titleRow.className = 'card-title-row';
titleRow.innerHTML = '<span class="card-icon">' + wf.icon + '</span>'
titleRow.className = 'ext-workflow-demo-card-title-row';
titleRow.innerHTML = '<span class="ext-workflow-demo-card-icon">' + wf.icon + '</span>'
+ '<h2>' + _esc(wf.title) + '</h2>'
+ '<span class="card-tier badge-' + wf.tier + '">' + wf.tier + '</span>';
+ '<span class="ext-workflow-demo-card-tier ext-workflow-demo-badge-' + wf.tier + '">' + wf.tier + '</span>';
card.appendChild(titleRow);
// Description
const desc = document.createElement('p');
desc.className = 'card-desc';
desc.className = 'ext-workflow-demo-card-desc';
desc.textContent = wf.description;
card.appendChild(desc);
// Badges
const badges = document.createElement('div');
badges.className = 'card-badges';
badges.className = 'ext-workflow-demo-card-badges';
for (const b of wf.badges) {
const span = document.createElement('span');
span.className = 'badge';
span.className = 'ext-workflow-demo-badge';
span.textContent = b;
badges.appendChild(span);
}
@@ -188,7 +188,7 @@
// Status + action
const actions = document.createElement('div');
actions.className = 'card-actions';
actions.className = 'ext-workflow-demo-card-actions';
if (installedWf) {
const isActive = installedWf.is_active;
@@ -199,18 +199,18 @@
// Installed badge
const status = document.createElement('span');
status.className = 'badge badge-installed';
status.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-installed';
status.textContent = 'Installed';
actions.appendChild(status);
if (!isActive) {
const hint = document.createElement('span');
hint.className = 'badge badge-needs-publish';
hint.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-needs-publish';
hint.textContent = 'Not Active';
actions.appendChild(hint);
} else if (!isPublished) {
const hint = document.createElement('span');
hint.className = 'badge badge-needs-publish';
hint.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-needs-publish';
hint.textContent = 'Not Published';
actions.appendChild(hint);
}
@@ -235,14 +235,14 @@
// Public link for public_link workflows
if (installedWf.entry_mode === 'public_link' && isReady) {
const linkRow = document.createElement('div');
linkRow.className = 'public-link-row';
linkRow.className = 'ext-workflow-demo-public-link-row';
const linkInput = document.createElement('input');
linkInput.type = 'text';
linkInput.readOnly = true;
linkInput.value = window.location.origin + base + '/api/v1/public/workflows/' + installedWf.id + '/start';
linkRow.appendChild(linkInput);
const copyBtn = document.createElement('button');
copyBtn.className = 'btn-copy';
copyBtn.className = 'ext-workflow-demo-btn-copy';
copyBtn.textContent = 'Copy';
copyBtn.onclick = function () {
navigator.clipboard.writeText(linkInput.value).then(function () {
@@ -255,7 +255,7 @@
}
} else {
const status = document.createElement('span');
status.className = 'badge badge-not-installed';
status.className = 'ext-workflow-demo-badge ext-workflow-demo-badge-not-installed';
status.textContent = 'Not Installed';
actions.appendChild(status);
}
@@ -268,7 +268,7 @@
function _buildStageDiagram(wf) {
const container = document.createElement('div');
container.className = 'stage-flow';
container.className = 'ext-workflow-demo-stage-flow';
const stages = wf.stages;
let hasBranch = false;
@@ -277,21 +277,21 @@
const s = stages[i];
const node = document.createElement('div');
node.className = 'stage-node stage-' + s.audience;
node.className = 'ext-workflow-demo-stage-node ext-workflow-demo-stage-' + s.audience;
const label = document.createElement('div');
label.className = 'stage-label';
label.className = 'ext-workflow-demo-stage-label';
label.textContent = s.name;
node.appendChild(label);
const meta = document.createElement('div');
meta.className = 'stage-meta';
meta.className = 'ext-workflow-demo-stage-meta';
meta.textContent = s.mode + (s.audience !== 'team' ? ' (' + s.audience + ')' : '');
node.appendChild(meta);
if (s.note) {
const note = document.createElement('div');
note.className = 'stage-note';
note.className = 'ext-workflow-demo-stage-note';
note.textContent = s.note;
node.appendChild(note);
}
@@ -301,13 +301,13 @@
// Arrow (except after last stage)
if (i < stages.length - 1 && !stages[i + 1].branch) {
const arrow = document.createElement('div');
arrow.className = 'stage-arrow';
arrow.className = 'ext-workflow-demo-stage-arrow';
arrow.textContent = '\u2192';
container.appendChild(arrow);
} else if (stages[i + 1] && stages[i + 1].branch) {
if (!hasBranch) {
const split = document.createElement('div');
split.className = 'stage-arrow stage-branch';
split.className = 'ext-workflow-demo-stage-arrow ext-workflow-demo-stage-branch';
split.textContent = '\u2193\u2197';
container.appendChild(split);
hasBranch = true;
@@ -322,14 +322,14 @@
function _buildCollapsible(title, innerHtml) {
const details = document.createElement('details');
details.className = 'card-collapsible';
details.className = 'ext-workflow-demo-card-collapsible';
const summary = document.createElement('summary');
summary.textContent = title;
details.appendChild(summary);
const content = document.createElement('div');
content.className = 'collapsible-content';
content.className = 'ext-workflow-demo-collapsible-content';
content.innerHTML = innerHtml;
details.appendChild(content);