T3.5 - A5: one button system, and green goes back to being a status

251 buttons across the 7 pages, counted in the browser with every wizard step,
creator section and tool panel forced visible. Two thirds of them are
display:none at load, so a static grep sees about eighty and misses the rest.

FOUR ROLES, defined once in theme-light.css as --wp-btn-*, and no fifth:

  primary    the one action the screen exists for. Filled accent.
  secondary  every other real action. White, --border-strong, accent on hover.
  tertiary   navigating or undoing. No fill, no border, accent text.
  danger     destructive. Outlined red; filled red only where the control is too
             small for an outline to read - the 28px x on a sequence row.

Every button class is mapped to a role in docs/reference/tokens.md section 12.
No value is new: these are the fills the sheets already rendered, given one
definition so that "primary" means one thing.

GREEN IS A STATUS COLOUR AND NO LONGER FILLS A BUTTON. A5 names two green action
buttons; there are four. .use-btn and the launcher's completed-SOP card button
never render green in the default fixture, so the review could not have seen
them - the SOP has to be finished and a suggested value has to be offered first.

  .nav-btn.primary            "SOP complete"    wizard
  .btn.btn-generate           "Save & view"     creator
  .use-btn                                      creator
  .card.complete .card-button                   launcher

The green did not go anywhere. .cstatus button.on-cleared, .toggle-btn.enabled,
.wp-nav-dot.ok, .rb-ready, .badge-R and the launcher card's own left border and
status line all still carry it, and every one of those is a state rather than an
action. The launcher card in particular still says "complete" twice after this
change; it just no longer says it on the button.

SENTENCE CASE, applied to buttons and field labels only, which is the scope A5
sets. First word capitalised, the rest lowercased, acronyms and external proper
nouns left alone (SOP, QC, WP, UPN, PM/APM/CM/QM, PDF, JSON, CSV, BIM, MIMO,
Excel, Acumatica).

  ~30 button labels across launcher, wizard, creator, admin and two scripts
  46 field labels
  text-transform:uppercase removed from 4 rules - .btn and .add-btn (creator
  buttons), label and .cmt-namebar label (creator field labels)

Labels carrying markup - a .req asterisk, a .help-tip chip - had only their text
nodes transformed, so the markup survives and "first word" means the first word
of the label rather than of each fragment. The creator's mono face, 10px size and
tracking are its idiom and are untouched; only the forced uppercase goes.

help.js was updated too. It names "Load Sample" and "SOP Complete" in prose, so
renaming the buttons without it would have left the help centre describing
controls that no longer exist. That coupling is the only place in the app where
button text is referenced by name.

Verified by re-running the inventory: 0 green action buttons, 0 uppercase button
labels, 251 buttons still present - nothing was lost in the rename.

console.css card headers are unchanged, confirmed by diff: the only six lines
this task touches in that file are token substitutions on button/button.primary/
button.danger, none of them within twenty lines of .card h2.

f_items 5 FIXED / F6 REPRODUCES. browser_check 71/71.

Left alone and logged: .step-tab is still uppercase (BL-015) - it is a stepper
tab, neither a button nor a field label, and A4/S9 rebuild the stepper. Table
headers, section eyebrows and headings keep their case throughout. BL-008 and
BL-009 were re-targeted from T3.5 to wave 9: both are colour merges on a field
fill and a status pill, and this task is scoped to buttons.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-15 19:11:56 -05:00
parent 03d24138ed
commit ce6fb840f0
13 changed files with 299 additions and 150 deletions

View File

@@ -95,7 +95,7 @@
<strong>User Directory</strong> page. They moved because user administration is no longer
admin-only: a <strong>Project Super User</strong> creates and manages the accounts on the
projects they administer, and they must never be sent through this console to do it.</div>
<div class="toolbar"><a class="home" href="users.html"><button class="primary">Open the User Directory →</button></a></div>
<div class="toolbar"><a class="home" href="users.html"><button class="primary">Open the user directory →</button></a></div>
</div>
<!-- PROJECTS (ARCHIVE / UNARCHIVE) -->

View File

@@ -64,14 +64,14 @@ a.home:hover{ text-decoration:underline; }
toolbar is one clean band instead of a ragged one. */
button{ font:inherit; font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
height:var(--ctl); padding:0 var(--s3); border-radius:0; cursor:pointer;
border:1px solid var(--border-strong); background:var(--surface); color:var(--text); }
button:hover{ border-color:var(--accent); color:var(--accent); }
border:1px solid var(--wp-btn-secondary-border); background:var(--wp-btn-secondary-bg); color:var(--wp-btn-secondary-fg); }
button:hover{ border-color:var(--wp-btn-secondary-hover-fg); color:var(--wp-btn-secondary-hover-fg); }
button:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
button:disabled, button:disabled:hover{ color:var(--dim); border-color:var(--border); background:var(--surface); cursor:default; }
button.primary{ background:var(--accent); border-color:var(--accent); color:var(--cds-text-on-color); }
button.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--cds-text-on-color); }
button.danger{ border-color:var(--red); color:var(--red); }
button.danger:hover{ background:var(--red-bg); border-color:var(--red); color:var(--red); }
button.primary{ background:var(--wp-btn-primary-bg); border-color:var(--wp-btn-primary-bg); color:var(--wp-btn-primary-fg); }
button.primary:hover{ background:var(--wp-btn-primary-hover); border-color:var(--wp-btn-primary-hover); color:var(--wp-btn-primary-fg); }
button.danger{ border-color:var(--wp-btn-danger-border); color:var(--wp-btn-danger-fg); }
button.danger:hover{ background:var(--wp-btn-danger-soft-bg); border-color:var(--wp-btn-danger-border); color:var(--wp-btn-danger-fg); }
.row{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; }
/* The filter / search / button strip at the top of a card. */
.toolbar{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; margin:0 0 var(--s3); }

View File

@@ -101,7 +101,7 @@
<li><strong>Open “Work Package Creation”</strong> to author packages with your SOP defaults pre-populated.</li>
<li><strong>Update from the field</strong> using the <strong>Field View</strong>, and <strong>leave feedback</strong> on any page with the Feedback button.</li>
</ol>
<div class="ui-help-callout">New here? On the home page choose the <strong>Sample Project</strong>, then click <strong>⭐ Load Sample</strong> in the suite to see a fully filled-out SOP and an example Work Package.</div>` },
<div class="ui-help-callout">New here? On the home page choose the <strong>Sample Project</strong>, then click <strong>⭐ Load sample</strong> in the suite to see a fully filled-out SOP and an example Work Package.</div>` },
{ id: 'projects', title: 'Projects', body: `
<h3>Projects</h3>
@@ -120,7 +120,7 @@
{ id: 'sop', title: 'SOP Configuration', body: `
<h3>SOP Configuration (10 steps)</h3>
<p>The SOP is the project baseline. Walk the 10 steps with <strong>← Back</strong> / <strong>Next →</strong>, or jump using the step indicators. The final step is <strong>✓ SOP Complete</strong> — saving it unlocks the Work Package Creator and turns the home-page card green.</p>
<p>The SOP is the project baseline. Walk the 10 steps with <strong>← Back</strong> / <strong>Next →</strong>, or jump using the step indicators. The final step is <strong>✓ SOP complete</strong> — saving it unlocks the Work Package Creator and turns the home-page card green.</p>
<ol>
<li><strong>Project Basics</strong> — name, number, client, division/sector, site. Inherited by every WP.</li>
<li><strong>Project Team Leadership</strong> — PM, APM, CM, QM, plus any additional members (<em>+ Add Team Member</em>).</li>
@@ -240,8 +240,8 @@
{ id: 'data', title: 'Samples, sharing & comments', body: `
<h3>Samples, import / export &amp; comments</h3>
<h4>Load Sample</h4>
<p><strong>⭐ Load Sample</strong> is context-aware: on the SOP tab it loads a complete sample SOP; on the WP tab it loads an example Work Package. Great for learning the tool or demoing.</p>
<h4>Load sample</h4>
<p><strong>⭐ Load sample</strong> is context-aware: on the SOP tab it loads a complete sample SOP; on the WP tab it loads an example Work Package. Great for learning the tool or demoing.</p>
<h4>Import / Export</h4>
<ul>
<li><strong>Work Packages</strong> — <em>⤓ Export (JSON)</em> downloads all saved packages; import restores them.</li>
@@ -289,7 +289,7 @@
{ id: 'faq', title: 'FAQ', body: `
<h3>Frequently asked questions</h3>
<h4>The Work Package Creator is locked — why?</h4>
<p>The SOP for the active project isn't complete yet. Finish SOP Configuration and click <strong>✓ SOP Complete</strong> on the last step; the Creator unlocks and the home card turns green.</p>
<p>The SOP for the active project isn't complete yet. Finish SOP Configuration and click <strong>✓ SOP complete</strong> on the last step; the Creator unlocks and the home card turns green.</p>
<h4>Why can't I set a package to Issued?</h4>
<p>At least one constraint is still <strong>Open</strong>. Clear or mark N/A every constraint — the release banner turns green — and the suite will offer to issue it.</p>
<h4>My package's materials didn't all carry over when I split it.</h4>

View File

@@ -122,8 +122,10 @@
.card.complete {
border-left-color: var(--cds-support-success);
}
.card.complete .card-button { background: var(--cds-support-success); }
.card.complete .card-button:hover { background: var(--wp-hover-success); }
/* A5: the card-button stays primary when the SOP completes. The completion
is still said, twice — the card's left border turns green and .card-status
appears — which is green doing its job as a status rather than as an
action colour. */
.card-status {
display: inline-block;
font-size: 12px;
@@ -350,42 +352,42 @@
<a href="work-package-suite.html?tab=sop" class="card" id="card-sop">
<h3>SOP Configuration</h3>
<p>Define the project baseline in 10 steps — team, sign-offs, WP types, governance, quality, platforms, sequence, constraints, and sources. Every Work Package inherits these defaults.</p>
<button class="card-button" id="card-sop-btn">Open Tool</button>
<button class="card-button" id="card-sop-btn">Open tool</button>
</a>
<!-- WP CREATOR -->
<a href="work-package-suite.html?tab=wp" class="card" id="card-wp">
<h3>Work Package Creator</h3>
<p>Author individual Work Packages against the project SOP — pre-populated defaults, constraint checklists, and exportable IWPs. Complete the SOP first to unlock.</p>
<button class="card-button" id="card-wp-btn">Open Tool</button>
<button class="card-button" id="card-wp-btn">Open tool</button>
</a>
<!-- WP DASHBOARD -->
<a href="work-package-suite.html?view=dashboard" class="card" id="card-dash">
<h3>Work Package Dashboard</h3>
<p>Track status and gating across every Work Package — release-readiness, on-hold packages, overdue work, hours, and breakdowns by status and discipline. Issue release-ready packages in one click.</p>
<button class="card-button" id="card-dash-btn">Open Dashboard</button>
<button class="card-button" id="card-dash-btn">Open dashboard</button>
</a>
<!-- FIELD VIEW -->
<a href="field.html" class="card" id="card-field">
<h3>Field View</h3>
<p>A phone-friendly view for the work face — update status, clear constraints, and log photos and notes. Installable to a home screen; works offline and syncs when you're back on network.</p>
<button class="card-button" id="card-field-btn">Open Field View</button>
<button class="card-button" id="card-field-btn">Open field view</button>
</a>
<!-- USER DIRECTORY -->
<a href="users.html" class="card" id="card-users">
<h3>User Directory</h3>
<p>Who is on this project — names, job functions and how to reach them. Administrators and Project Super Users also create accounts, set permissions and grant project access from here.</p>
<button class="card-button" id="card-users-btn">Open Directory</button>
<button class="card-button" id="card-users-btn">Open directory</button>
</a>
</div>
<!-- COMMENTS SECTION -->
<div class="comments-section" id="comments">
<button class="comments-toggle" onclick="toggleComments()">Leave Feedback</button>
<button class="comments-toggle" onclick="toggleComments()">Leave feedback</button>
<div class="comments-panel" id="comments-panel">
<div style="margin-bottom: 1rem;">
<label style="font-weight: 600; font-size: 13px; color: var(--cds-text-primary);">Name (optional)</label>
@@ -473,7 +475,7 @@
<label>Site / Location<input type="text" id="np_site" placeholder="e.g. Boise, ID — Fab"></label>
</div>
<div class="proj-actions">
<button class="card-button" onclick="saveNewProject()">Create &amp; Select</button>
<button class="card-button" onclick="saveNewProject()">Create &amp; select</button>
<button class="close-btn" onclick="hideCreateProject()">Cancel</button>
</div>
</div>`;
@@ -486,8 +488,8 @@
box.innerHTML = `<div class="proj-empty">
<p>No projects yet. Create your first project, or start from a sample.</p>
<div class="proj-actions">
<button class="card-button" onclick="showCreateProject()">+ Create Project</button>
<button class="close-btn" onclick="useSampleProject()">Use Sample Project</button>
<button class="card-button" onclick="showCreateProject()">+ Create project</button>
<button class="close-btn" onclick="useSampleProject()">Use sample project</button>
</div>
</div>` + createFormHtml();
return;

View File

@@ -279,6 +279,48 @@
--wp-dev-fg: #ffd479;
--wp-dev-rule: #ffb000;
/* -- button roles (A5) -----------------------------------------------------
Four roles and no fifth. Every button in the app is one of them, and the
class-to-role mapping is in docs/reference/tokens.md section 12.
primary the one action this screen exists for. Filled accent. At most one
per view.
secondary every other real action. White fill, --border-strong hairline,
accent on hover. This is the app's workhorse.
tertiary navigational or undoing. No fill, no border, accent text.
danger destructive. Outlined red by default; filled red only where the
control is small enough that an outline would not read (the ✕ on
a sequence row).
GREEN IS A STATUS COLOUR AND NEVER FILLS A BUTTON. It says cleared, ready,
complete — on a dot, a pill, a banner, a badge. Two buttons broke that rule
and are what A5 recorded: "SOP Complete" and "Save & View" shouted louder
than every other action in the suite while doing nothing more dangerous than
saving. They are primary now. The green did not go anywhere: the launcher
card still turns green when its SOP completes, on the border and the status
line, which is where a status belongs.
No value here is new — these are the fills the sheets already rendered,
given one definition so that "primary" means one thing. */
--wp-btn-primary-bg: var(--cds-interactive-01);
--wp-btn-primary-fg: var(--cds-text-on-color);
--wp-btn-primary-hover: var(--cds-hover-primary);
--wp-btn-primary-active: var(--cds-active-primary);
--wp-btn-secondary-bg: var(--cds-field);
--wp-btn-secondary-fg: var(--cds-text-primary);
--wp-btn-secondary-border: var(--cds-border-strong);
--wp-btn-secondary-hover-fg: var(--cds-interactive-01);
--wp-btn-tertiary-fg: var(--cds-interactive-01);
--wp-btn-tertiary-hover-fg: var(--cds-hover-primary-text);
--wp-btn-danger-fg: var(--cds-support-error);
--wp-btn-danger-border: var(--cds-support-error);
--wp-btn-danger-soft-bg: var(--wp-status-error-bg);
--wp-btn-danger-fill-bg: var(--cds-support-error);
--wp-btn-danger-fill-fg: var(--cds-text-on-color);
/* -- the second blue -------------------------------------------------------
#2563d6, not #0f62fe. Fills .sop-inherited — every field a work package
inherited from its SOP — at 7% alpha, which is why nobody has noticed a

View File

@@ -693,7 +693,7 @@ function renderWPTypes(){
});
const addRow = document.createElement('div');
addRow.style.cssText = 'margin-top:0.85rem;';
addRow.innerHTML = `<button onclick="addCustomWPType()" style="background:var(--primary,#0f62fe); color:#fff; border:none; padding:0.55rem 1rem; border-radius:4px; font-weight:600; cursor:pointer; font-size:13px;">+ Add Custom Type</button>`;
addRow.innerHTML = `<button onclick="addCustomWPType()" style="background:var(--primary,#0f62fe); color:#fff; border:none; padding:0.55rem 1rem; border-radius:4px; font-weight:600; cursor:pointer; font-size:13px;">+ Add custom type</button>`;
container.appendChild(addRow);
}

View File

@@ -491,11 +491,12 @@ body.embed-full { overflow: hidden; }
margin-bottom: 0.5rem;
}
/* BUTTONS */
/* BUTTONS — roles are documented in docs/reference/tokens.md section 12 (A5) */
/* primary */
.add-btn {
padding: 0.7rem 1.25rem;
background: var(--primary);
color: var(--cds-text-on-color);
background: var(--wp-btn-primary-bg);
color: var(--wp-btn-primary-fg);
border: none;
border-radius: 0;
font-size: 14px;
@@ -504,29 +505,33 @@ body.embed-full { overflow: hidden; }
transition: background 0.2s;
}
.add-btn:hover { background: var(--cds-hover-primary); }
.add-btn:hover { background: var(--wp-btn-primary-hover); }
/* secondary */
.nav-btn {
padding: 0.7rem 1.4rem;
background: var(--bg-card);
border: 1px solid var(--border-strong);
background: var(--wp-btn-secondary-bg);
border: 1px solid var(--wp-btn-secondary-border);
border-radius: 0;
font-size: 14px;
font-weight: 600;
color: var(--text);
color: var(--wp-btn-secondary-fg);
cursor: pointer;
transition: all 0.15s;
}
.nav-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--bg); }
.nav-btn:hover { border-color: var(--wp-btn-secondary-hover-fg); color: var(--wp-btn-secondary-hover-fg); background: var(--bg); }
/* A5: this was green — the loudest control in the suite, on a button whose job
is to save a form. The completion it announced is still announced, on the
launcher card's border and status line, which is where a status belongs. */
.nav-btn.primary {
background: var(--success);
color: var(--cds-text-on-color);
border-color: var(--success);
background: var(--wp-btn-primary-bg);
color: var(--wp-btn-primary-fg);
border-color: var(--wp-btn-primary-bg);
}
.nav-btn.primary:hover { background: var(--wp-hover-success); border-color: var(--wp-hover-success); color: var(--cds-text-on-color); }
.nav-btn.primary:hover { background: var(--wp-btn-primary-hover); border-color: var(--wp-btn-primary-hover); color: var(--wp-btn-primary-fg); }
.nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -584,8 +589,9 @@ body.embed-full { overflow: hidden; }
/* Fill only — the ring itself is the shared rule above, which this used to opt out
of entirely with a bare `outline: none`. */
.seq-step input.seq-label:focus { background: var(--bg); }
/* danger, filled: a 28px square is too small for an outline to read */
.seq-del {
background: var(--danger); color: var(--cds-text-on-color); border: none; border-radius: 4px;
background: var(--wp-btn-danger-fill-bg); color: var(--wp-btn-danger-fill-fg); border: none; border-radius: 4px;
width: 28px; height: 28px; cursor: pointer; font-weight: 600; flex-shrink: 0;
}
.seq-arrow { text-align: center; color: var(--text-dim); font-size: 13px; line-height: .4; margin: -2px 0; }

View File

@@ -30,7 +30,7 @@
</div>
</div>
<div class="header-right">
<button id="load-sample-btn" class="header-button" onclick="loadSampleData()" title="Load sample data for the current tool (SOP or Work Package)">Load Sample</button>
<button id="load-sample-btn" class="header-button" onclick="loadSampleData()" title="Load sample data for the current tool (SOP or Work Package)">Load sample</button>
<button class="header-button" onclick="toggleComments()" title="Leave feedback for the current step">Feedback</button>
<button class="header-button" onclick="openHelp()" title="How the suite works + key concepts">Help</button>
<span class="step-counter"><span id="current-step">1</span> / <span id="total-steps">10</span></span>
@@ -83,23 +83,23 @@
<div class="notice">Define the core project information that will be inherited by all Work Packages.</div>
<div class="field-grid">
<div class="field">
<label>Project Name *</label>
<label>Project name *</label>
<input type="text" id="proj_name" placeholder="e.g., Micron — INC Construction Work Packages" oninput="updateProjectDisplay()">
</div>
<div class="field">
<label>Project Number *</label>
<label>Project number *</label>
<input type="text" id="proj_number" placeholder="e.g., 26-67-008">
</div>
<div class="field">
<label>Client Name *</label>
<label>Client name *</label>
<input type="text" id="proj_client" placeholder="e.g., Micron Technology, Inc.">
</div>
<div class="field">
<label>Division / Sector *</label>
<label>Division / sector *</label>
<input type="text" id="proj_division" placeholder="e.g., Semiconductor, Oil & Gas, Data Center">
</div>
<div class="field">
<label>Site Location *</label>
<label>Site location *</label>
<input type="text" id="proj_site" placeholder="e.g., Boise, ID — Fab 7">
</div>
</div>
@@ -115,27 +115,27 @@
<div id="team-accounts-warn" class="notice" style="display:none; background:var(--warning-bg); color:var(--warning);"></div>
<div class="field-grid">
<div class="field">
<label>Project Manager (PM)</label>
<label>Project manager (PM)</label>
<select id="proj_pm" class="team-pick" data-team="pm"></select>
</div>
<div class="field">
<label>Assistant Project Manager (APM)</label>
<label>Assistant project manager (APM)</label>
<select id="proj_apm" class="team-pick" data-team="apm"></select>
</div>
<div class="field">
<label>Construction Manager (CM)</label>
<label>Construction manager (CM)</label>
<select id="proj_cm" class="team-pick" data-team="cm"></select>
<div class="field-hint">Kept on the distribution list of every work package by default.</div>
</div>
<div class="field">
<label>Quality Manager (QM)</label>
<label>Quality manager (QM)</label>
<select id="proj_qm" class="team-pick" data-team="qm"></select>
</div>
</div>
<div style="margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem;">
<div class="sub-heading">Additional Team Members (optional)</div>
<div id="team-members-list" style="margin-top: 1rem;"></div>
<button class="add-btn" onclick="addTeamMember()">+ Add Team Member</button>
<button class="add-btn" onclick="addTeamMember()">+ Add team member</button>
</div>
</div>
@@ -162,7 +162,7 @@
<div style="margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1.5rem;">
<div class="sub-heading">Optional Additional Roles</div>
<div id="optional-roles-list" style="margin-top: 1rem;"></div>
<button class="add-btn" onclick="addOptionalRole()">+ Add Role</button>
<button class="add-btn" onclick="addOptionalRole()">+ Add role</button>
</div>
</div>
@@ -174,7 +174,7 @@
<label id="bim-toggle-wrap" style="display:flex; align-items:flex-start; gap:0.6rem; padding:0.85rem 1rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; margin:0 0 1rem; cursor:pointer;">
<input type="checkbox" id="bim_enabled" onchange="setBimEnabled(this.checked)" style="width:18px; height:18px; margin-top:2px; flex:none;">
<span><strong>Include BIM / VDC work packages on this project</strong><br>
<span style="color:var(--text-dim); font-size:12px;">Adds model/engineering package types &amp; release gates. In the Creator each package is then tagged <strong>Install (IWP)</strong> or <strong>BIM (EWP)</strong>, so the project can flow from BIM into construction. Leave off for install-only projects.</span></span>
<span style="color:var(--text-dim); font-size:12px;">adds model/engineering package types &amp; release gates. in the creator each package is then tagged <strong>install (IWP)</strong> or <strong>BIM (EWP)</strong>, so the project can flow from BIM into construction. leave off for install-only projects.</span></span>
</label>
<!-- Shown instead of the toggle when an admin has the BIM tooling switched off app-wide. -->
<div id="bim-disabled-note" class="notice" style="display:none; background:var(--warning-bg); color:var(--warning);"></div>
@@ -187,12 +187,12 @@
<div class="notice">Define how Work Packages are formatted, sized, and issued on this project. The choices here decide how the Work Package Creator behaves for every package.</div>
<div class="field-grid">
<div class="field">
<label>Work Package Number Format *</label>
<label>Work package number format *</label>
<input type="text" id="gov_woformat" placeholder="e.g., WP##-[Sector]-[TYPE]">
<small>Use ## for counter, [Sector] [TYPE] as variables</small>
</div>
<div class="field">
<label>Issuance Strategy<span class="help-tip" data-tip="How Work Packages are grouped and released on this project. Pick one or more — most projects combine 'By Sector / Area' with 'By Phase / Sequence'.">i</span></label>
<label>Issuance strategy<span class="help-tip" data-tip="How Work Packages are grouped and released on this project. Pick one or more — most projects combine 'By Sector / Area' with 'By Phase / Sequence'.">i</span></label>
<select id="gov_issuance" multiple size="4">
<option selected>By Sector / Area</option>
<option>By Discipline</option>
@@ -235,7 +235,7 @@
<div class="notice">A Work Package should be a manageable, trackable chunk of work — typically a 12 week assignment. The Creator warns the planner when a package exceeds the ceiling so it can be broken down.</div>
<div class="field-grid">
<div class="field">
<label>Typical WP Size</label>
<label>Typical WP size</label>
<select id="gov_wosize" onchange="onSizePresetChange()">
<option value="">Select…</option>
<option value="Small — 12 days (≈824 hrs)">Small — 12 days (≈824 hrs)</option>
@@ -259,7 +259,7 @@
<div class="notice">Establish project-wide quality expectations that cascade to every Work Package.</div>
<div class="field-grid col1">
<div class="field">
<label>QC Required? *</label>
<label>QC required? *</label>
<select id="qual_qcreq">
<option>Yes</option>
<option>Yes — Detailed inspection items</option>
@@ -268,7 +268,7 @@
</select>
</div>
<div class="field">
<label>Photo / Documentation Standard</label>
<label>Photo / documentation standard</label>
<select id="qual_photo">
<option selected>Key checkpoints only</option>
<option>Every step documented</option>
@@ -277,7 +277,7 @@
</select>
</div>
<div class="field">
<label>Hold Points & Witness Requirements</label>
<label>Hold points & witness requirements</label>
<textarea id="qual_hold" rows="3" placeholder="e.g., HOLD: Prime QAQC to inspect rough-in before cover/cover-up. WITNESS: client QC to observe megger test before energization."></textarea>
</div>
</div>
@@ -289,7 +289,7 @@
<div class="notice">Select the tools used for construction tracking and commissioning. These can be the same or different systems.</div>
<div class="field-grid">
<div class="field">
<label>Construction Tracking Platform *</label>
<label>Construction tracking platform *</label>
<select id="plat_tracking">
<option>CxAlloy</option>
<option>Procore</option>
@@ -298,7 +298,7 @@
</select>
</div>
<div class="field">
<label>Commissioning Tool *</label>
<label>Commissioning tool *</label>
<select id="plat_commissioning">
<option selected>CxAlloy</option>
<option>Procore</option>
@@ -326,8 +326,8 @@
<div id="sequence-list" style="margin-top: 1rem;"></div>
<div style="display:flex; gap:0.5rem; margin-top:1rem; flex-wrap:wrap;">
<input type="text" id="seq-add-input" placeholder="New step name" onkeydown="if(event.key==='Enter'){addSequenceStep();}" style="flex:1; min-width:200px; padding:0.5rem; border:1px solid var(--border); border-radius:4px;">
<button class="add-btn" onclick="addSequenceStep()">+ Add Step</button>
<button class="add-btn" onclick="addSequenceGate()" style="background:var(--warning);">Add QC Hold</button>
<button class="add-btn" onclick="addSequenceStep()">+ Add step</button>
<button class="add-btn" onclick="addSequenceGate()" style="background:var(--warning);">Add QC hold</button>
</div>
</div>
@@ -342,7 +342,7 @@
<div style="border-top: 1px solid var(--border); padding-top: 1.5rem;">
<div class="sub-heading">Custom Constraints (Optional)</div>
<div id="custom-constraints-list" style="margin-top: 1rem;"></div>
<button class="add-btn" onclick="showConstraintLibrary()">+ Add Custom Constraint</button>
<button class="add-btn" onclick="showConstraintLibrary()">+ Add custom constraint</button>
</div>
</div>
@@ -351,7 +351,7 @@
<h2>10. Engineering Sources & References</h2>
<div class="notice">Link to key documents and systems that WP authors will reference.</div>
<div id="sources-list" style="margin-top: 1rem;"></div>
<button class="add-btn" onclick="addSource()">+ Add Source</button>
<button class="add-btn" onclick="addSource()">+ Add source</button>
</div>
</div>
@@ -360,7 +360,7 @@
<div class="step-navigation">
<button class="nav-btn" id="sop-prev-btn" onclick="previousStep()">Back</button>
<button class="nav-btn" id="sop-next-btn" onclick="nextStep()">Next</button>
<button class="nav-btn primary" id="sop-complete-btn" onclick="completeSOP()" style="display: none;">SOP Complete</button>
<button class="nav-btn primary" id="sop-complete-btn" onclick="completeSOP()" style="display: none;">SOP complete</button>
</div>
</div>
@@ -373,7 +373,7 @@
<div id="wp-gate" style="padding: 3rem 2rem; text-align: center;">
<h2>Work Package Creation</h2>
<p style="color: var(--text-light); margin: 1rem 0;">Complete the SOP Configuration first to enable Work Package creation. Once the SOP is finished, the full creator loads here with your project defaults pre-populated.</p>
<button class="nav-btn primary" onclick="switchTool('sop')" style="margin-top: 1rem;">Go to SOP Configuration</button>
<button class="nav-btn primary" onclick="switchTool('sop')" style="margin-top: 1rem;">Go to SOP configuration</button>
</div>
<!-- The real Work Package Creator, embedded once the SOP is complete -->
<!-- Sizing stays INLINE on purpose. An iframe with no width/height falls back
@@ -396,7 +396,7 @@
<button onclick="toggleComments()" class="comments-dropdown-close" title="Close"></button>
</div>
<div style="margin-bottom: 1rem;">
<label style="font-weight: 600; font-size: 13px;">Your Name</label>
<label style="font-weight: 600; font-size: 13px;">Your name</label>
<input type="text" id="commenter-name" placeholder="(signed-in user)" readonly title="Taken from your sign-in" style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: 0.25rem; background: var(--bg);">
</div>
<div style="margin-bottom: 1rem;">

View File

@@ -726,7 +726,7 @@ function buildScopeGroups(){
<div class="disc-scope-head"><span class="disc-tag">${esc(d)}</span>
<span class="disc-status">Status: <select onchange="setDiscStatus('${esc(d)}',this.value)">${opts}</select></span></div>
${rows}
<button class="add-btn" onclick="addScopeStep('${esc(d)}')">+ Add ${esc(d)} Step</button>
<button class="add-btn" onclick="addScopeStep('${esc(d)}')">+ Add ${esc(d)} step</button>
</div>`;
}).join('');
}

View File

@@ -35,13 +35,13 @@
<input type="file" id="sop-import" accept="application/json" style="display:none" onchange="importSOP(event)">
<button class="btn btn-ghost embed-hide" style="padding:7px 16px" onclick="loadSampleSOP()">⤓ Sample SOP</button>
<button class="btn btn-ghost embed-hide" style="padding:7px 16px" onclick="openSopModal()">👁 View SOP</button>
<button class="btn btn-ghost embed-hide" style="padding:7px 16px" onclick="loadExample()">★ Load Example</button>
<button class="btn btn-ghost embed-hide" style="padding:7px 16px" onclick="loadExample()">★ Load example</button>
<button class="btn btn-ghost embed-hide" style="padding:7px 16px" onclick="showDashboard()">📊 Dashboard</button>
<button class="btn btn-ghost embed-first" style="padding:7px 16px" onclick="newPackage()">+ New</button>
<button class="btn btn-ghost" style="padding:7px 16px" onclick="duplicateWP()">⧉ Duplicate</button>
<button class="btn btn-ghost" style="padding:7px 16px" onclick="showHistoryCurrent()" title="Change history for this work package">🕘 History</button>
<button class="btn btn-ghost embed-hide" id="comments-btn" style="padding:7px 16px" onclick="toggleComments()">💬 Comments <span class="cbadge-total" id="cbadge-total" style="display:none">0</span></button>
<button class="btn btn-ghost embed-hide" style="padding:7px 16px" onclick="showAnalytics()">▤ Usage Data</button>
<button class="btn btn-ghost embed-hide" style="padding:7px 16px" onclick="showAnalytics()">▤ Usage data</button>
</div>
<div class="dev-banner" id="dev-banner" style="display:none">⚙ DEV MODE — usage tracking paused. This session's actions are not being recorded.</div>
@@ -131,14 +131,14 @@
<div class="section-header"><div class="section-title">General Information</div>
<div class="section-desc">Parameters in <span style="color:var(--accent)">blue</span> are inherited from the project SOP. Fill the rest for this package.</div></div>
<div class="field-grid">
<div class="field"><label>WP Number <span class="auto-tag">auto</span><span class="help-tip" data-tip="Built automatically from the SOP number format — the scope fields below (e.g. Sector) plus the WP type and a sequence counter.">i</span></label><input type="text" id="wp_number" readonly class="locked-field" placeholder="auto-built"><div class="field-hint sop-hint" id="wp_number_hint"></div></div>
<div class="field"><label>WP number <span class="auto-tag">auto</span><span class="help-tip" data-tip="Built automatically from the SOP number format — the scope fields below (e.g. Sector) plus the WP type and a sequence counter.">i</span></label><input type="text" id="wp_number" readonly class="locked-field" placeholder="auto-built"><div class="field-hint sop-hint" id="wp_number_hint"></div></div>
<div class="field"><label>Status</label>
<div class="radio-group" id="status-group" style="margin-bottom:0">
<label class="radio-pill" data-val="Draft"><input type="radio" name="status"><span class="dot"></span>Draft</label>
<label class="radio-pill" data-val="Scheduled"><input type="radio" name="status"><span class="dot"></span>Scheduled</label>
<label class="radio-pill" data-val="Issued"><input type="radio" name="status"><span class="dot"></span>Issued</label>
<label class="radio-pill" data-val="In Progress"><input type="radio" name="status"><span class="dot"></span>In Progress</label>
<label class="radio-pill pill-hold" data-val="Issue"><input type="radio" name="status"><span class="dot"></span>Issue (Hold)</label>
<label class="radio-pill" data-val="In Progress"><input type="radio" name="status"><span class="dot"></span>In progress</label>
<label class="radio-pill pill-hold" data-val="Issue"><input type="radio" name="status"><span class="dot"></span>Issue (hold)</label>
<label class="radio-pill" data-val="QC"><input type="radio" name="status"><span class="dot"></span>QC</label>
<label class="radio-pill" data-val="Closed"><input type="radio" name="status"><span class="dot"></span>Closed</label>
</div>
@@ -147,13 +147,13 @@
</div>
<div class="notice">WP number builds automatically from these scope fields + the WP type (per the SOP naming format):</div>
<div class="field-grid" id="number-dims"></div>
<div class="field field-grid col1"><div class="field"><label>Subject / Title <span class="req">*</span></label><input type="text" id="wp_subject" placeholder="e.g. Utility Level 2P Inert Gas Room Wall Mount Midas/ Rack"></div></div>
<div class="field field-grid col1"><div class="field"><label>Subject / title <span class="req">*</span></label><input type="text" id="wp_subject" placeholder="e.g. Utility Level 2P Inert Gas Room Wall Mount Midas/ Rack"></div></div>
<div class="field-grid">
<div class="field"><label>WP Type <span class="req">*</span></label><select id="wp_type" onchange="onTypeChange()"></select><div class="field-hint sop-hint">from SOP types</div></div>
<div class="field"><label>System / Facility Code / UPN</label><input type="text" id="wp_system" placeholder="ties to controls.dev / COIN"></div>
<div class="field"><label>WP type <span class="req">*</span></label><select id="wp_type" onchange="onTypeChange()"></select><div class="field-hint sop-hint">from SOP types</div></div>
<div class="field"><label>System / facility code / UPN</label><input type="text" id="wp_system" placeholder="ties to controls.dev / COIN"></div>
<div class="field"><label>Location</label><input type="text" id="wp_location" placeholder="building / level / sector / room"></div>
<div class="field"><label>Cost Code</label><select id="wp_cost"></select><div class="field-hint sop-hint">Acumatica cost codes</div></div>
<div class="field"><label>Acumatica Task</label><input type="text" id="wp_wbs" placeholder="Acumatica task no."></div>
<div class="field"><label>Cost code</label><select id="wp_cost"></select><div class="field-hint sop-hint">Acumatica cost codes</div></div>
<div class="field"><label>Acumatica task</label><input type="text" id="wp_wbs" placeholder="Acumatica task no."></div>
</div>
<div class="field-grid">
<div class="field"><label>Owner <span class="help-tip" data-tip="The accountable owner (a user account on this project). Assigning notifies them by email if email notifications are enabled in the admin console.">i</span></label><select id="wp_assignee"><option value="">— Unassigned —</option></select></div>
@@ -163,8 +163,8 @@
<div class="field"><label>Distribution<span class="help-tip" data-tip="Who gets notified about this package. The project's Construction Manager is included by default and can be removed per package.">i</span></label>
<div class="people-pick" id="pick_distribution"></div>
<input type="hidden" id="wp_distribution"></div>
<div class="field"><label>Due Date</label><input type="date" id="wp_due"></div>
<div class="field"><label>Specification Section</label>
<div class="field"><label>Due date</label><input type="date" id="wp_due"></div>
<div class="field"><label>Specification section</label>
<input type="text" id="wp_spec" readonly class="locked-field" placeholder="set on the WP type in the SOP">
<div class="field-hint" id="spec-folder-link"></div></div>
</div>
@@ -177,13 +177,13 @@
<div class="sub-heading">BIM / Model Details</div>
<div class="notice">For BIM/VDC work packages — the model deliverable's level of detail, area, source scan, and coordination status.</div>
<div class="field-grid">
<div class="field"><label>Model Area / Zone</label><input type="text" id="wp_model_area" placeholder="e.g. Fab 09 Subfab — Level 2"></div>
<div class="field"><label>Clash / Coordination Status</label>
<div class="field"><label>Model area / zone</label><input type="text" id="wp_model_area" placeholder="e.g. Fab 09 Subfab — Level 2"></div>
<div class="field"><label>Clash / coordination status</label>
<select id="wp_clash" onchange="onClashChange()"><option value=""></option><option>Not started</option><option>In coordination</option><option>Clashes open</option><option>Clash-free</option><option>Signed off (IFF)</option></select></div>
<div class="field"><label>IFF #<span class="help-tip" data-tip="Issued-For-Fabrication/Field number — the GC sign-off reference for this model package. Required once the coordination status is Signed off (IFF).">i</span></label>
<input type="text" id="wp_iff" placeholder="e.g. IFF-2026-0142" oninput="onClashChange()">
<div class="field-hint" id="iff-hint"></div></div>
<div class="field"><label>Linked Scan / Point Cloud</label><input type="url" id="wp_scan_link" placeholder="WebShare / BIM360 / SharePoint link"></div>
<div class="field"><label>Linked scan / point cloud</label><input type="url" id="wp_scan_link" placeholder="WebShare / BIM360 / SharePoint link"></div>
</div>
</div>
@@ -192,7 +192,7 @@
<div class="sub-heading">Assets</div>
<div class="notice">Every work package is based on one or more assets managed in <strong>controls.dev</strong>. Paste the controls.dev link for each asset this package covers. <span style="color:var(--text-dim)">A direct integration to pick assets from a list is planned — for now, link them manually.</span></div>
<div class="table-wrap"><table><thead><tr><th style="width:200px">Asset Tag / ID</th><th>Description</th><th>controls.dev Link <span class="req">*</span></th><th style="width:44px"></th></tr></thead><tbody id="asset-body"></tbody></table></div>
<button class="add-btn" onclick="addAsset()">+ Add Asset</button>
<button class="add-btn" onclick="addAsset()">+ Add asset</button>
</div>
<!-- DISCIPLINES -->
@@ -206,16 +206,16 @@
<div class="card">
<div class="sub-heading">Scope & Work<span class="help-tip" data-tip="Ordered steps the crew performs. With multiple disciplines selected, each gets its own scope section and status. Use Split by Discipline to break a large package into WP01A / WP01B / WP01C instances.">i</span></div>
<div id="flat-scope">
<div class="field"><label>Description of Work (sequenced steps)</label>
<div class="field"><label>Description of work (sequenced steps)</label>
<div class="notice">Enter the work as ordered steps — added in sequence, the way the crew performs them.</div>
<div id="worksteps-body"></div>
<button class="add-btn" onclick="addWorkStep()">+ Add Step</button>
<button class="add-btn" onclick="addWorkStep()">+ Add step</button>
</div>
</div>
<div id="scope-by-discipline" style="display:none"></div>
<button class="btn btn-ghost" id="split-disc-btn" style="display:none;margin-top:10px" onclick="splitByDiscipline()" title="Break this multi-discipline package into one numbered instance per discipline">⎘ Split by Discipline</button>
<button class="btn btn-ghost" id="split-disc-btn" style="display:none;margin-top:10px" onclick="splitByDiscipline()" title="Break this multi-discipline package into one numbered instance per discipline">⎘ Split by discipline</button>
<div class="field-grid" style="margin-top:14px">
<div class="field"><label>Labor Est. Hrs.</label><input type="number" id="wp_hours" min="0" step="1" placeholder="e.g. 20" oninput="onHoursChange()"><div class="field-hint" id="size-check"></div></div>
<div class="field"><label>Labor est. hrs.</label><input type="number" id="wp_hours" min="0" step="1" placeholder="e.g. 20" oninput="onHoursChange()"><div class="field-hint" id="size-check"></div></div>
<div class="field"><label>Predecessor work packages<span class="help-tip" data-tip="The packages that must be Closed before this one can be released. A package with an open predecessor is not release-ready — you can still release it, but the override is logged.">i</span></label>
<div class="people-pick" id="pick_predecessors"></div>
<div class="field-hint" id="pred-hint"></div></div>
@@ -230,9 +230,9 @@
<div class="notice">Structured bill of materials. Feeds kitting and the delivery forecast. Unit is from the Acumatica unit list.</div>
<div class="table-wrap"><table><thead><tr><th style="width:90px">Qty</th><th style="width:120px">Unit</th><th>Description</th><th id="mat-disc-th" style="width:140px;display:none">Discipline</th><th style="width:44px"></th></tr></thead><tbody id="material-body"></tbody></table></div>
<div class="material-actions">
<button class="add-btn" onclick="addMaterial()">+ Add Material Line</button>
<button class="add-btn" onclick="addMaterial()">+ Add material line</button>
<button class="add-btn" onclick="document.getElementById('material-import').click()">⤒ Import from Excel/CSV</button>
<button class="add-btn" onclick="downloadMaterialTemplate()">⤓ Download Template</button>
<button class="add-btn" onclick="downloadMaterialTemplate()">⤓ Download template</button>
<input type="file" id="material-import" accept=".csv,.xlsx,.xls" style="display:none" onchange="importMaterials(event)">
</div>
</div>
@@ -242,7 +242,7 @@
<div class="sub-heading">Drawings & Attachments</div>
<div id="sop-ref-links" class="sop-ref-links"></div>
<div class="table-wrap"><table><thead><tr><th>Document / Drawing</th><th style="width:90px">Rev</th><th>Link / Note</th><th style="width:44px"></th></tr></thead><tbody id="attach-body"></tbody></table></div>
<button class="add-btn" onclick="addAttach()">+ Add Document</button>
<button class="add-btn" onclick="addAttach()">+ Add document</button>
<button class="add-btn" onclick="toggleSopFilePanel()">+ Add files from SOP folder</button>
<div id="sop-file-panel" style="display:none; margin-top:0.75rem; padding:0.75rem; border:1px dashed var(--border); border-radius:6px; background:var(--bg);">
<div id="sop-file-folders"></div>
@@ -259,12 +259,12 @@
<div class="card" id="mimo-card">
<div class="sub-heading">Kitting & Material Movement (MIMO)</div>
<div class="field-grid">
<div class="field"><label>Kitting Status</label>
<div class="field"><label>Kitting status</label>
<select id="wp_kit_status"><option value=""></option><option>Open</option><option>In Progress</option><option>Kitted</option><option>Delivered</option></select></div>
<div class="field"><label>Warehouse Owner</label><input type="text" id="wp_kit_owner" placeholder="name"></div>
<div class="field"><label>Kitting Need Date</label><input type="date" id="wp_kit_date"></div>
<div class="field"><label>MIMO Sch. Time</label><input type="datetime-local" id="wp_mimo_time"><div class="field-hint">scheduled material-move date &amp; time</div></div>
<div class="field"><label>MIMO Location</label><input type="text" id="wp_mimo_loc" placeholder="staging / move location"></div>
<div class="field"><label>Warehouse owner</label><input type="text" id="wp_kit_owner" placeholder="name"></div>
<div class="field"><label>Kitting need date</label><input type="date" id="wp_kit_date"></div>
<div class="field"><label>MIMO sch. time</label><input type="datetime-local" id="wp_mimo_time"><div class="field-hint">scheduled material-move date &amp; time</div></div>
<div class="field"><label>MIMO location</label><input type="text" id="wp_mimo_loc" placeholder="staging / move location"></div>
</div>
</div>
@@ -279,12 +279,12 @@
<div class="card">
<div class="sub-heading">Quality, Inspection & Hold Points</div>
<div class="field-grid">
<div class="field"><label>QC Required</label><input type="text" id="wp_qc" placeholder="from SOP" readonly>
<div class="field"><label>QC required</label><input type="text" id="wp_qc" placeholder="from SOP" readonly>
<div class="lock-row"><button type="button" class="lock-edit" onclick="editQuality('wp_qc')">🔒 Edit (reason required)</button><span class="override-note"></span></div></div>
<div class="field"><label>Photo Documentation</label><input type="text" id="wp_photo" placeholder="from SOP" readonly>
<div class="field"><label>Photo documentation</label><input type="text" id="wp_photo" placeholder="from SOP" readonly>
<div class="lock-row"><button type="button" class="lock-edit" onclick="editQuality('wp_photo')">🔒 Edit (reason required)</button><span class="override-note"></span></div></div>
</div>
<div class="field field-grid col1"><div class="field"><label>Witness / Hold Points</label><textarea id="wp_hold" rows="2" readonly placeholder="from SOP"></textarea>
<div class="field field-grid col1"><div class="field"><label>Witness / hold points</label><textarea id="wp_hold" rows="2" readonly placeholder="from SOP"></textarea>
<div class="lock-row"><button type="button" class="lock-edit" onclick="editQuality('wp_hold')">🔒 Edit (reason required)</button><span class="override-note"></span></div>
<div class="field-hint">Inherited from the SOP. A <strong>Hold Point</strong> stops work until inspection sign-off; a <strong>Witness Point</strong> is offered for inspection but work may proceed if declined.</div></div></div>
</div>
@@ -301,23 +301,23 @@
<div class="sub-heading">Closeout</div>
<div class="notice">Completed at QC / Closed — captures as-built reality and lessons learned.</div>
<div class="field-grid">
<div class="field"><label>Actual Hrs.</label><input type="number" id="wp_actual_hrs" min="0" step="1"></div>
<div class="field"><label>Installed Quantity</label><input type="text" id="wp_installed_qty" placeholder="e.g. 42 of 42 tags"></div>
<div class="field"><label>Actual hrs.</label><input type="number" id="wp_actual_hrs" min="0" step="1"></div>
<div class="field"><label>Installed quantity</label><input type="text" id="wp_installed_qty" placeholder="e.g. 42 of 42 tags"></div>
</div>
<div class="field field-grid col1"><div class="field"><label>Redlines / As-Built Notes</label><textarea id="wp_redlines" rows="2"></textarea></div></div>
<div class="field field-grid col1"><div class="field"><label>Lessons Learned</label><textarea id="wp_lessons" rows="2"></textarea></div></div>
<div class="field field-grid col1"><div class="field"><label>Redlines / as-built notes</label><textarea id="wp_redlines" rows="2"></textarea></div></div>
<div class="field field-grid col1"><div class="field"><label>Lessons learned</label><textarea id="wp_lessons" rows="2"></textarea></div></div>
</div>
<div class="nav-row"><button class="btn btn-ghost" onclick="newPackage()">↺ Clear</button>
<div style="display:flex;gap:10px">
<button class="btn btn-ghost" onclick="savePackage(false)">Save Draft</button>
<button class="btn btn-generate" onclick="savePackage(true)">⚡ Save &amp; View</button>
<button class="btn btn-ghost" onclick="savePackage(false)">Save draft</button>
<button class="btn btn-generate" onclick="savePackage(true)">⚡ Save &amp; view</button>
</div></div>
<!-- DASHBOARD -->
<div id="dashboard-view" style="display:none">
<div class="output-toolbar">
<button class="btn btn-ghost" onclick="showForm()">← Back to Form</button>
<button class="btn btn-ghost" onclick="showForm()">← Back to form</button>
<div style="font-weight:700;font-size:15px">Work Package Dashboard</div>
<div style="display:flex;gap:10px;margin-left:auto">
<button class="btn btn-ghost" onclick="newPackage()">+ New WP</button>
@@ -332,8 +332,8 @@
<!-- OUTPUT -->
<div id="pkg-output" style="display:none">
<div class="output-toolbar">
<button class="btn btn-ghost" onclick="showForm()">← Back to Form</button>
<button class="btn btn-primary" onclick="printPackage()">⎙ Print / Save PDF</button>
<button class="btn btn-ghost" onclick="showForm()">← Back to form</button>
<button class="btn btn-primary" onclick="printPackage()">⎙ Print / save PDF</button>
<button class="btn btn-ghost" onclick="exportPackages()">⤓ Export (JSON)</button>
</div>
<div class="output-doc" id="pkg-doc"></div>
@@ -343,8 +343,8 @@
<div class="card" id="saved-card" style="display:none">
<div class="sub-heading">Saved Work Packages <span id="saved-count"></span></div>
<div class="table-wrap"><table><thead><tr><th>WP #</th><th>Type</th><th>Subject</th><th>Status</th><th style="width:110px">Ready?</th><th style="width:120px"></th></tr></thead><tbody id="saved-body"></tbody></table></div>
<button class="add-btn" onclick="exportPackages()">⤓ Export All (JSON)</button>
<button class="add-btn" onclick="clearSaved()">Clear All</button>
<button class="add-btn" onclick="exportPackages()">⤓ Export all (JSON)</button>
<button class="add-btn" onclick="clearSaved()">Clear all</button>
</div>
</div>
@@ -361,7 +361,7 @@
<div class="field"><label>Supporting document link</label><input type="text" id="hold-doclink" placeholder="link to RFI, photo, email, etc. (optional)"></div>
<div class="field"><label>Supporting photo</label><input type="file" id="hold-photo" accept="image/*" onchange="holdPhotoChange(event)"><div class="hold-photo-preview" id="hold-photo-preview"></div></div>
</div>
<div class="modal-foot"><button class="btn btn-ghost" onclick="cancelHold()">Cancel</button><button class="btn btn-generate" onclick="submitHold()">Log Hold</button></div>
<div class="modal-foot"><button class="btn btn-ghost" onclick="cancelHold()">Cancel</button><button class="btn btn-generate" onclick="submitHold()">Log hold</button></div>
</div>
</div>
@@ -381,12 +381,12 @@
<div class="cmt-namebar"><label>Your name</label><input type="text" id="cmt-author" placeholder="e.g. J. Park" oninput="cmtSaveAuthor(this.value)"></div>
<div class="cmt-compose"><div class="cmt-compose-label">Comment on <strong id="cmt-cur-step">this form</strong></div>
<textarea id="cmt-input" rows="3" placeholder="Add feedback…"></textarea>
<button class="btn btn-primary cmt-add" onclick="addComment()">Add Comment</button></div>
<button class="btn btn-primary cmt-add" onclick="addComment()">Add comment</button></div>
<div class="cmt-list" id="cmt-list"></div>
<div class="cmt-foot"><div class="cmt-note">Comments are saved in your browser. Use <strong>Export</strong> to send feedback back; the owner can <strong>Import</strong> each file.</div>
<div class="cmt-foot-btns"><button class="btn btn-ghost" onclick="exportComments()">⤓ Export</button>
<button class="btn btn-ghost" onclick="document.getElementById('cmt-import').click()">⤒ Import</button>
<button class="btn btn-ghost cmt-clear" onclick="clearMyComments()">Clear Mine</button>
<button class="btn btn-ghost cmt-clear" onclick="clearMyComments()">Clear mine</button>
<input type="file" id="cmt-import" accept="application/json" style="display:none" onchange="importComments(event)"></div></div>
</aside>
@@ -394,8 +394,8 @@
<div class="sticky-save" id="sticky-save" style="display:none">
<span class="sticky-status" id="sticky-status"></span>
<div class="sticky-actions">
<button class="btn btn-ghost" onclick="savePackage(false)">Save Draft</button>
<button class="btn btn-generate" onclick="savePackage(true)">⚡ Save &amp; View</button>
<button class="btn btn-ghost" onclick="savePackage(false)">Save draft</button>
<button class="btn btn-generate" onclick="savePackage(true)">⚡ Save &amp; view</button>
</div>
</div>

View File

@@ -151,9 +151,12 @@
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span2 { grid-column: span 2; }
/* A5 scopes the sentence-case rule to buttons and FIELD LABELS, which is this
rule. The mono face, the size and the tracking are the creator's idiom and
are left alone; only the forced uppercase goes. */
label {
font-family: var(--mono); font-size: 10px; font-weight: 500;
letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase;
letter-spacing: .1em; color: var(--text-muted);
}
label .req { color: var(--accent); margin-left: 3px; }
@@ -262,14 +265,19 @@
.nav-row { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); }
.btn {
padding: 10px 22px; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border: 1px solid; transition: all .15s;
letter-spacing: .08em; cursor: pointer; border: 1px solid; transition: all .15s;
}
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--cds-text-on-color); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--cds-hover-primary); }
.btn-generate { background: var(--accent-green); border-color: var(--accent-green); color: var(--cds-text-on-color); font-weight: 700; box-shadow: var(--shadow); }
.btn-generate:hover { background: var(--wp-hover-success); }
/* secondary */
.btn-ghost { background: var(--wp-btn-secondary-bg); border-color: var(--wp-btn-secondary-border); color: var(--text-muted); }
.btn-ghost:hover { border-color: var(--wp-btn-secondary-hover-fg); color: var(--wp-btn-secondary-hover-fg); }
/* primary */
.btn-primary { background: var(--wp-btn-primary-bg); border-color: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--wp-btn-primary-hover); }
/* A5: .btn-generate was green. It is the same role as .btn-primary and now
renders identically; the class is kept because the markup and the scripts
both use it, and renaming it is T7.2's business, not a colour task's. */
.btn-generate { background: var(--wp-btn-primary-bg); border-color: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); font-weight: 700; box-shadow: var(--shadow); }
.btn-generate:hover { background: var(--wp-btn-primary-hover); }
/* ── OUTPUT ── */
#output-section { display: none; }
@@ -335,11 +343,12 @@
background: var(--surface); color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1;
display: flex; align-items: center; justify-content: center; transition: all .12s; flex-shrink: 0;
}
.row-del:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
/* danger, outlined */
.row-del:hover { border-color: var(--wp-btn-danger-border); color: var(--wp-btn-danger-fg); background: var(--wp-btn-danger-soft-bg); }
.add-btn {
display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius);
border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-muted);
font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
cursor: pointer; transition: all .15s;
}
.add-btn:hover { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--accent-dim); }
@@ -418,7 +427,7 @@
.cmt-x { background:none; border:none; color:var(--text-muted); font-size:15px; cursor:pointer; padding:4px 8px; border-radius:4px; }
.cmt-x:hover { background:var(--surface2); color:var(--text); }
.cmt-namebar { padding:12px 18px; border-bottom:1px solid var(--border); }
.cmt-namebar label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:5px; }
.cmt-namebar label { display:block; font-size:10px; letter-spacing:.04em; color:var(--text-muted); margin-bottom:5px; }
.cmt-namebar input { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); font-family:var(--sans); font-size:13px; color:var(--text); background:var(--surface); }
.cmt-compose { padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface2); }
.cmt-compose-label { font-size:11px; color:var(--text-muted); margin-bottom:7px; }
@@ -438,7 +447,7 @@
.cmt-text { font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.cmt-del { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:11px; padding:2px 5px; border-radius:4px; }
.cmt-del:hover { background:var(--red-dim); color:var(--red); }
.cmt-jump { background:none; border:none; color:var(--accent); cursor:pointer; font-size:10px; padding:0; margin-top:4px; }
.cmt-jump { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:10px; padding:0; margin-top:4px; }
.cmt-jump:hover { text-decoration:underline; }
.cmt-foot { border-top:1px solid var(--border); padding:12px 18px; }
.cmt-note { font-size:10px; color:var(--text-muted); line-height:1.5; margin-bottom:10px; }
@@ -449,9 +458,10 @@
/* ── REV1: validation, governance, summary ───────────────────────── */
.radio-group.group-invalid, .check-group.group-invalid { outline:2px solid var(--red); outline-offset:4px; border-radius:var(--radius); }
.ov-select.ov-unset { color:var(--red) !important; border-color:var(--red); }
/* primary. Was green (A5) — it applies a suggested value, which is an action. */
.use-btn { display:inline-block; margin-left:8px; padding:4px 14px; font-family:var(--sans); font-size:11px; font-weight:700;
color:var(--cds-text-on-color); background:var(--accent-green); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
.use-btn:hover { background:var(--wp-hover-success); }
color:var(--wp-btn-primary-fg); background:var(--wp-btn-primary-bg); border:none; border-radius:var(--radius); cursor:pointer; letter-spacing:.03em; }
.use-btn:hover { background:var(--wp-btn-primary-hover); }
.sum-chips { display:flex; flex-wrap:wrap; gap:7px; }
.sum-chip { background:var(--accent-dim); color:var(--accent); border:1px solid var(--wp-accent-border-a); border-radius:3px;
padding:3px 10px; font-family:var(--mono); font-size:10px; }
@@ -469,7 +479,8 @@
.ctx-meta { margin-left:auto; display:flex; gap:16px; font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
.ctx-meta b { color:var(--accent); }
.ctx-meta code { background:var(--surface2); padding:1px 6px; border-radius:3px; color:var(--accent); }
.link-btn { background:none; border:none; color:var(--accent); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
/* tertiary */
.link-btn { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
.mode-wrap { max-width:none; margin:0; padding:16px 28px 0; display:flex; align-items:center; gap:16px; }
.mode-toggle { display:inline-flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
@@ -517,7 +528,7 @@
/* ── COMMENT-DRIVEN ADDITIONS ────────────────────────────────────── */
.locked-field { background:var(--surface2)!important; color:var(--text-muted); cursor:not-allowed; }
.lock-row { display:flex; align-items:center; gap:10px; margin-top:5px; }
.lock-edit { background:none; border:none; color:var(--accent); cursor:pointer; font-size:11px; padding:0; }
.lock-edit { background:none; border:none; color:var(--wp-btn-tertiary-fg); cursor:pointer; font-size:11px; padding:0; }
.override-note { font-size:11px; color:var(--accent-amber); }
.sop-tag { font-size:9px; font-weight:700; color:var(--accent); background:var(--accent-dim); border:1px solid var(--wp-accent-border-b); border-radius:9px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
@@ -710,19 +721,19 @@
flex: 1 1 auto; min-width: 0;
display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px;
height: 40px; padding: 0 14px;
background: var(--accent); color: var(--cds-text-on-color);
background: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg);
border: 0; border-radius: 6px 0 0 6px;
font: inherit; font-size: 14px; font-weight: 600;
cursor: pointer; white-space: nowrap;
}
.wp-nav-cta:hover { background: var(--cds-hover-primary); }
.wp-nav-cta:hover { background: var(--wp-btn-primary-hover); }
.wp-nav-cta-plus { font-size: 17px; font-weight: 400; line-height: 1; }
.wp-nav-cta-more {
flex: 0 0 auto; width: 30px; height: 40px;
background: var(--accent); color: var(--cds-text-on-color); border: 0; border-left: 1px solid var(--wp-on-accent-divider);
background: var(--wp-btn-primary-bg); color: var(--wp-btn-primary-fg); border: 0; border-left: 1px solid var(--wp-on-accent-divider);
border-radius: 0 6px 6px 0; font: inherit; font-size: 12px; cursor: pointer;
}
.wp-nav-cta-more:hover { background: var(--cds-hover-primary); }
.wp-nav-cta-more:hover { background: var(--wp-btn-primary-hover); }
.wp-nav-menu {
position: absolute; top: calc(100% - 6px); left: 10px; right: 10px; z-index: 10;
background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px;