skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-21 10:36:27 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
416426e6ca1c2c9a5d836b6293e2daace303c2ba
pbakaus_impeccable/crates/context/assets/component-review.js
T
Paul Bakaus 83404a0ccf Improve: streamline assembled-page review 
Show the approved composition and captured page in one comparison workspace. Replace component inventory and staged bulk actions with explicit page approval or direct feedback, retaining revision checks and read-only history.

AI-assisted implementation with Codex under maintainer direction.
2026-09-14 19:09:21 -07:00

194 lines
73 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(()=>{function Hi(p,e){let x=e?.changes[p],r=e?.feedback?.[p],n=r?.decision??(e?.submitted?e.draft.decisions[p]:void 0),l=x?.kind==="unchanged"&&(x.carried??(e?.submitted&&n?.action==="approve"))===!0;return{change:x,prior:n,feedbackRound:r?.round??e?.packet.round,carried:l,label:x?.kind==="added"?"New component":x?.kind==="changed"?"Review again":l?"Approval kept":n?.action==="revise"?"Changes still requested":"Awaiting review"}}function S(p,e,x){let r=e.decisions[p.id],n=r?.revision===p.revision?r:void 0,l=Hi(p.id,x);if(n?.action==="approve")return{kind:"approved",label:l.carried?"Approval kept":"Approved",priority:3};if(n?.action==="revise")return{kind:"feedback",label:"Feedback ready",priority:2};return{kind:"pending",label:l.change?.kind==="changed"?"Review again":l.change?.kind==="added"?"New · review needed":"Not reviewed",priority:l.change?.kind==="changed"||l.change?.kind==="added"?0:1}}function co(p){return{packetRevision:p.revision,decisions:{},missing:[],inventoryConfirmed:!1}}function Eo(p){return Object.values(p).every(Number.isFinite)&&p.x>=0&&p.y>=0&&p.w>0&&p.h>0&&p.x+p.w<=1.00001&&p.y+p.h<=1.00001}function di(p,e){let x=p.components.map((h)=>e.decisions[h.id]?.revision===h.revision?e.decisions[h.id]:void 0),r=x.filter((h)=>h?.action==="approve").length,n=x.filter((h)=>h?.action==="revise").length,l=x.length-r-n,ei=n>0||e.missing.length>0;return{approved:r,revisions:n,pending:l,hasFeedback:ei,canSubmit:e.packetRevision===p.revision&&e.missing.every((h)=>h.name.trim()&&Eo(h.box))&&(ei||!l&&e.inventoryConfirmed)}}function so(p,e){let x={...e.decisions};for(let r of p.components)if(!x[r.id]||x[r.id].revision!==r.revision)x[r.id]={revision:r.revision,action:"approve",feedback:"",split:!1};return{...e,decisions:x}}function wo(p,e){if(!di(p,e).canSubmit)throw Error("Review is incomplete or stale");return{schemaVersion:1,requestId:p.id,...structuredClone(e)}}function Vi(p){let e=p.preview.kind==="page"||p.preview.sourceKind==="page",x=p.preview.sourceKind==="page";return{code:e,captured:x,label:e?p.medium.match(/html|css|svg/i)?p.medium:"HTML / CSS / SVG":"Raster",caption:e?x?p.preview.isolation?"Component only":"Region capture":"Live component":"Produced asset",fileLabel:x?"Open captured preview":"Open source image"}}function mo(p,e,x){let r=p.components.findIndex((n)=>n.id===x);for(let n=1;n<=p.components.length;n++){let l=p.components[(r+n)%p.components.length];if(S(l,e).kind==="pending")return l.id}}function Wi(p,e,x){return x==="all"||S(p,e).kind==="pending"===(x==="pending")}function Zi(p,e,x,r,n){let l=n==="fit"?Math.min(x/p,r/e):n;return{scale:l,width:p*l,height:e*l}}function Ui(p,e,x,r){if(x<=0||r<=x)return 0;return Math.max(0,Math.min(1,((p-e)/x-0.08)/0.84))*(r-x)}var bo=`
:host{height:var(--component-review-height,100dvh);min-height:0;overflow:hidden}
.review{height:100%;max-width:none;min-height:0;padding:0;display:flex;flex-direction:column;overflow:hidden;background:var(--color-bg,#fafafa)}
.review>header{flex-shrink:0;padding:16px 24px;margin:0;border-bottom:1px solid var(--line);gap:16px}.review>header>div{min-width:0}.review h1{font-size:30px;line-height:1}.review>header p{font-size:12px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.review .badge{font-size:11px}
.review>.preview-note{flex-shrink:0;margin:0;padding:8px 24px;font-size:11px}.review>.round-summary{flex-shrink:0;margin:0;padding:8px 24px;border-top:0;gap:6px 16px;max-height:120px;overflow:auto}.round-summary p{font-size:12px;gap:6px 14px}.round-summary button{font-size:12px;min-height:32px;padding:5px 10px}
.review>.workbench{flex:1;min-height:0;align-items:stretch;padding:20px 24px;gap:32px;overflow:hidden;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}.reference{display:flex;flex-direction:column;min-height:0;width:100%;max-width:none;margin:0}.reference>.section-head{flex-shrink:0;margin-bottom:10px}.map-space{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#eeefec;border:1px solid var(--line);overflow:hidden}.map{flex-shrink:0;max-width:100%;max-height:100%}.map-legend{flex-shrink:0;margin-top:9px;gap:6px 14px}.map-caption{flex-shrink:0;min-height:0;padding-top:6px;font-size:10px}.map-caption button{display:inline-block;margin:0 0 0 8px;min-height:28px;padding:3px 7px}
.workbench>.inspector{height:100%;min-height:0;padding:0;border:0}.inspector>.section-head{margin-bottom:10px;min-height:32px}.section-head h2{font-size:16px}.inspection-content{padding-bottom:8px}.review-form{max-height:55%;overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable}.material{min-height:28px}.material strong{font-size:13px}.compare-toolbar{margin-bottom:12px}.previous-feedback{padding:10px 12px}.repair-context{margin-bottom:12px}.preview-round{margin-bottom:10px}.decision-title p{font-size:11px}.decisions>button{min-height:40px;font-size:13px}.decision-title strong{font-size:13px}.view-controls{margin-top:8px}.component-details{height:auto;max-height:80px}
.review>.inventory-section{height:236px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;margin:0;padding:10px 24px 8px;border-top:1px solid var(--line);background:var(--color-panel,#f5f5f2);overflow:hidden}.inventory-section>.section-head{margin:0 0 8px;min-height:36px;flex-shrink:0;gap:10px}.inventory-section h2{font-size:14px}.inventory{flex:1;min-height:0;align-items:stretch;margin:0;padding:3px 3px 7px;overflow-x:auto;overflow-y:hidden}.inventory.all{overflow:auto;align-items:start;grid-auto-rows:160px}.inventory .item{flex:0 0 136px;padding:8px;gap:3px;grid-template-rows:auto auto minmax(24px,1fr) auto;min-height:0}.inventory .item-thumb{height:46px;margin-bottom:3px}.inventory .thumb-crop{max-height:46px}.inventory .item-number{font-size:11px;min-height:16px;padding:0}.inventory .item strong{font-size:12px;min-height:26px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.inventory .state{font-size:11px;padding-top:4px}.tray-actions{display:flex;gap:6px;align-items:center}.tray-actions button{white-space:nowrap;font-size:11px;min-height:32px}.tray-actions #toggle-tray{display:flex;align-items:center;gap:6px}.tray-actions svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.review>.inventory-section.tray-expanded{height:min(42dvh,390px)}.review>.inventory-section.tray-collapsed{height:56px;padding-block:10px}.tray-collapsed .inventory{display:none}.tray-collapsed>.section-head{margin-bottom:0}
.review>footer{flex-shrink:0;margin:0;padding:12px 24px;gap:16px;border-top:1px solid var(--line);background:var(--paper);align-items:center}.review>footer>div:first-child{display:flex;align-items:center;gap:14px;min-width:0}.review>footer .check{margin:0;max-width:240px;font-size:11px}.review>footer #approve-rest{min-height:36px;font-size:12px;max-width:210px;padding:7px 10px}.review>footer .submit-area{gap:12px}.review>footer .submit-area p{font-size:11px;max-width:24ch}.review>footer .primary{min-height:40px;font-size:13px}.mobile-panes{display:none}
/* Depth describes the shell: recessed work area, raised inspector, anchored docks. */
.review{--workspace:#e3e6e2;--canvas:#d5dad5;--dock:#f6f7f4;--surface:#fff;background:var(--workspace)}
.review>header{position:relative;z-index:8;background:var(--surface);border-bottom-color:#d5d9d3}
.review>.round-summary,.review>.preview-note{position:relative;z-index:7;background:var(--dock);box-shadow:0 3px 6px #202b2510;border-bottom-color:#c8cfc7}
.review>.workbench{background:var(--workspace)}
.map-space{background:var(--canvas);border-color:#bdc6bd;box-shadow:inset 0 2px 7px #263d2a12;border-radius:5px}
.map{box-shadow:0 3px 10px #182a242b}
.workbench>.inspector{background:var(--surface);border-radius:6px;box-shadow:0 2px 4px #24332812,0 8px 24px #24332818;scrollbar-gutter:auto;isolation:isolate}
.inspector>.section-head{position:relative;z-index:2;margin:0;padding:12px 16px;background:var(--surface);border-bottom:1px solid #dce0da}
.inspection-content{padding:14px 12px 14px 16px;background:#fafbf9}
.inspector>.review-form{position:relative;z-index:2;padding:12px 12px 12px 16px;background:var(--surface);border-top:1px solid #cdd4ca}
.inspector[data-scroll-above=true]>.section-head{box-shadow:0 6px 8px -4px #24332838}
.inspector[data-scroll-below=true]>.review-form{box-shadow:0 -6px 8px -4px #24332838}
.inspection-content,.review-form,.inventory{scrollbar-width:auto;scrollbar-color:#8d9c91 #e3e8e1;overscroll-behavior:contain}
.inspection-content::-webkit-scrollbar,.review-form::-webkit-scrollbar,.inventory::-webkit-scrollbar{width:10px;height:10px}
.inspection-content::-webkit-scrollbar-track,.review-form::-webkit-scrollbar-track,.inventory::-webkit-scrollbar-track{background:#e3e8e1;border-radius:6px}
.inspection-content::-webkit-scrollbar-thumb,.review-form::-webkit-scrollbar-thumb,.inventory::-webkit-scrollbar-thumb{background:#8d9c91;border:2px solid #e3e8e1;border-radius:6px}
.review>.inventory-section{position:relative;z-index:8;background:var(--dock);border-top-color:#b9c3b8;box-shadow:0 -3px 5px #2433280c,0 -10px 24px #24332814}
.inventory-section>.section-head{border-bottom:1px solid #d9dfd5;padding-bottom:8px;margin-bottom:8px}
.tray-collapsed>.section-head{border:0;padding-bottom:0;margin-bottom:0}
.inventory{background:transparent;border-radius:0;padding:3px 3px 7px}
.inventory .item{background:#fafbf8}
.inventory .item.active{background:#fff}
.review>footer{position:relative;z-index:9;background:var(--surface);border-top-color:#ccd4c7;box-shadow:0 -2px 5px #2433280b}
.mobile-panes{position:relative;z-index:7;box-shadow:0 3px 6px #202b2510}
/* Utility actions share a compact icon language; decisions retain explicit labels. */
.utility-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:is(.review,.comparison-panel) .icon-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;min-height:36px;padding:7px;text-decoration:none;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--muted)}
:is(.review,.comparison-panel) .icon-button:hover{background:#e5ebe4;border-color:#b9c8bd;color:var(--teal)}
:is(.review,.comparison-panel) .icon-button[aria-pressed=true]{background:#e5eee8;color:var(--teal)}
:is(.review,.comparison-panel) .icon-button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.review .label-icon{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.review .tray-actions .utility-icon{width:18px;height:18px;stroke-width:1.6}
.material{align-items:center;margin-bottom:10px}
.compare-toolbar{margin-bottom:10px}
.view-controls{min-height:0}.view-controls>.background-options{margin-left:auto;gap:2px}.view-controls .swatch-button{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:5px}
.background-swatch{display:block;width:20px;height:20px;border:1px solid #9ba99d;border-radius:2px;pointer-events:none}.background-swatch.checker{background-size:8px 8px}.page-swatch{background:var(--comp-background,#eee)}
.review>footer .submit-area p{max-width:25ch}
@media(max-width:1100px) and (min-width:801px){.review>header{padding:12px 20px}.review>.workbench{padding:16px 20px;gap:24px}.review>.round-summary{padding-inline:20px}.round-summary p{max-width:calc(100% - 52px)}.round-summary p>span{font-size:11px}.inventory-section>.section-head h2{max-width:none;white-space:nowrap}.review>footer>div:first-child{gap:8px}.review>footer .submit-area p{max-width:19ch}.inventory-filters button{padding-inline:8px}}
@media(max-width:800px){
.review>header{padding:12px 14px;align-items:center}.review h1{font-size:25px}.review>header p{max-width:68vw;font-size:11px}.review .badge{display:none}.review>.preview-note{padding:6px 14px}.review>.round-summary{padding:6px 14px;max-height:76px;gap:4px 8px}.round-summary p{max-width:calc(100% - 44px);gap:4px 10px;font-size:11px}.round-summary p>span{font-size:10px}.round-summary button{font-size:11px}
.mobile-panes{display:flex;flex-shrink:0;gap:4px;padding:7px 14px;border-bottom:1px solid var(--line);background:var(--paper)}.mobile-panes button{flex:1;font-size:12px;min-height:32px;padding:5px;border-color:transparent;background:transparent}.mobile-panes button[aria-pressed=true]{background:#e8efec;color:var(--teal);box-shadow:none;border-color:#bdd0c8}
.review>.workbench{display:block;padding:12px 14px;min-height:0;overflow:hidden}.workbench[data-mobile-pane=component]>.reference,.workbench[data-mobile-pane=comp]>.inspector{display:none}.reference{height:100%;max-width:none}.connector{display:none}.inspector{height:100%;border:0}.map-legend{gap:6px 12px;font-size:10px}.map-caption{font-size:9px}.reference .section-head button{min-height:30px;padding:4px 8px}.reference .section-head h2{font-size:14px}.inspector>.section-head{min-height:26px;margin-bottom:0;padding:9px 12px}.inspection-content{padding:10px 8px 10px 12px}.inspector>.review-form{padding:8px 8px 8px 12px}.number{width:23px;height:23px;font-size:11px}.section-head h2{font-size:14px}.review-form{padding-top:8px}.decision-title strong{font-size:12px}.decision-title p{font-size:10px}.decisions>button{min-height:36px}.review-form .feedback-field{font-size:12px}.review-form .feedback-field textarea{min-height:60px}.compare{max-width:none}
.review>.inventory-section{height:160px;padding:6px 14px}.inventory-section>.section-head{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;min-height:34px;margin-bottom:4px}.inventory-section h2{display:none}.inventory-filters{flex:1;width:auto;min-width:0;padding:2px}.inventory-filters button{padding:4px 6px;font-size:10px;min-height:28px}.inventory-filters b{margin-left:3px}.tray-actions #show-all{display:none}.tray-actions #toggle-tray{padding:6px;min-width:32px;min-height:32px}.tray-actions #toggle-tray span{display:none}.tray-actions svg{width:16px;height:16px}.review>.inventory-section.tray-collapsed{height:46px;padding:6px 14px}.review>.inventory-section.tray-expanded{height:160px}.inventory .item{flex-basis:130px;grid-template-rows:auto 1fr auto;padding:6px}.inventory .item-thumb{display:none}.inventory.all{display:flex;overflow-x:auto;overflow-y:hidden}.inventory .item strong{font-size:11px;min-height:22px}.inventory .state{font-size:10px}.inventory .item-number{font-size:10px;min-height:14px}.inventory-empty{padding:8px 0;font-size:12px}
.review>footer{padding:8px 14px calc(8px + env(safe-area-inset-bottom));gap:8px;flex-direction:column;align-items:stretch}.review>footer>div:first-child{gap:10px;justify-content:space-between}.review>footer #approve-rest{font-size:10px;min-height:32px;max-width:47%;padding:5px 8px}.review>footer .check{font-size:10px;max-width:48%;gap:4px}.review>footer .check input{width:14px;height:14px}.review>footer .submit-area{justify-content:space-between;gap:10px}.review>footer .submit-area p{font-size:10px;max-width:22ch}.review>footer .primary{min-height:34px;font-size:12px;padding:6px 10px}
}
`;var vo=`
:host{display:block;color:var(--color-text,#292929);font:14px/1.45 var(--font-sans,Arial,sans-serif);--line:var(--color-border,#ddd);--paper:var(--color-panel,#fff);--muted:var(--color-muted,#666);--teal:var(--color-patina,#28625e);--warn:var(--color-warn,#8a5b30);--selection:#43897f}
*{box-sizing:border-box}h1,h2,p,figure{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:inherit;padding:8px 12px;min-height:36px}button:hover{border-color:var(--teal);color:var(--teal)}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:3px}button[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--teal)}input[type=checkbox]{accent-color:var(--teal);width:16px;height:16px;flex-shrink:0}textarea,input:not([type=checkbox]){width:100%;background:var(--paper);color:inherit;border:1px solid #999;border-radius:4px;padding:9px 10px}textarea{resize:vertical;min-height:80px}::selection{background:#c7ddd8}a{color:var(--teal)}
.review{max-width:1600px;margin:auto;padding:24px 28px 0}header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}h1{font:400 40px/1.05 var(--font-display,Arial,sans-serif);letter-spacing:-.02em}header p{margin-top:8px;font-size:15px}header p span,.medium{color:var(--muted)}.badge{border:1px solid var(--line);padding:5px 10px;font-size:12px;white-space:nowrap}.preview-note{color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:24px}
.connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}.connector path{fill:none;stroke:var(--selection);stroke-width:2}.workbench{align-items:start;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:40px;position:relative}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;min-height:36px}.section-head h2{font-size:17px;font-weight:500;line-height:1.2}.section-head>span,.section-head h2>span:not(.number){font-size:12px;color:var(--muted)}.section-head button{font-size:12px}.number{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border:1px solid var(--teal);color:var(--teal);margin-right:7px;font:12px var(--font-mono,monospace)}
.map{position:relative;background:#eaeaea;isolation:isolate}.comp{width:100%;height:100%;display:block;user-select:none}.map.marking{touch-action:none;cursor:crosshair}.map.marking .pin{pointer-events:none;opacity:.25}.pin{position:absolute;transform:translate(-50%,-50%);padding:0;min-height:25px;width:25px;height:25px;border-radius:50%;border:1px solid #fff;background:#fff;color:#292929;font:11px var(--font-mono,monospace);box-shadow:0 1px 4px #0006;z-index:2}.pin.selected{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:none;outline:none;z-index:3}.pin:focus-visible{outline:2px solid white;outline-offset:3px}.region,.draw-box{position:absolute;pointer-events:none;outline:2px solid var(--selection);z-index:1}.draw-box{background:#28625e33;z-index:4}.map-caption{font-size:12px;color:var(--muted);padding-top:12px;min-height:40px}.map-caption button{display:block;margin-top:10px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare figure{min-width:0}.compare figcaption{height:24px;min-height:0;font-size:12px;margin-bottom:9px}.compare figcaption span{display:block;color:var(--muted);font-size:11px}.crop-stage{position:relative;overflow:hidden;background:var(--comp-background,#eee);min-width:0}.crop-image{position:absolute;max-width:none;height:auto}.asset{display:block;width:100%;height:100%;object-fit:cover}.crop-stage iframe{position:absolute;max-width:none;border:0;transform-origin:top left;pointer-events:none}.overlay-image{opacity:.5;pointer-events:none}.component-note{font-size:12px;line-height:1.5;color:var(--muted);margin:6px 0 0}.decisions{display:flex;gap:10px;padding:10px 0;background:var(--paper);position:sticky;bottom:0;z-index:6}.decisions>button{flex:1;min-height:48px;font-weight:600;font-size:15px;border-color:var(--teal)}.decision-approve{background:var(--teal);color:white}.decision-approve:hover{background:#224e4b;color:white}.decision-revise{color:var(--teal);background:var(--paper)}.decisions>.quiet{flex:0;border:0;background:transparent;font-size:12px}.decisions .approved{color:var(--teal);background:#e9f0ed;border-color:var(--teal)}.decisions .revise{color:var(--warn);background:#f7f0e6;border-color:var(--warn)}.feedback-field{display:block;margin-top:16px;font-size:13px}.feedback-field>span{float:right;color:var(--muted);font-size:12px}.feedback-field textarea,.feedback-field input{display:block;margin-top:7px}.check{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.5;margin-top:12px}.coordinates{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.coordinates label{font-size:12px}.coordinates input{margin-top:5px}
.inventory-section{margin-top:28px;border-top:1px solid var(--line);padding-top:16px}.inventory-section .section-head{margin-bottom:10px}.inventory{display:flex;gap:8px;overflow-x:auto;padding:3px 3px 14px;scrollbar-color:#a6bcb8 #eee;scrollbar-width:thin}.item{position:relative;flex:0 0 134px;display:grid;grid-template-columns:20px 1fr;column-gap:8px;row-gap:3px;padding:10px;text-align:left;background:transparent}.item strong{grid-column:2;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item.active{background:var(--paper);border-color:var(--teal)}.thumb-crop{position:relative;display:block;overflow:hidden}.item-thumb{display:flex;align-items:center;justify-content:center;grid-column:1/-1;position:relative;overflow:hidden;width:100%;height:76px;background:var(--comp-background,#eee);margin-bottom:7px}.item-thumb img{width:100%;height:100%;object-fit:contain}.item-thumb img[style]{height:auto}.inventory.all{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));overflow:visible}.item-number{grid-row:2/4;font:12px var(--font-mono,monospace);color:var(--muted);padding-top:2px}.state{grid-column:2;font-size:11px;color:var(--muted)}.state.approve{color:var(--teal)}.state.revise{color:var(--warn)}footer{display:flex;justify-content:space-between;gap:24px;padding:20px 0 24px;border-top:1px solid var(--line);margin-top:8px}.submit-area{display:flex;align-items:center;gap:20px}.submit-area p{font-size:12px;color:var(--muted);max-width:28ch}.primary{min-height:46px;font-weight:600;background:var(--teal);border-color:var(--teal);color:white;white-space:nowrap}.primary:hover{color:white;background:#224e4b}.primary:disabled{opacity:.45}.inspector>p{margin:12px 0}
@media(min-width:1300px){.workbench{gap:56px}.review{padding-top:32px}.component-note{max-width:62ch}}
@media(max-width:800px){.connector{display:none}.review{padding:20px 16px 0}.workbench{grid-template-columns:1fr;gap:24px}.reference{max-width:640px;margin:auto;width:100%}.inspector{border-top:1px solid var(--line);padding-top:16px}.compare{max-width:640px}.inventory-section .section-head{align-items:flex-start;flex-direction:column;gap:4px}footer{flex-direction:column}.submit-area{justify-content:space-between}.badge{font-size:11px}.section-head{gap:8px}h1{font-size:34px}header{align-items:flex-start}.section-head h2{font-size:16px}}
.inspector{height:690px;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;padding:0 5px 0 1px;overflow-anchor:none}
.material{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px;min-height:34px;margin-bottom:6px}.material strong{font-size:14px;font-weight:600}.material span{font:11px var(--font-mono,monospace);color:var(--muted)}
.compare-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.compare-toolbar label{font-size:12px;display:flex;align-items:center;gap:8px}select{font:inherit;color:inherit;background:var(--paper);border:1px solid #999;border-radius:4px;padding:7px 9px;min-height:36px}select:focus-visible,.pan-viewport:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.overlay-control{display:flex;align-items:center;gap:8px;border-color:var(--teal);color:var(--teal);font-weight:500}.overlay-control[aria-pressed=true]{background:#e9f0ed}.overlay-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}
.pan-viewport{height:248px;overflow:auto;display:flex;background:#efefef;scrollbar-width:thin;scrollbar-color:#829b98 #eee;overscroll-behavior:contain}.crop-stage{flex-shrink:0;margin:auto}.checker{background-color:#eee;background-image:conic-gradient(#c7c7c7 25%,transparent 0 50%,#c7c7c7 0 75%,transparent 0);background-size:16px 16px}
.view-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:36px}.view-controls>div{display:flex;background:#eee;border:1px solid var(--line);padding:2px;border-radius:4px}.view-controls button{border:0;background:transparent;font-size:12px;min-height:30px;padding:5px 9px}.view-controls button[aria-pressed=true]{background:var(--paper);box-shadow:0 1px 2px #0002}.view-controls label{font-size:11px;display:flex;gap:6px;align-items:center}.view-controls select{font-size:11px;min-height:32px;padding:5px}.view-controls>span{font-size:12px;color:var(--muted)}.scale-note{font-size:11px;color:var(--muted);margin:10px 0 0;min-height:18px}.scale-note a{white-space:nowrap}
.component-details{height:78px;overflow:auto;margin-top:12px;padding-right:4px;scrollbar-width:thin}.layering{font-size:12px;line-height:1.5}.component-details .component-note{margin-top:6px}
#approve-rest{min-height:44px;font-weight:600;border-color:var(--teal);color:var(--teal)}
@media(max-width:800px){.inspector{height:720px}.pan-viewport{height:248px}.component-details{height:92px}.view-controls label{font-size:11px}.review header{align-items:flex-start}}
.round-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:14px 0;margin-bottom:22px;border-block:1px solid var(--line)}.round-summary p{display:flex;flex-wrap:wrap;gap:5px 18px;font-size:13px}.round-summary p>span{color:var(--muted)}.round-summary details{flex-basis:100%;font-size:12px}.round-summary details p{font-size:12px;margin-top:8px;max-width:80ch}
.repair-context{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;margin:0 0 10px;font-size:12px}.previous-feedback{display:contents;overflow-wrap:anywhere}.previous-feedback h3{grid-column:1;grid-row:1;margin:0;font-size:11px;font-weight:500;color:var(--muted);align-self:center}.previous-feedback h3 span{font-weight:400;white-space:nowrap}.previous-feedback blockquote{grid-column:1/-1;grid-row:2;margin:0;white-space:pre-wrap;font-size:13px;line-height:1.45;max-height:5.8em;overflow:auto}.previous-feedback>p{grid-column:1/-1;margin:0;font-size:12px}.kept-approval{color:var(--teal);font-size:12px;align-self:center}
.round-switch{display:flex;gap:1px;border:1px solid var(--line);border-radius:4px;padding:2px;background:#eee;flex-shrink:0}.round-switch button{min-height:28px;font-size:11px;padding:4px 7px;border:0;background:transparent}.round-switch button[aria-pressed=true]{background:var(--paper);color:var(--teal);box-shadow:0 1px 2px #0002}
.changed-files{grid-column:2;grid-row:1;margin:0;color:var(--muted);font-size:11px}.changed-files summary{padding:2px 0;min-height:24px}.changed-files[open]{grid-column:1/-1;grid-row:auto}.changed-files[open] summary{font-weight:500}summary{cursor:pointer;padding:5px 0;min-height:30px}summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.changed-files ul{padding-left:18px;margin:6px 0;overflow-wrap:anywhere;font:11px/1.6 var(--font-mono,monospace)}.description-diff{margin:6px 0 12px}.description-diff dt{font-weight:600;font-size:11px;margin-top:10px}.description-diff dd{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-text,#292929)}.previous-notice{font-size:12px;color:var(--muted);margin-top:8px}.inspector .previous-notice{display:none}
.decisions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px 10px;padding-top:12px}.decision-title{grid-column:1/-1}.decision-title strong{font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:12px}.decision-title strong span{font-size:11px;color:var(--muted);font-weight:400}.decision-title p{font-size:12px;font-weight:400;color:var(--muted);margin-top:4px}.decisions>.quiet{align-self:center;padding-inline:4px}.decisions:not(:has(.quiet)){grid-template-columns:1fr 1fr}
.inspector{display:flex;flex-direction:column;overflow:hidden;padding:0}.inspection-content{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-gutter:stable;overscroll-behavior:contain;padding:0 5px 10px 1px}.review-form{flex-shrink:0;padding:12px 5px 0 1px;border-top:1px solid var(--line);background:var(--paper)}.review-form .decisions{position:static;padding:0 0 8px;background:transparent}.review-form .feedback{margin-top:8px}.review-form .feedback textarea{min-height:72px;max-height:120px}.review-form .check{margin:8px 0;font-size:11px}
.inspection-content:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.inspector>.section-head{flex-shrink:0;padding:0 5px 0 1px}
.pin{display:flex;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:600;width:30px;height:30px;min-height:30px}.pin svg,.map-legend svg,.item-number svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.pin.pending,.pin.pending.selected{background:#f4cd68;border-color:#f4cd68;color:#3c300f}.pin.approved,.pin.approved.selected{width:38px;min-height:24px;height:24px;background:#edf3ef;border-color:#edf3ef;color:#326258;border-radius:4px}.pin.approved:not(.selected){opacity:.55;box-shadow:none}.pin.approved:hover,.pin.approved:focus-visible{opacity:1}.pin.feedback,.pin.feedback.selected{width:38px;background:#964b2f;border-color:#fff;color:#fff;border-radius:4px}.pin.selected{outline:none;border:3px solid #fff;box-shadow:none;z-index:3}.pin:focus-visible{outline:2px solid #fff;outline-offset:3px}
.map-legend{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:14px;font-size:11px;color:var(--muted)}.map-legend>span{display:flex;align-items:center;gap:6px}.map-legend i{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;font-style:normal}.legend-pending{background:#f4cd68;color:#3c300f;border-radius:50%}.legend-feedback{background:#964b2f;color:#fff;border-radius:3px}.legend-approved{background:#edf3ef;color:#326258;border-radius:3px}.map-caption{font-size:11px}
.inventory-section .section-head{flex-wrap:wrap}.inventory-filters{display:flex;gap:3px;padding:3px;background:#eee;border-radius:5px}.inventory-filters button{border:0;background:transparent;min-height:34px;padding:7px 10px;font-size:12px;white-space:nowrap}.inventory-filters button[aria-pressed=true]{background:var(--paper);color:var(--teal);box-shadow:0 1px 2px #0002}.inventory-filters b{margin-left:5px;font-weight:600;font-variant-numeric:tabular-nums}.item.pending{border-color:#b18a2f;background:#fffbef}.item.feedback{border-color:#964b2f;background:#fcf1eb}.item.approved{background:#f1f4f2;border-color:#ccd8d1}.item.approved .item-thumb{opacity:.65}.item.active{outline:2px solid var(--teal);outline-offset:0;box-shadow:none}.item-number{display:flex;align-items:center;gap:3px;grid-column:1/-1;grid-row:auto;min-height:20px;font-weight:600}.item strong{grid-column:1/-1;font-size:13px;white-space:normal;min-height:36px;line-height:1.35}.state{grid-column:1/-1;font-size:12px;font-weight:600;padding-top:6px;border-top:1px solid #0002}.state.pending{color:#725819}.state.feedback{color:#914429}.state.approved{color:#326258}.inventory-empty{padding:20px 0;font-size:13px;color:var(--muted)}
@media(max-width:800px){.inventory-section .section-head{gap:10px}.inventory-filters{width:100%}.inventory-filters button{padding-inline:7px;font-size:11px;flex:1}.inventory-filters b{margin-left:3px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.item-medium{margin-left:auto;font-weight:400;display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted);min-height:16px}.item-medium .utility-icon{width:14px;height:14px;flex-shrink:0}.material>.utility-icon{width:18px;height:18px;align-self:center;color:var(--teal)}
.feedback-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.feedback-actions .primary{margin-left:auto;display:inline-flex;align-items:center;gap:10px}.feedback-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.feedback-hint,.shortcut-hint{font-size:12px;color:var(--muted)}.feedback-hint{margin-top:6px}.shortcut-hint{flex-basis:100%;text-align:right}.record-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px;font-size:13px}.record-verdict span{font-size:11px;color:var(--muted)}.review>.record-footer{font-size:12px;color:var(--muted);flex-wrap:wrap;gap:6px 16px}.saved-feedback{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}.decision-notice{display:flex;align-items:center;gap:12px;font-size:12px;margin-bottom:10px}.decision-notice>span{flex:1;overflow-wrap:anywhere}.decision-notice button{color:var(--teal);flex-shrink:0}.review-summary{padding:4px 2px}.completion-mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#e6efe8;color:#28625e;float:left;margin:0 10px 8px 0}.completion-mark svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}.completion-link{display:inline-flex;align-items:center;gap:8px;color:var(--teal);border:0;background:transparent;padding:0;font-size:12px;text-align:left}.completion-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex-shrink:0}.queue-complete #approve-rest{display:none}.review-summary h2{font-size:22px;line-height:32px}.review-summary p{clear:both;margin-top:8px;color:var(--muted)}.summary-decisions{margin-top:24px;display:grid}.summary-decisions button{display:grid;grid-template-columns:1fr auto;gap:6px 16px;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;background:transparent}.summary-decisions strong{font-size:13px;font-weight:500}.summary-decisions span{font-size:12px;color:var(--teal)}.summary-decisions small{grid-column:1/-1;font-size:12px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
`+bo+`
.review-form:has(#feedback-form){max-height:75%;min-height:0;flex-shrink:1;display:flex;flex-direction:column;overflow:hidden;padding-top:8px}
#feedback-form{display:flex;flex-direction:column;flex:1;min-height:0}
/* Leave room inside the scrollport for the 2px focus ring and 3px offset. */
.feedback-fields{flex:1;min-height:0;overflow:auto;padding:6px}
.review-form:has(#feedback-form) .decision-notice{flex-shrink:0}
.review-form:has(#feedback-form) .decisions{display:none}
.feedback-actions{flex-shrink:0;position:static;background:var(--surface,var(--paper));padding:8px 0;margin-top:8px;box-shadow:0 -5px 8px -6px #24332838}
.feedback-actions .shortcut-hint{flex-basis:auto;order:-1;margin-right:auto}
.feedback-actions .primary{margin-left:0}
@media(max-height:800px),(max-width:800px){.feedback-actions .shortcut-hint{display:none}.feedback-actions .primary{margin-left:auto}.review-form .feedback textarea{min-height:56px}.review-form:has(#feedback-form) .decision-notice{margin-bottom:4px}}
.comparison-panel{min-width:0;container-type:inline-size}.comparison-panel .expanded-title{display:none}.comparison-panel .compare-toolbar{justify-content:flex-start}.comparison-panel .overlay-control{margin-left:0}.comparison-panel #expand-comparison{flex-shrink:0}.pan-viewport.pannable{cursor:move}.pan-viewport img{user-select:none;-webkit-user-drag:none}
#comparison-dialog{position:fixed;inset:16px;width:calc(100vw - 32px);height:calc(100dvh - 32px);max-width:none;max-height:none;margin:0;padding:24px;background:var(--paper);color:inherit;border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 60px #14292340;overflow:hidden;transform-origin:top left}
#comparison-dialog::backdrop{background:#172821a6}
#comparison-dialog .comparison-panel{height:100%;display:flex;flex-direction:column;gap:12px}
#comparison-dialog .expanded-title{display:block;font-size:20px;line-height:1.3;margin:0;font-weight:500}
#comparison-dialog .compare-toolbar{flex-shrink:0;margin:0}
#comparison-dialog .compare{flex:1;min-height:0;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#comparison-dialog .compare figure{display:flex;flex-direction:column;min-height:0}#comparison-dialog .pan-viewport{flex:1;min-height:0}#comparison-dialog .compare figcaption{flex-shrink:0}
#comparison-dialog .view-controls{flex-shrink:0;margin:0}
@media(max-width:600px){#comparison-dialog{inset:6px;width:calc(100vw - 12px);height:calc(100dvh - 12px);padding:14px}.comparison-panel .compare-toolbar{gap:6px}.comparison-panel .overlay-control{padding-inline:8px;font-size:12px}#comparison-dialog .compare{gap:8px}#comparison-dialog .compare figcaption{font-size:11px}}
.comparison-panel .compare-toolbar{gap:6px;padding:0;min-width:0;flex-wrap:wrap;margin-bottom:8px}
.comparison-actions{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0}
.comparison-panel .zoom-control{position:relative;display:block;flex-shrink:0}
.zoom-control select{appearance:none;-webkit-appearance:none;width:104px;height:36px;min-height:36px;padding:6px 30px 6px 32px;font-size:12px;line-height:1.4;border-color:var(--line);background:var(--paper);cursor:pointer}
.zoom-control>.utility-icon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
.zoom-control>.utility-icon:first-child{left:10px;width:15px;height:15px;color:var(--muted)}
.zoom-control>.utility-icon:last-child{right:10px;width:13px;height:13px;color:var(--muted)}
.comparison-panel .overlay-control{height:36px;min-height:36px;font-size:12px;padding:6px 10px;gap:6px}
.comparison-panel .overlay-control svg{width:18px;height:18px;stroke-width:1.6}
.comparison-actions .source-link{color:var(--muted)}
.component-details .material{min-height:0;margin:12px 0 5px;gap:5px 8px}.component-details .material strong{font-size:11px;font-weight:500;color:var(--muted)}.component-details .material>.utility-icon{width:15px;height:15px}.component-details .material span{font-size:10px}
@container(max-width:460px){.compare-toolbar .overlay-label{display:none}.compare-toolbar .overlay-control{width:34px;padding:7px}.compare-toolbar .zoom-control select{width:86px;padding-left:27px;padding-right:24px}.compare-toolbar .zoom-control>.utility-icon:first-child{left:8px}.compare-toolbar .zoom-control>.utility-icon:last-child{right:7px}}
@media(forced-colors:active){.zoom-control select{appearance:auto;padding:6px 8px}.zoom-control>.utility-icon{display:none}}
/* A full-page checkpoint is one comparison, not a component inventory. */
.assembled-review>.workbench{grid-template-columns:minmax(0,1fr);gap:0}
.assembled-review .workbench>.inspector{display:flex}
.assembled-review .inspection-content{padding:16px 20px;scrollbar-gutter:auto}
.assembled-review .compare{max-width:none;gap:20px}
.assembled-review .pan-viewport{background:var(--canvas);border:1px solid #bdc6bd;box-shadow:inset 0 2px 7px #263d2a12}
.assembled-review .inspector>.review-form{padding:12px 20px;max-height:55%}
.assembled-review .decisions{display:flex;justify-content:flex-end;gap:10px}
.assembled-review #approve{order:2;min-width:180px}
.assembled-review .page-review-status{font-size:11px;color:var(--muted);text-align:right;line-height:1.4;overflow-wrap:anywhere}
.assembled-review .page-review-status:empty{display:none}
.assembled-review .review-form:has(#feedback-form){max-height:55%}
.assembled-review .feedback-field textarea{min-height:64px;max-height:120px}
.assembled-review .repair-context:empty{display:none}
@media(max-width:800px){
.assembled-review>.workbench{display:flex;padding:10px}
.assembled-review .inspection-content{padding:10px}
.assembled-review .compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.assembled-review .inspector>.review-form{padding:10px}
.assembled-review .decisions>button{flex:1;min-width:0}
.assembled-review .page-review-status{text-align:left}
}
`;var Lo={chevronDown:'<path d="m6 9 6 6 6-6"/>',code:'<path d="m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18"/>',image:'<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8" cy="8" r="1.5"/><path d="m3 17 6-6 4 4 3-3 5 5"/>',expand:'<path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6"/>',compact:'<path d="M3 9h6V3m6 0v6h6M9 21v-6H3m12 6v-6h6M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6"/>',hideTray:'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 14h18m-12 3 3 2 3-2"/>',showTray:'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 14h18m-12-4 3-3 3 3"/>',next:'<path d="M5 12h14m-6-6 6 6-6 6"/>',mark:'<path d="M9 4H4v5m11-5h5v5M4 15v5h5m11-5v5h-5M8 12h8m-4-4v8"/>',close:'<path d="m6 6 12 12M6 18 18 6"/>',undo:'<path d="M4 10h9a6 6 0 0 1 0 12M4 10l5-5m-5 5 5 5" transform="translate(0 -2)"/>',external:'<path d="M14 3h7v7m0-7L10 14m0-10H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-5"/>',zoom:'<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>'};function G(p){return`<svg class="utility-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${Lo[p]}</svg>`}var d=(p)=>p.replace(/[&<>"']/g,(e)=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[e]),ii=(p)=>`${p*100}%`,oi=(p)=>{let e=new URL(p,location.href);if(!["http:","https:"].includes(e.protocol))throw Error("Unsupported preview URL");return d(e.href)};function uo(p,e,x){let r=p.attachShadow({mode:"open"}),n=structuredClone(x.initialDraft??co(e)),l=e.stage==="hero"&&e.components.length===1&&!n.missing.length,ei=()=>[...e.components].sort((f,w)=>S(f,n,x.history).priority-S(w,n,x.history).priority),h=ei().find((f)=>S(f,n,x.history).kind!=="approved")?.id??e.components[0]?.id,z=di(e,n).pending?"pending":"reviewed",K=!1,_=!1,u=x.completed??!1,si="",J={},y=!!x.completed||!di(e,n).pending,U=null,yo=/Mac|iPhone|iPad/.test(navigator.platform)?"⌘Enter":"Ctrl+Enter",F=!1,V=!1,C=!1,N=!0,xi=!1,H="comp",Ti=H,I="fit",hi="checker",X=!1,ri="isolated",Ji,Ai="fit",O=null,R=null,P=null,gi='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 8 3 3 7-7"/></svg>',wi='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 11 1 2 2-1 7-7-3-3-7 7v2Z"/></svg>',Bi=(f)=>`left:${ii(f.x)};top:${ii(f.y)};width:${ii(f.w)};height:${ii(f.h)}`;function ti(f){r.getElementById(f)?.focus({preventScroll:!0})}function zo(f){let w=mo(e,n,f);if(y=!w,w)h=w;H="component",X=!1,F=!1,I="fit",ri="isolated",z=y?"reviewed":"pending",g(),ti(y?"review-summary":J[h]?"feedback":"approve")}async function Ii(){if(_||u||X||Object.keys(J).length)return;_=!0,si="",g();try{await x.onSubmit(wo(e,n)),u=!0,y=!0,K=!1,z="reviewed"}catch(f){si=f instanceof Error?f.message:"Could not save. Try again."}finally{_=!1,g()}}function Ni(f){if(_||u||X)return;let w=e.components.find(($i)=>$i.id===h);if(!w)return;let T=n.decisions[w.id],fi=T?.revision===w.revision?T:void 0;U={id:w.id,name:w.name,action:f,previous:T?{...T}:void 0};let mi=J[w.id]??fi;if(n.decisions[w.id]={revision:w.revision,action:f,feedback:f==="revise"?mi?.feedback??"":"",split:f==="revise"&&(mi?.split??!1)},delete J[w.id],xi)N=!0,xi=!1;if(l)n.inventoryConfirmed=f==="approve",U=null,Ii();else zo(w.id)}function ko(){if(_||u||X)return;let f=e.components.find((fi)=>fi.id===h);if(!f)return;let w=n.decisions[f.id],T=w?.revision===f.revision?w:void 0;if(J[f.id]??={feedback:T?.feedback??"",split:T?.split??!1},N&&(r.querySelector(".workbench")?.clientHeight??0)<420)xi=!0,N=!1;y=!1,g(),ti("feedback")}function Oi(f){let w=`missing-${crypto.randomUUID()}`;n.missing.push({id:w,name:"Missing component",feedback:"",box:f}),n.inventoryConfirmed=!1,y=!1,h=w,H="component",K=!1,O=null,R=null,g(),r.querySelector("#missing-name")?.focus()}function g(){P?.disconnect();let f=r.activeElement,w=f?.id,T=f?.dataset.select,fi=window.scrollX,mi=window.scrollY,$i=r.querySelector(".inventory")?.scrollLeft??0,bi=Ji===h,jo=H==="component"&&(!bi||Ti!==H);Ti=H;let qo=bi?r.querySelector(".inspection-content")?.scrollTop??0:0,Mo=bi&&(r.querySelector(".changed-files")?.open??!1),Ho=r.querySelector(".comparison-slot")?.clientHeight??200,Ri=r.querySelector(".pan-viewport"),Di=Ji===h&&Ai===I,Vo=Di?Ri?.scrollLeft??0:0,Jo=Di?Ri?.scrollTop??0:0;Ji=h,Ai=I;let c=e.components.find((i)=>i.id===h),k=n.missing.find((i)=>i.id===h),Si=c?.box??k?.box,Fi=c?e.components.indexOf(c)+1:e.components.length+n.missing.findIndex((i)=>i.id===h)+1,Ci=c?n.decisions[c.id]:void 0,D=Ci?.revision===c?.revision?Ci:void 0,vi=c?J[c.id]:void 0,ni=Object.keys(J).length>0,No=c?!e.components.some((i)=>i.id!==c.id&&S(i,n).kind==="pending"):!1,Gi=U&&!u?`<div class="decision-notice"><span role="status">${d(U.name)} ${U.action==="approve"?"approved":"flagged for repair"}.</span><button id="undo-decision" class="quiet">Undo</button></div>`:"",m=di(e,n),j=x.history,E=c?Hi(c.id,j):void 0,pi=j?.packet.components.find((i)=>i.id===c?.id),A=X&&!!pi,t=A?pi:c,L=A?j.packet:e,Pi=Object.values(j?.changes??{}),io=Pi.filter((i)=>i.kind==="changed").length,oo=Pi.filter((i)=>i.kind==="added").length,Ki=e.components.filter((i)=>S(i,n,j).kind==="approved"&&Hi(i.id,j).carried).length,ui=(i)=>{let o=S(i,n,j);return u&&o.kind==="feedback"?{...o,label:"Changes requested"}:o},$o=m.approved+m.revisions+n.missing.length,eo=(z==="pending"?ei():e.components).filter((i)=>Wi(i,n,z)),Go=[m.revisions+n.missing.length?`${m.revisions+n.missing.length} feedback ready`:"",Ki?`${Ki} ${Ki===1?"approval":"approvals"} kept`:"",io?`${io} changed`:"",oo?`${oo} added`:"",j?.removed.length?`${j.removed.length} removed`:""].filter(Boolean).join(" · "),Ko=si||(ni?"Save or cancel your open feedback before sending.":u?x.preview?"Preview submitted. No run changed.":"Review submitted.":m.hasFeedback?"Ready to send for corrections.":m.pending?`${m.pending} left to review`:!n.inventoryConfirmed?"Confirm the map is complete.":"Ready to continue."),B=t?Vi(t):null,Yi=t?.preview.kind==="image"&&!B?.code,_i=Yi||t?.material?.alpha==="transparent",Q=!!(t?.context&&ri==="context"),ro=t&&(Q?t.context?.kind!=="image":t.preview.kind==="page"),Ei=Q&&t?.context?t.context.url:t?.preview.url,Yo=B?.code?`${B.label} · ${B.captured?"captured from code":"live preview"}`:t?.material?`${t.material.alpha==="transparent"?"Transparent":t.material.alpha==="opaque"?"Opaque":"Transparency unverified"} ${t.material.format}`:"Raster · transparency unverified";r.innerHTML=`<style>${vo}</style><section class="review ${l?"assembled-review":""}" aria-label="${l?"Assembled page review":"Component review"}" style="--comp-background:${/^#[0-9a-f]{6}$/i.test(e.comp.background??"")?e.comp.background:"#eeeeee"}">
<header><div><h1>${u?"Review record.":l?"Review the assembled page.":"Review the components."}</h1><p>${d(e.title)} <span>· Round ${e.round}</span></p></div>${u?'<span class="badge">Submitted · read-only</span>':x.preview?'<span class="badge">Interactive preview</span>':""}</header>
${x.preview?'<p class="preview-note">Historical hotel artwork for testing this interface. Decisions stay in this preview; no run is changed.</p>':""}
${j&&!l?`<section class="round-summary" aria-label="Changes since previous round"><p><strong>${m.pending} ${m.pending===1?"component":"components"} to review</strong><span>${Go}</span></p>${m.pending?`<button id="review-changes" class="icon-button" aria-label="Next to review" title="Next to review">${G("next")}</button>`:""}${j.removed.length?`<details><summary>Removed from the map</summary><p>${j.removed.map((i)=>d(i.name)).join(" · ")}. Confirm these omissions are intentional before accepting the map.</p></details>`:""}</section>`:""}
${!l?`<div class="mobile-panes" role="group" aria-label="Inspection view"><button id="show-comp" aria-pressed="${H==="comp"}">Approved comp</button><button id="show-component" aria-pressed="${H==="component"}">Component ${Fi}</button></div>`:""}
<div class="workbench" data-mobile-pane="${H}">${!l?`<svg class="connector" aria-hidden="true"><path /></svg>
<section class="reference" aria-label="Approved composition">
<div class="section-head"><h2>Approved comp</h2>${!u?`<button id="mark" class="label-icon" aria-pressed="${K}">${G(K?"close":"mark")}${K?"Cancel":"Mark missing"}</button>`:""}</div>
<div class="map-space"><div class="map ${K?"marking":""}" style="aspect-ratio:${e.comp.width}/${e.comp.height}">
<img class="comp" src="${oi(e.comp.url)}" alt="Approved composition for ${d(e.title)}" draggable="false">
${Si&&!y?`<div class="region" style="${Bi(Si)}"></div>`:""}
${e.components.map((i,o)=>{let a=ui(i);return`<button class="pin ${a.kind} ${!y&&h===i.id?"selected":""}" data-select="${d(i.id)}" style="left:${ii(Math.min(0.96,i.box.x+i.box.w/2))};top:${ii(Math.max(0.035,i.box.y))}" aria-label="Inspect ${d(i.name)} — ${d(a.label)}" title="${o+1}. ${d(i.name)} · ${d(a.label)}" aria-pressed="${!y&&h===i.id}">${a.kind==="approved"?gi:a.kind==="feedback"?wi:""}<span>${o+1}</span></button>`}).join("")}
${n.missing.map((i,o)=>`<button class="pin feedback ${!y&&h===i.id?"selected":""}" data-select="${d(i.id)}" style="left:${ii(i.box.x+i.box.w/2)};top:${ii(i.box.y)}" aria-label="Inspect missing ${d(i.name)}" title="Missing: ${d(i.name)}">${wi}<span>${e.components.length+o+1}</span></button>`).join("")}
<div class="draw-box" hidden></div>
</div></div>
<div class="map-legend" aria-label="Map status legend"><span><i class="legend-pending">#</i> To review</span><span><i class="legend-feedback">${wi}</i> ${u?"Changes requested":"Feedback ready"}</span><span><i class="legend-approved">${gi}</i> Approved</span></div>
${K?'<div class="map-caption">Draw around the missing piece.<button id="add-box">Add an adjustable box</button></div>':""}
</section>`:""}
<section class="inspector" aria-label="${l?"Page comparison":"Selected component"}">
${!l?`<div class="section-head"><h2>${y?"Review summary":`<span class="number">${Fi}</span> ${d(c?.name??k?.name??"Component")}`}</h2></div>`:""}<div class="inspection-content" role="region" aria-label="${l?"Page comparison":"Component comparison"}" tabindex="0">
${y&&!l?`<section class="review-summary" id="review-summary" tabindex="-1"><div class="completion-mark" aria-hidden="true">${gi}</div><h2>${u?"Review sent.":"All components reviewed."}</h2><p>${m.approved} approved · ${m.revisions} flagged for repair${n.missing.length?` · ${n.missing.length} missing`:""}</p><p>${u?"Your decisions are saved.":m.hasFeedback?"Send your feedback to start the next repair round.":"Confirm nothing is missing, then approve and continue."}</p><div class="summary-decisions">${e.components.map((i)=>{let o=n.decisions[i.id],a=ui(i);return`<button data-select="${d(i.id)}"><strong>${d(i.name)}</strong><span>${a.kind==="pending"?"Not reviewed":a.kind==="feedback"?"Needs work":"Approved"}</span>${o?.action==="revise"?`<small>${d(o.feedback||"No note — agent will diagnose.")}</small>`:""}</button>`}).join("")}${n.missing.map((i)=>`<button data-select="${d(i.id)}"><strong>${d(i.name)}</strong><span>Missing</span><small>${d(i.feedback)}</small></button>`).join("")}</div></section></div>${Gi?`<div class="review-form">${Gi}</div>`:""}`:c?`
${j?`<div class="repair-context">
${A&&E?.prior?.action==="revise"?`<section class="previous-feedback" aria-label="Previous feedback"><h3>Previous feedback <span>· Round ${E.feedbackRound}</span></h3><blockquote>${d(E.prior.feedback||"No written feedback was supplied.")}</blockquote>${E.prior.split?"<p>Requested: split into separately reviewable components.</p>":""}</section>`:E?.carried?'<p class="kept-approval">Unchanged · approval kept</p>':""}
${E?.change?.kind==="changed"?`<details class="changed-files" ${Mo?"open":""}><summary>${E.change.files.length?`${E.change.files.length} changed ${E.change.files.length===1?"file":"files"}`:E.change.reasons.includes("region")?"Region changed":pi?.note!==c.note?"Description changed · files unchanged":"Component definition changed · files unchanged"}</summary>${E.change.files.length?`<ul>${E.change.files.map((i)=>`<li>${d(i)}</li>`).join("")}</ul>`:""}${pi&&pi.note!==c.note?`<dl class="description-diff"><dt>Previous description</dt><dd>${d(pi.note)}</dd><dt>Current description</dt><dd>${d(c.note)}</dd></dl>`:""}</details>`:""}
</div>`:""}
<div class="comparison-slot"><div class="comparison-panel"><h2 class="expanded-title">${d(t.name)}</h2><div class="compare-toolbar">${pi?`<div class="round-switch" role="group" aria-label="Preview version"><button id="current-round" aria-label="Current · round ${e.round}" title="Current · round ${e.round}" aria-pressed="${!A}">Current</button><button id="previous-round" aria-label="Previous · round ${j.packet.round}" title="Previous · round ${j.packet.round}" aria-pressed="${A}">Previous</button></div>`:""}<label class="zoom-control" title="Comparison zoom · based on comp pixels">${G("zoom")}<select id="zoom" aria-label="Comparison zoom">${[["fit","Fit"],["1","100%"],["2","200%"],["4","400%"]].map(([i,o])=>`<option value="${i}" ${String(I)===i?"selected":""}>${o}</option>`).join("")}</select>${G("chevronDown")}</label><button id="overlay" class="overlay-control" aria-label="Overlay comp" title="Overlay approved comp" aria-pressed="${F}"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="3" width="10" height="10"/><rect x="7" y="7" width="10" height="10"/></svg><span class="overlay-label">Overlay</span></button><div class="comparison-actions" role="group" aria-label="Comparison view actions"><button id="expand-comparison" class="icon-button" aria-label="${V?"Restore comparison":"Enlarge comparison"}" title="${V?"Restore comparison (Esc)":"Enlarge comparison"}" aria-expanded="${V}">${G(V?"compact":"expand")}</button>${t?.preview.kind==="image"?`<a class="icon-button source-link" href="${oi(Ei)}" target="_blank" rel="noopener" aria-label="${Q?"Open context capture":B.fileLabel}" title="${Q?"Open context capture":B.fileLabel}">${G("external")}</a>`:""}</div></div>
<div class="compare">
<figure><figcaption>${A?`Comp · Round ${j.packet.round}`:l?"Approved comp":"In the comp"}</figcaption><div class="pan-viewport" aria-label="Reference comparison canvas" tabindex="0"><div class="crop-stage"><img class="crop-image" src="${oi(L.comp.url)}" alt="Reference region for ${d(t.name)}" style="width:${100/t.box.w}%;left:${-100*t.box.x/t.box.w}%;top:${-100*t.box.y/t.box.h}%"></div></div></figure>
<figure><figcaption>${A?`Previous · Round ${j.packet.round}`:l?"Assembled page":Q?"In context":j?`${B.caption} · Round ${e.round}`:B.caption}</figcaption><div class="pan-viewport" aria-label="Produced comparison canvas" tabindex="0"><div class="output crop-stage ${_i&&!Q&&!ro&&hi==="checker"?"checker":""}">${!ro?`<img class="asset" src="${oi(Ei)}" alt="Produced ${d(t.name)}" style="object-position:${d(t.preview.position??"center")}">`:`<iframe aria-hidden="true" title="Rendered ${d(t.name)}" src="${oi(Ei)}" sandbox="" tabindex="-1" width="${L.comp.width}" height="${L.comp.height}"></iframe>`}${F?`<img class="crop-image overlay-image" src="${oi(L.comp.url)}" alt="Reference overlay" style="width:${100/t.box.w}%;left:${-100*t.box.x/t.box.w}%;top:${-100*t.box.y/t.box.h}%">`:""}</div></div></figure>
</div>
${_i||t.context?`<div class="view-controls">${t.context?`<div role="group" aria-label="Component view"><button id="isolated" aria-pressed="${!Q}">${Yi?"Asset only":"Component only"}</button><button id="context" aria-pressed="${Q}">In context</button></div>`:""}${_i?`<div class="background-options" role="group" aria-label="Asset preview background"><button id="background-checker" class="swatch-button" aria-label="Checkerboard background" title="Checkerboard background" aria-pressed="${hi==="checker"}" ${Q?"disabled":""}><span class="background-swatch checker"></span></button><button id="background-page" class="swatch-button" aria-label="${L.comp.background?"Page color":"Neutral"} background" title="${L.comp.background?"Page color":"Neutral"} background" aria-pressed="${hi==="page"}" ${Q?"disabled":""}><span class="background-swatch page-swatch"></span></button></div>`:""}</div>`:""}
</div></div>${!l?`<div class="component-details"><div class="material">${G(B.code?"code":"image")}<strong>${d(Yo)}</strong><span>${t?.material?`${t.material.width} × ${t.material.height} px`:""}</span></div>${L.stage==="components"&&B?.captured&&!t?.preview.isolation?'<p class="layering">Legacy region capture · may include overlapping components.</p>':""}${t?.context?.layering&&(Yi||Q)?`<p class="layering">${d(t.context.layering)}</p>`:""}
<p class="component-note">${d(t.note)}</p>
</div>`:""}</div><div class="review-form">${Gi}${A?'<p class="previous-notice">Viewing the previous round. Return to Current to make a decision.</p>':""}${u?`<div class="record-verdict"><strong>${D?.action==="approve"?"Approved":D?.action==="revise"?"Changes requested":"Not reviewed"}</strong><span>Submitted in round ${e.round} · read-only</span></div>`:`<div class="decisions" role="group" aria-label="Decision for ${d(c.name)}">${!l?`<div class="decision-title"><strong>Your review <span>Round ${e.round}</span></strong>${A?"<p>Return to Current to review this round.</p>":""}</div>`:""}<button id="approve" class="decision-approve ${D?.action==="approve"?"approved":""}" aria-pressed="${D?.action==="approve"}">${l?_?"Sending…":"Approve & continue":"Looks good"}</button><button id="revise" class="decision-revise ${D?.action==="revise"?"revise":""}" aria-pressed="${D?.action==="revise"}">Needs work</button>${D&&!l?`<button id="clear" class="quiet icon-button" aria-label="Clear decision" title="Clear decision">${G("undo")}</button>`:""}</div>`}
${vi?`<form id="feedback-form"><div class="feedback-fields"><label class="feedback-field">What needs to change?<textarea id="feedback" aria-describedby="feedback-hint">${d(vi.feedback)}</textarea></label><p id="feedback-hint" class="feedback-hint">Optional — leave blank for the agent to diagnose.</p>${!l?`<label class="check"><input id="split" type="checkbox" ${vi.split?"checked":""}> Split into separately reviewable components</label>`:""}</div><div class="feedback-actions"><button id="cancel-feedback" type="button" class="quiet">Cancel</button><button id="save-feedback" type="submit" class="primary">${l?"Send feedback":No?"Save & finish review":"Save & next"} <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15m-6-6 6 6-6 6"/></svg></button><span class="shortcut-hint">${yo}</span></div></form>`:D?.action==="revise"?`<p class="saved-feedback">${d(D.feedback||"No note — agent will diagnose.")}</p>`:""}
${l?`<p class="page-review-status" role="status">${d(si||(u?"Your decision is saved.":_?"Sending…":vi?"":"Approval confirms the composition and that nothing is missing."))}</p>`:""}</div>`:k?`<p>This piece will be added to the unresolved inventory.</p><label class="feedback-field">Name<input id="missing-name" value="${d(k.name)}"></label><label class="feedback-field">What is missing?<textarea id="missing-feedback">${d(k.feedback)}</textarea></label><div class="coordinates">${["x","y","w","h"].map((i)=>`<label>${{x:"Left",y:"Top",w:"Width",h:"Height"}[i]} %<input type="number" data-coordinate="${i}" value="${Math.round(k.box[i]*1000)/10}" min="0" max="100" step="0.1"></label>`).join("")}</div><button id="remove-missing">Remove this mark</button></div>`:"<p>No components supplied.</p></div>"}
</section>
</div>
${!l?`<section class="inventory-section ${N?"":"tray-collapsed"} ${C&&N?"tray-expanded":""}" aria-label="Component inventory"><div class="section-head"><h2>Components</h2><div class="inventory-filters" role="group" aria-label="Filter components"><button data-filter="pending" aria-pressed="${z==="pending"}">To review <b>${m.pending}</b></button><button data-filter="reviewed" aria-pressed="${z==="reviewed"}">Reviewed <b>${$o}</b></button><button data-filter="all" aria-pressed="${z==="all"}">All <b>${e.components.length+n.missing.length}</b></button></div><div class="tray-actions"><button id="show-all" class="icon-button" aria-pressed="${C}" aria-controls="component-tray" aria-label="${C?"Compact":"Expand"} tray" title="${C?"Compact":"Expand"} tray">${G(C?"compact":"expand")}</button><button id="toggle-tray" class="icon-button" aria-expanded="${N}" aria-controls="component-tray" aria-label="${N?"Hide":"Show"} component tray" title="${N?"Hide":"Show"} component tray">${G(N?"hideTray":"showTray")}</button></div></div>
<div id="component-tray" class="inventory ${C?"all":""}">${eo.map((i)=>{let o=e.components.indexOf(i),a=ui(i);return`<button class="item ${a.kind} ${!y&&h===i.id?"active":""}" data-select="${d(i.id)}" aria-pressed="${!y&&h===i.id}">${i.thumbnail?`<span class="item-thumb">${i.thumbnail.box?`<span class="thumb-crop" style="width:min(100%,${76*i.thumbnail.box.w*e.comp.width/(i.thumbnail.box.h*e.comp.height)}px);aspect-ratio:${i.thumbnail.box.w*e.comp.width}/${i.thumbnail.box.h*e.comp.height}"><img alt="" loading="lazy" src="${oi(i.thumbnail.url)}" style="position:absolute;width:${100/i.thumbnail.box.w}%;max-width:none;left:${-100*i.thumbnail.box.x/i.thumbnail.box.w}%;top:${-100*i.thumbnail.box.y/i.thumbnail.box.h}%;"></span>`:`<img alt="" loading="lazy" src="${oi(i.thumbnail.url)}">`}</span>`:""}<span class="item-number">${a.kind==="approved"?gi:a.kind==="feedback"?wi:""}${o+1}<span class="item-medium">${G(Vi(i).code?"code":"image")}${d(Vi(i).label)}</span></span><strong>${d(i.name)}</strong><span class="state ${a.kind}">${d(a.label)}</span></button>`}).join("")}${(z==="pending"?[]:n.missing).map((i,o)=>`<button class="item feedback ${h===i.id?"active":""}" data-select="${d(i.id)}"><span class="item-number">${e.components.length+o+1}</span><strong>${d(i.name)}</strong><span class="state revise">Missing</span></button>`).join("")}${!eo.length&&(z==="pending"||!n.missing.length)?`<p class="inventory-empty">${z==="pending"?"Nothing left to review. Your decisions are ready.":"No components reviewed yet."}</p>`:""}</div></section>`:""}
${l?"":u?`<footer class="record-footer"><span>Round ${e.round} submitted · read-only</span><span>${m.approved} approved · ${m.revisions} changes requested</span></footer>`:`<footer class="${!m.pending&&!ni?"queue-complete":""}"><div>${!m.pending&&!ni?`<button id="show-summary" class="completion-link">${gi}${u?"Review sent":"All components reviewed"}</button>`:""}<button id="approve-rest" ${!m.pending?"hidden":""} ${!m.pending||ni?"disabled":""}>Approve ${m.approved||m.revisions?"remaining":"all"}</button><label class="check"><input id="inventory-confirm" type="checkbox" ${n.inventoryConfirmed?"checked":""}> Nothing missing from the comp</label></div><div class="submit-area"><p role="status">${d(Ko)}</p><button id="submit" class="primary" ${!m.canSubmit||ni||_||u?"disabled":""}>${_?"Sending…":u?"Review sent":m.hasFeedback?"Send feedback":"Approve & continue"}</button></div></footer>`}
</section><dialog id="comparison-dialog" aria-label="${l?"Enlarged page comparison":"Enlarged component comparison"}"></dialog>`;let $=r.querySelector("#comparison-dialog"),Y=r.querySelector(".comparison-panel"),ai=r.querySelector(".comparison-slot");if(V&&Y&&ai)ai.style.height=`${Ho}px`,$.append(Y),$.showModal();if(A)r.querySelectorAll(".decisions button,#feedback,#split,#save-feedback,#cancel-feedback,#undo-decision,#approve-rest,#submit,#inventory-confirm").forEach((i)=>i.disabled=!0);if(r.querySelector(".inspection-content").scrollTop=qo,u||_)r.querySelectorAll(".decisions button,#save-feedback,#cancel-feedback,#undo-decision,#approve-rest,#mark,#inventory-confirm,#missing-name,#missing-feedback,#feedback,#split,#remove-missing,[data-coordinate]").forEach((i)=>i.disabled=!0);let no=r.querySelector(".inventory");if(no)no.scrollLeft=$i;if(!bi&&N)Array.from(r.querySelectorAll(".inventory [data-select]")).find((i)=>i.dataset.select===h)?.scrollIntoView({block:"nearest",inline:"nearest"});if(w)r.getElementById(w)?.focus({preventScroll:!0});else if(T)Array.from(r.querySelectorAll(".item[data-select]")).find((i)=>i.dataset.select===T)?.focus({preventScroll:!0});let b=(i,o)=>r.querySelector(`#${i}`)?.addEventListener("click",o);function po(i,o=!1){if(K)return;if(y=!1,h=i,H="component",F=!1,I="fit",ri="isolated",X=!1,g(),o)r.querySelector("#expand-comparison")?.click()}r.querySelectorAll("[data-select]").forEach((i)=>i.onclick=()=>po(i.dataset.select,i.classList.contains("pin")&&e.components.some((o)=>o.id===i.dataset.select))),b("previous-round",()=>{X=!0,g()}),b("current-round",()=>{X=!1,g()}),b("review-changes",()=>{let i=ei().filter((v)=>ui(v).kind==="pending"),o=i.findIndex((v)=>v.id===h),a=i[(o+1)%i.length];if(a)y=!1,h=a.id,H="component",z="pending",X=!1,I="fit",F=!1,ri="isolated",g()}),r.querySelectorAll("[data-filter]").forEach((i)=>i.onclick=()=>{z=i.dataset.filter,y=!m.pending&&z==="pending";let o=ei().filter((v)=>Wi(v,n,z));if(!(z!=="pending"&&n.missing.some((v)=>v.id===h))&&!o.some((v)=>v.id===h)&&o.length)h=o[0].id,H="component",X=!1,I="fit",F=!1,ri="isolated";g()}),b("show-summary",()=>{y=!0,H="component",z="reviewed",g(),ti("review-summary")}),b("approve",()=>Ni("approve")),b("revise",ko),b("clear",()=>{if(c)delete n.decisions[c.id],delete J[c.id];U=null,y=!1,z="pending",g()}),b("cancel-feedback",()=>{if(c)delete J[c.id];if(xi)N=!0,xi=!1;g(),ti("revise")}),r.querySelector("#feedback-form")?.addEventListener("submit",(i)=>{i.preventDefault(),Ni("revise")}),r.querySelector("#feedback")?.addEventListener("keydown",(i)=>{let o=i;if(o.key==="Enter"&&(o.metaKey||o.ctrlKey)&&!o.isComposing)o.preventDefault(),o.stopPropagation(),Ni("revise")}),b("undo-decision",()=>{if(!U||_||u)return;let i=U;if(i.previous)n.decisions[i.id]=i.previous;else delete n.decisions[i.id];delete J[i.id],h=i.id,y=!1,X=!1,H="component",z="all",U=null,g(),ti("approve")}),b("overlay",()=>{F=!F,g()}),b("isolated",()=>{ri="isolated",g()}),b("context",()=>{ri="context",g()}),r.querySelector("#zoom")?.addEventListener("change",(i)=>{let o=i.target.value;I=o==="fit"?"fit":Number(o),g()}),b("background-checker",()=>{hi="checker",g()}),b("background-page",()=>{hi="page",g()}),b("show-all",()=>{C=!C,N=!0,g()}),b("toggle-tray",()=>{xi=!1,N=!N,g()}),b("show-comp",()=>{H="comp",g()}),b("show-component",()=>{H="component",g()}),b("mark",()=>{K=!K,g()}),b("add-box",()=>Oi({x:0.35,y:0.35,w:0.2,h:0.2})),b("remove-missing",()=>{n.missing=n.missing.filter((i)=>i.id!==h),h=e.components[0]?.id,g()}),b("approve-rest",()=>{if(ni)return;n=so(e,n),U=null,y=!0,z="reviewed",H="component",g(),ti("review-summary")}),r.querySelector("#inventory-confirm")?.addEventListener("change",(i)=>{n.inventoryConfirmed=i.target.checked,g()}),r.querySelector("#feedback")?.addEventListener("input",(i)=>{if(c&&J[c.id])J[c.id].feedback=i.target.value}),r.querySelector("#split")?.addEventListener("change",(i)=>{if(c&&J[c.id])J[c.id].split=i.target.checked}),r.querySelector("#missing-name")?.addEventListener("input",(i)=>{if(k)k.name=i.target.value;let o=r.querySelector("#submit");if(o)o.disabled=ni||_||u||!di(e,n).canSubmit}),r.querySelector("#missing-feedback")?.addEventListener("input",(i)=>{if(k)k.feedback=i.target.value}),r.querySelectorAll("[data-coordinate]").forEach((i)=>i.addEventListener("change",()=>{if(!k)return;let o=i.dataset.coordinate,a=Number(i.value)/100;if(Number.isFinite(a))k.box[o]=Math.max(o==="w"||o==="h"?0.001:0,Math.min(1,a));k.box.w=Math.min(k.box.w,1-k.box.x),k.box.h=Math.min(k.box.h,1-k.box.y),g()})),b("submit",()=>{Ii()});let W=r.querySelector(".map");function Li(i){let o=W.getBoundingClientRect();return{x:Math.max(0,Math.min(1,(i.clientX-o.left)/o.width)),y:Math.max(0,Math.min(1,(i.clientY-o.top)/o.height))}}function ao(i){let o=Li(i);return e.components.filter(({box:a})=>o.x>=a.x&&o.x<=a.x+a.w&&o.y>=a.y&&o.y<=a.y+a.h).sort((a,v)=>a.box.w*a.box.h-v.box.w*v.box.h)[0]}W?.addEventListener("click",(i)=>{if(K||i.target.closest("[data-select]"))return;let o=ao(i);if(o)po(o.id,!0)}),W?.addEventListener("pointermove",(i)=>{if(!K)W.style.cursor=ao(i)?"zoom-in":""}),W?.addEventListener("pointerdown",(i)=>{if(!K)return;O=Li(i),W.setPointerCapture(i.pointerId),i.preventDefault()}),W?.addEventListener("pointermove",(i)=>{if(!O)return;let o=Li(i);R={x:Math.min(O.x,o.x),y:Math.min(O.y,o.y),w:Math.abs(o.x-O.x),h:Math.abs(o.y-O.y)};let a=r.querySelector(".draw-box");a.hidden=!1,a.style.cssText=Bi(R)}),W?.addEventListener("pointerup",()=>{if(R&&R.w>0.01&&R.h>0.01)Oi(R);else O=null,R=null}),W?.addEventListener("pointercancel",()=>{O=null,R=null,g()});let xo=r.querySelector(".output"),yi=r.querySelector("iframe"),to=r.querySelector(".workbench"),li=r.querySelector(".inspection-content"),Xi=r.querySelector(".inspector");function Qi(){if(!li||!Xi)return;Xi.dataset.scrollAbove=String(li.scrollTop>1),Xi.dataset.scrollBelow=String(li.scrollHeight-li.clientHeight-li.scrollTop>1)}li?.addEventListener("scroll",Qi,{passive:!0});function zi(){let i=r.querySelector(".map-space");if(i&&i.clientWidth&&i.clientHeight){let s=Zi(e.comp.width,e.comp.height,Math.max(1,i.clientWidth-32),Math.max(1,i.clientHeight-32),"fit");W.style.width=`${s.width}px`,W.style.height=`${s.height}px`}let o=r.querySelector(".inspection-content"),a=Array.from(r.querySelectorAll(".pan-viewport"));if(o?.clientHeight){let s=V?Math.max(100,$.clientHeight-(Y?.querySelector(".compare-toolbar")?.clientHeight??0)-(Y?.querySelector(".expanded-title")?.clientHeight??0)-(Y?.querySelector(".view-controls")?.clientHeight??0)-112):Math.min(l?Number.POSITIVE_INFINITY:248,Math.max(100,o.clientHeight-((a[0]?.getBoundingClientRect().top??o.getBoundingClientRect().top)-o.getBoundingClientRect().top+o.scrollTop)-(Y?.querySelector(".view-controls")?.clientHeight??0)-12));a.forEach((q)=>q.style.height=`${s}px`)}if(t&&a.length){let s=Zi(t.box.w*L.comp.width,t.box.h*L.comp.height,Math.min(...a.map((q)=>q.clientWidth)),Math.min(...a.map((q)=>q.clientHeight)),I);r.querySelectorAll(".crop-stage").forEach((q)=>{q.style.width=`${s.width}px`,q.style.height=`${s.height}px`})}if(a.forEach((s)=>{let q=s.scrollWidth>s.clientWidth+1||s.scrollHeight>s.clientHeight+1;s.classList.toggle("pannable",q),s.style.cursor=V?"":"zoom-in",s.setAttribute("role",V?"region":"button"),s.title=V?q?"Move your pointer to pan. You can also scroll, swipe, or use arrow keys.":"":"Click to enlarge comparison"}),xo&&yi&&t){let s=xo.clientWidth/(t.box.w*L.comp.width);yi.style.transform=`scale(${s})`,yi.style.left=`${-t.box.x*L.comp.width*s}px`,yi.style.top=`${-t.box.y*L.comp.height*s}px`}let v=to.getBoundingClientRect(),Z=r.querySelector(".region"),ji=r.querySelector(".number"),qi=r.querySelector(".connector path");if(Z&&ji&&qi){let s=Z.getBoundingClientRect(),q=ji.getBoundingClientRect(),M=s.right-v.left,Mi=s.top+s.height/2-v.top,fo=q.left-v.left-8,_o=q.top+q.height/2-v.top;qi.setAttribute("d",`M ${M} ${Mi} H ${fo-14} V ${_o} H ${fo}`)}}function ci(i){if(!Y||!ai||i===V)return;let o=r.querySelector("#expand-comparison"),a=(V?$:Y).getBoundingClientRect(),v=window.matchMedia("(prefers-reduced-motion: reduce)").matches,Z=Y.querySelector(".pan-viewport"),ji=Z?Z.scrollLeft/Math.max(1,Z.scrollWidth-Z.clientWidth):0,qi=Z?Z.scrollTop/Math.max(1,Z.scrollHeight-Z.clientHeight):0,s=()=>Y.querySelectorAll(".pan-viewport").forEach((M)=>{M.scrollLeft=ji*Math.max(0,M.scrollWidth-M.clientWidth),M.scrollTop=qi*Math.max(0,M.scrollHeight-M.clientHeight)}),q=()=>{ai.append(Y),$.close(),ai.style.height="",V=!1,o.innerHTML=G("expand"),o.setAttribute("aria-label","Enlarge comparison"),o.title="Enlarge comparison",o.setAttribute("aria-expanded","false"),zi(),s(),o.focus({preventScroll:!0})};if(i){ai.style.height=`${a.height}px`,$.append(Y),$.showModal(),V=!0,o.innerHTML=G("compact"),o.setAttribute("aria-label","Restore comparison"),o.title="Restore comparison (Esc)",o.setAttribute("aria-expanded","true"),zi(),s(),o.focus({preventScroll:!0});let M=$.getBoundingClientRect();if(!v)$.animate([{transform:`translate(${a.x-M.x}px,${a.y-M.y}px) scale(${a.width/M.width},${a.height/M.height})`,opacity:0.6},{transform:"none",opacity:1}],{duration:240,easing:"cubic-bezier(.2,.8,.2,1)"})}else{if(o.disabled)return;let M=ai.getBoundingClientRect();if(v){q();return}o.disabled=!0;let Mi=$.animate([{transform:"none",opacity:1},{transform:`translate(${M.x-a.x}px,${M.y-a.y}px) scale(${M.width/a.width},${M.height/a.height})`,opacity:0.6}],{duration:200,easing:"cubic-bezier(.4,0,.2,1)",fill:"forwards"});Mi.finished.then(()=>{if($.isConnected)Mi.cancel(),o.disabled=!1,q()}).catch(()=>{})}}b("expand-comparison",()=>ci(!V)),$.addEventListener("cancel",(i)=>{i.preventDefault(),i.stopPropagation(),ci(!1)}),$.addEventListener("keydown",(i)=>{if(i.key==="Escape")i.preventDefault(),i.stopPropagation(),ci(!1)}),P=new ResizeObserver(()=>{zi(),Qi()}),P.observe(to),P.observe($);let lo=r.querySelector(".inspection-content");if(lo)P.observe(lo);let ho=r.querySelector(".repair-context");if(ho)P.observe(ho);let go=Y?.querySelector(".compare-toolbar");if(go)P.observe(go);zi();let ki=Array.from(r.querySelectorAll(".pan-viewport"));if(ki.forEach((i)=>{i.scrollLeft=Vo,i.scrollTop=Jo}),ki.forEach((i)=>{i.querySelectorAll("img").forEach((o)=>o.draggable=!1),i.addEventListener("click",()=>{if(!V)ci(!0)}),i.addEventListener("pointermove",(o)=>{if(o.pointerType!=="mouse"||o.buttons||!i.classList.contains("pannable"))return;let a=i.getBoundingClientRect();i.scrollLeft=Ui(o.clientX,a.left,i.clientWidth,i.scrollWidth),i.scrollTop=Ui(o.clientY,a.top,i.clientHeight,i.scrollHeight)}),i.addEventListener("keydown",(o)=>{if(!V&&(o.key==="Enter"||o.key===" ")){o.preventDefault(),o.stopPropagation(),ci(!0);return}let v={ArrowLeft:[-48,0],ArrowRight:[48,0],ArrowUp:[0,-48],ArrowDown:[0,48]}[o.key];if(!v)return;o.preventDefault(),o.stopPropagation(),i.scrollLeft+=v[0],i.scrollTop+=v[1]})}),ki.forEach((i)=>i.addEventListener("scroll",()=>{for(let o of ki)if(o!==i){if(o.scrollLeft!==i.scrollLeft)o.scrollLeft=i.scrollLeft;if(o.scrollTop!==i.scrollTop)o.scrollTop=i.scrollTop}})),jo&&window.matchMedia("(max-width:800px)").matches){let i=r.querySelector(".inspection-content"),o=r.querySelector(".compare");if(i&&o)i.scrollTop+=o.getBoundingClientRect().top-i.getBoundingClientRect().top}if(Qi(),window.scrollTo(fi,mi),!u)x.onDraftChange?.(structuredClone(n))}return g(),{destroy(){P?.disconnect(),r.replaceChildren()},getDraft(){return structuredClone(n)}}}async function Xo(){let p=document.getElementById("review"),e=await fetch("/packet",{cache:"no-store"});if(!e.ok)throw Error("The review packet could not be loaded. Reload to retry.");let x=await e.json();if(x.sourceStatus){let r=document.createElement("p");r.textContent=x.sourceStatus,p.before(r)}uo(p,x.packet,{initialDraft:x.draft,history:x.history,completed:!!x.receipt,onSubmit:async(r)=>{let n=await fetch("/decision",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),l=await n.json();if(!n.ok)throw Error(l.error??"The review could not be saved. Try again.")}})}Xo().catch((p)=>{let e=document.createElement("p");e.textContent=p instanceof Error?p.message:String(p),document.getElementById("review")?.replaceChildren(e)});})();
Reference in New Issue View Git Blame Copy Permalink