skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-17 16:46:31 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
8d0a82da4af24327b3cf150641d5b8e8885b2bc2
pbakaus_impeccable/crates/context/assets/component-review.js
T
Paul Bakaus 8d0a82da4a Clarify completed component reviews and isolate feedback styles 
AI-assisted implementation with Codex, directed and visually reviewed by the maintainer.
2026-09-14 16:30:28 -07:00

170 lines
68 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 ki(p,o){let a=o?.changes[p],r=o?.feedback?.[p],n=r?.decision??(o?.submitted?o.draft.decisions[p]:void 0),c=a?.kind==="unchanged"&&(a.carried??(o?.submitted&&n?.action==="approve"))===!0;return{change:a,prior:n,feedbackRound:r?.round??o?.packet.round,carried:c,label:a?.kind==="added"?"New component":a?.kind==="changed"?"Review again":c?"Approval kept":n?.action==="revise"?"Changes still requested":"Awaiting review"}}function I(p,o,a){let r=o.decisions[p.id],n=r?.revision===p.revision?r:void 0,c=ki(p.id,a);if(n?.action==="approve")return{kind:"approved",label:c.carried?"Approval kept":"Approved",priority:3};if(n?.action==="revise")return{kind:"feedback",label:"Feedback ready",priority:2};return{kind:"pending",label:c.change?.kind==="changed"?"Review again":c.change?.kind==="added"?"New · review needed":"Not reviewed",priority:c.change?.kind==="changed"||c.change?.kind==="added"?0:1}}function po(p){return{packetRevision:p.revision,decisions:{},missing:[],inventoryConfirmed:!1}}function Vo(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 li(p,o){let a=p.components.map((s)=>o.decisions[s.id]?.revision===s.revision?o.decisions[s.id]:void 0),r=a.filter((s)=>s?.action==="approve").length,n=a.filter((s)=>s?.action==="revise").length,c=a.length-r-n,g=n>0||o.missing.length>0;return{approved:r,revisions:n,pending:c,hasFeedback:g,canSubmit:o.packetRevision===p.revision&&o.missing.every((s)=>s.name.trim()&&Vo(s.box))&&(g||!c&&o.inventoryConfirmed)}}function ao(p,o){let a={...o.decisions};for(let r of p.components)if(!a[r.id]||a[r.id].revision!==r.revision)a[r.id]={revision:r.revision,action:"approve",feedback:"",split:!1};return{...o,decisions:a}}function to(p,o){if(!li(p,o).canSubmit)throw Error("Review is incomplete or stale");return{schemaVersion:1,requestId:p.id,...structuredClone(o)}}function ji(p){let o=p.preview.kind==="page"||p.preview.sourceKind==="page",a=p.preview.sourceKind==="page";return{code:o,captured:a,label:o?p.medium.match(/html|css|svg/i)?p.medium:"HTML / CSS / SVG":"Raster",caption:o?a?"Rendered component":"Live component":"Produced asset",fileLabel:a?"Open captured preview":"Open source image"}}function xo(p,o,a){let r=p.components.findIndex((n)=>n.id===a);for(let n=1;n<=p.components.length;n++){let c=p.components[(r+n)%p.components.length];if(I(c,o).kind==="pending")return c.id}}function Yi(p,o,a){return a==="all"||I(p,o).kind==="pending"===(a==="pending")}function _i(p,o,a,r,n){let c=n==="fit"?Math.min(a/p,r/o):n;return{scale:c,width:p*c,height:o*c}}function Li(p,o,a,r){if(a<=0||r<=a)return 0;return Math.max(0,Math.min(1,((p-o)/a-0.08)/0.84))*(r-a)}var lo=`
: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}
.preview-round{justify-content:flex-end;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 ho=`
: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{margin:0 0 16px;font-size:12px}.previous-feedback{margin:0;padding:12px 14px;background:#f0f0ed;border-radius:4px;overflow-wrap:anywhere}.previous-feedback h3{margin:0;font-size:13px;font-weight:600;display:flex;align-items:baseline;justify-content:space-between;gap:12px}.previous-feedback h3 span{font-size:11px;color:var(--muted);font-weight:400}.previous-feedback .previous-verdict{color:var(--warn);font-size:11px;margin-top:6px}.previous-feedback blockquote{margin:4px 0 0;white-space:pre-wrap;font-size:13px;line-height:1.5}.previous-feedback>p:last-child:not(.previous-verdict){margin-top:8px}.kept-approval{color:var(--teal);font-size:12px}
.preview-round{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;font-size:12px}.preview-round>span{font-weight:500}.round-switch{display:flex;gap:2px;border:1px solid var(--line);border-radius:4px;padding:2px;background:#eee}.round-switch button{min-height:30px;font-size:11px;padding:5px 8px;border:0;background:transparent}.round-switch button[aria-pressed=true]{background:var(--paper);box-shadow:0 1px 2px #0002}
.changed-files{margin-top:10px;color:var(--muted)}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}.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}
`+lo+`
.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}.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:8px;padding:4px 0;min-width:0}
.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)}
@media(forced-colors:active){.zoom-control select{appearance:auto;padding:6px 8px}.zoom-control>.utility-icon{display:none}}
`;var Eo={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 J(p){return`<svg class="utility-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${Eo[p]}</svg>`}var l=(p)=>p.replace(/[&<>"']/g,(o)=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[o]),P=(p)=>`${p*100}%`,ii=(p)=>{let o=new URL(p,location.href);if(!["http:","https:"].includes(o.protocol))throw Error("Unsupported preview URL");return l(o.href)};function go(p,o,a){let r=p.attachShadow({mode:"open"}),n=structuredClone(a.initialDraft??po(o)),c=()=>[...o.components].sort((f,m)=>I(f,n,a.history).priority-I(m,n,a.history).priority),g=c().find((f)=>I(f,n,a.history).kind!=="approved")?.id??o.components[0]?.id,s=li(o,n).pending?"pending":"reviewed",L=!1,T=!1,H=a.completed??!1,qi="",N={},v=!li(o,n).pending,U=null,so=/Mac|iPhone|iPad/.test(navigator.platform)?"⌘Enter":"Ctrl+Enter",O=!1,G=!1,R=!1,V=!0,pi=!1,q="comp",Ti=q,W="fit",di="checker",X=!1,oi="isolated",Mi,Xi="fit",Z=null,A=null,ai=null,hi='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 8 3 3 7-7"/></svg>',si='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 11 1 2 2-1 7-7-3-3-7 7v2Z"/></svg>',Qi=(f)=>`left:${P(f.x)};top:${P(f.y)};width:${P(f.w)};height:${P(f.h)}`;function ti(f){r.getElementById(f)?.focus({preventScroll:!0})}function fo(f){let m=xo(o,n,f);if(v=!m,m)g=m;q="component",X=!1,O=!1,W="fit",oi="isolated",s=v?"reviewed":"pending",d(),ti(v?"review-summary":N[g]?"feedback":"approve")}function Hi(f){if(T||H||X)return;let m=o.components.find((Vi)=>Vi.id===g);if(!m)return;let Q=n.decisions[m.id],gi=Q?.revision===m.revision?Q:void 0;U={id:m.id,name:m.name,action:f,previous:Q?{...Q}:void 0};let fi=N[m.id]??gi;if(n.decisions[m.id]={revision:m.revision,action:f,feedback:f==="revise"?fi?.feedback??"":"",split:f==="revise"&&(fi?.split??!1)},delete N[m.id],pi)V=!0,pi=!1;fo(m.id)}function co(){if(T||H||X)return;let f=o.components.find((gi)=>gi.id===g);if(!f)return;let m=n.decisions[f.id],Q=m?.revision===f.revision?m:void 0;if(N[f.id]??={feedback:Q?.feedback??"",split:Q?.split??!1},V&&(r.querySelector(".workbench")?.clientHeight??0)<420)pi=!0,V=!1;v=!1,d(),ti("feedback")}function Ui(f){let m=`missing-${crypto.randomUUID()}`;n.missing.push({id:m,name:"Missing component",feedback:"",box:f}),n.inventoryConfirmed=!1,v=!1,g=m,q="component",L=!1,Z=null,A=null,d(),r.querySelector("#missing-name")?.focus()}function d(){ai?.disconnect();let f=r.activeElement,m=f?.id,Q=f?.dataset.select,gi=window.scrollX,fi=window.scrollY,Vi=r.querySelector(".inventory")?.scrollLeft??0,ci=Mi===g,mo=q==="component"&&(!ci||Ti!==q);Ti=q;let wo=ci?r.querySelector(".inspection-content")?.scrollTop??0:0,bo=ci&&(r.querySelector(".changed-files")?.open??!1),uo=r.querySelector(".comparison-slot")?.clientHeight??200,Wi=r.querySelector(".pan-viewport"),Zi=Mi===g&&Xi===W,vo=Zi?Wi?.scrollLeft??0:0,yo=Zi?Wi?.scrollTop??0:0;Mi=g,Xi=W;let h=o.components.find((i)=>i.id===g),z=n.missing.find((i)=>i.id===g),Ai=h?.box??z?.box,Bi=h?o.components.indexOf(h)+1:o.components.length+n.missing.findIndex((i)=>i.id===g)+1,Ii=h?n.decisions[h.id]:void 0,ei=Ii?.revision===h?.revision?Ii:void 0,Ei=h?N[h.id]:void 0,D=Object.keys(N).length>0,zo=h?!o.components.some((i)=>i.id!==h.id&&I(i,n).kind==="pending"):!1,Ji=U?`<div class="decision-notice"><span role="status">${l(U.name)} ${U.action==="approve"?"approved":"flagged for repair"}.</span><button id="undo-decision" class="quiet">Undo</button></div>`:"",u=li(o,n),M=a.history,$=h?ki(h.id,M):void 0,ri=M?.packet.components.find((i)=>i.id===h?.id),B=X&&!!ri,t=B?ri:h,K=B?M.packet:o,Oi=Object.values(M?.changes??{}),Ri=Oi.filter((i)=>i.kind==="changed").length,Di=Oi.filter((i)=>i.kind==="added").length,Ni=o.components.filter((i)=>I(i,n,M).kind==="approved"&&ki(i.id,M).carried).length,mi=(i)=>I(i,n,M),ko=u.approved+u.revisions+n.missing.length,Si=(s==="pending"?c():o.components).filter((i)=>Yi(i,n,s)),jo=[u.revisions+n.missing.length?`${u.revisions+n.missing.length} feedback ready`:"",Ni?`${Ni} ${Ni===1?"approval":"approvals"} kept`:"",Ri?`${Ri} changed`:"",Di?`${Di} added`:"",M?.removed.length?`${M.removed.length} removed`:""].filter(Boolean).join(" · "),qo=qi||(D?"Save or cancel your open feedback before sending.":H?a.preview?"Preview submitted. No run changed.":"Review submitted.":u.hasFeedback?"Ready to send for corrections.":u.pending?`${u.pending} left to review`:!n.inventoryConfirmed?"Confirm the map is complete.":"Ready to continue."),S=t?ji(t):null,Ci=t?.preview.kind==="image"&&!S?.code,C=!!(t?.context&&oi==="context"),Fi=t&&(C?t.context?.kind!=="image":t.preview.kind==="page"),Pi=C&&t?.context?t.context.url:t?.preview.url,Mo=S?.code?`${S.label} · ${S.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>${ho}</style><section class="review" aria-label="Component review" style="--comp-background:${/^#[0-9a-f]{6}$/i.test(o.comp.background??"")?o.comp.background:"#eeeeee"}">
<header><div><h1>Review the components.</h1><p>${l(o.title)} <span>· Round ${o.round}</span></p></div>${a.preview?'<span class="badge">Interactive preview</span>':""}</header>
${a.preview?'<p class="preview-note">Historical hotel artwork for testing this interface. Decisions stay in this preview; no run is changed.</p>':""}
${M?`<section class="round-summary" aria-label="Changes since previous round"><p><strong>${u.pending} ${u.pending===1?"component":"components"} to review</strong><span>${jo}</span></p>${u.pending?`<button id="review-changes" class="icon-button" aria-label="Next to review" title="Next to review">${J("next")}</button>`:""}${M.removed.length?`<details><summary>Removed from the map</summary><p>${M.removed.map((i)=>l(i.name)).join(" · ")}. Confirm these omissions are intentional before accepting the map.</p></details>`:""}</section>`:""}
<div class="mobile-panes" role="group" aria-label="Inspection view"><button id="show-comp" aria-pressed="${q==="comp"}">Approved comp</button><button id="show-component" aria-pressed="${q==="component"}">Component ${Bi}</button></div>
<div class="workbench" data-mobile-pane="${q}"><svg class="connector" aria-hidden="true"><path /></svg>
<section class="reference" aria-label="Approved composition">
<div class="section-head"><h2>Approved comp</h2><button id="mark" class="label-icon" aria-pressed="${L}">${J(L?"close":"mark")}${L?"Cancel":"Mark missing"}</button></div>
<div class="map-space"><div class="map ${L?"marking":""}" style="aspect-ratio:${o.comp.width}/${o.comp.height}">
<img class="comp" src="${ii(o.comp.url)}" alt="Approved composition for ${l(o.title)}" draggable="false">
${Ai&&!v?`<div class="region" style="${Qi(Ai)}"></div>`:""}
${o.components.map((i,e)=>{let x=mi(i);return`<button class="pin ${x.kind} ${!v&&g===i.id?"selected":""}" data-select="${l(i.id)}" style="left:${P(Math.min(0.96,i.box.x+i.box.w/2))};top:${P(Math.max(0.035,i.box.y))}" aria-label="Inspect ${l(i.name)} — ${l(x.label)}" title="${e+1}. ${l(i.name)} · ${l(x.label)}" aria-pressed="${!v&&g===i.id}">${x.kind==="approved"?hi:x.kind==="feedback"?si:""}<span>${e+1}</span></button>`}).join("")}
${n.missing.map((i,e)=>`<button class="pin feedback ${!v&&g===i.id?"selected":""}" data-select="${l(i.id)}" style="left:${P(i.box.x+i.box.w/2)};top:${P(i.box.y)}" aria-label="Inspect missing ${l(i.name)}" title="Missing: ${l(i.name)}">${si}<span>${o.components.length+e+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">${si}</i> Feedback ready</span><span><i class="legend-approved">${hi}</i> Approved</span></div>
${L?'<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="Selected component">
<div class="section-head"><h2>${v?"Review summary":`<span class="number">${Bi}</span> ${l(h?.name??z?.name??"Component")}`}</h2></div><div class="inspection-content" role="region" aria-label="Component comparison" tabindex="0">
${v?`<section class="review-summary" id="review-summary" tabindex="-1"><div class="completion-mark" aria-hidden="true">${hi}</div><h2>${H?"Review sent.":"All components reviewed."}</h2><p>${u.approved} approved · ${u.revisions} flagged for repair${n.missing.length?` · ${n.missing.length} missing`:""}</p><p>${H?"Your decisions are saved.":u.hasFeedback?"Send your feedback to start the next repair round.":"Confirm nothing is missing, then approve and continue."}</p><div class="summary-decisions">${o.components.map((i)=>{let e=n.decisions[i.id],x=mi(i);return`<button data-select="${l(i.id)}"><strong>${l(i.name)}</strong><span>${x.kind==="pending"?"Not reviewed":x.kind==="feedback"?"Needs work":"Approved"}</span>${e?.action==="revise"?`<small>${l(e.feedback||"No note — agent will diagnose.")}</small>`:""}</button>`}).join("")}${n.missing.map((i)=>`<button data-select="${l(i.id)}"><strong>${l(i.name)}</strong><span>Missing</span><small>${l(i.feedback)}</small></button>`).join("")}</div></section></div>${Ji?`<div class="review-form">${Ji}</div>`:""}`:h?`<div class="material">${J(S.code?"code":"image")}<strong>${l(Mo)}</strong><span>${t?.material?`${t.material.width} × ${t.material.height} px`:""}</span></div>
${M?`<div class="repair-context">
${$?.prior?.action==="revise"?`<section class="previous-feedback" aria-label="Previous feedback"><h3>Previous feedback <span>Round ${$.feedbackRound}</span></h3><p class="previous-verdict">Needs work</p><blockquote>${l($.prior.feedback||"No written feedback was supplied.")}</blockquote>${$.prior.split?"<p>Requested: split into separately reviewable components.</p>":""}</section>`:$?.carried?'<p class="kept-approval">Unchanged · approval kept</p>':""}
${$?.change?.kind==="changed"?`<details class="changed-files" ${bo?"open":""}><summary>${$.change.files.length?`${$.change.files.length} changed ${$.change.files.length===1?"file":"files"}`:$.change.reasons.includes("region")?"Region changed":ri?.note!==h.note?"Description changed · files unchanged":"Component definition changed · files unchanged"}</summary>${$.change.files.length?`<ul>${$.change.files.map((i)=>`<li>${l(i)}</li>`).join("")}</ul>`:""}${ri&&ri.note!==h.note?`<dl class="description-diff"><dt>Previous description</dt><dd>${l(ri.note)}</dd><dt>Current description</dt><dd>${l(h.note)}</dd></dl>`:""}</details>`:""}
</div>`:""}
${ri?`<div class="preview-round"><div class="round-switch" role="group" aria-label="Preview version"><button id="current-round" aria-pressed="${!B}">Current · round ${o.round}</button><button id="previous-round" aria-pressed="${B}">Previous · round ${M.packet.round}</button></div></div>`:""}
<div class="comparison-slot"><div class="comparison-panel"><h2 class="expanded-title">${l(t.name)}</h2><div class="compare-toolbar"><label class="zoom-control" title="Comparison zoom · based on comp pixels">${J("zoom")}<select id="zoom" aria-label="Comparison zoom">${[["fit","Fit"],["1","100%"],["2","200%"],["4","400%"]].map(([i,e])=>`<option value="${i}" ${String(W)===i?"selected":""}>${e}</option>`).join("")}</select>${J("chevronDown")}</label><button id="overlay" class="overlay-control" aria-label="Overlay comp" title="Overlay approved comp" aria-pressed="${O}"><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>Overlay</button><div class="comparison-actions" role="group" aria-label="Comparison view actions"><button id="expand-comparison" class="icon-button" aria-label="${G?"Restore comparison":"Enlarge comparison"}" title="${G?"Restore comparison (Esc)":"Enlarge comparison"}" aria-expanded="${G}">${J(G?"compact":"expand")}</button>${t?.preview.kind==="image"?`<a class="icon-button source-link" href="${ii(t.preview.url)}" target="_blank" rel="noopener" aria-label="${S.fileLabel}" title="${S.fileLabel}">${J("external")}</a>`:""}</div></div>
<div class="compare">
<figure><figcaption>${B?`Comp · Round ${M.packet.round}`:"In the comp"}</figcaption><div class="pan-viewport" aria-label="Reference comparison canvas" tabindex="0"><div class="crop-stage"><img class="crop-image" src="${ii(K.comp.url)}" alt="Reference region for ${l(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>${B?`Previous · Round ${M.packet.round}`:M?`Current · Round ${o.round}`:C?"In the page":S.caption}</figcaption><div class="pan-viewport" aria-label="Produced comparison canvas" tabindex="0"><div class="output crop-stage ${Ci&&!C&&!Fi&&di==="checker"?"checker":""}">${!Fi?`<img class="asset" src="${ii(Pi)}" alt="Produced ${l(t.name)}" style="object-position:${l(t.preview.position??"center")}">`:`<iframe aria-hidden="true" title="Rendered ${l(t.name)}" src="${ii(Pi)}" sandbox="" tabindex="-1" width="${K.comp.width}" height="${K.comp.height}"></iframe>`}${O?`<img class="crop-image overlay-image" src="${ii(K.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>
${Ci?`<div class="view-controls">${t.context?`<div role="group" aria-label="Asset view"><button id="isolated" aria-pressed="${!C}">Asset only</button><button id="context" aria-pressed="${C}">In page</button></div>`:""}<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="${di==="checker"}" ${C?"disabled":""}><span class="background-swatch checker"></span></button><button id="background-page" class="swatch-button" aria-label="${K.comp.background?"Page color":"Neutral"} background" title="${K.comp.background?"Page color":"Neutral"} background" aria-pressed="${di==="page"}" ${C?"disabled":""}><span class="background-swatch page-swatch"></span></button></div></div>`:""}
</div></div><div class="component-details"><p class="layering">${l(t?.context?.layering??"Layer placement not recorded.")}</p>
<p class="component-note">${l(t.note)}</p>
</div></div><div class="review-form">${Ji}${B?'<p class="previous-notice">Viewing the previous round. Return to Current to make a decision.</p>':""}<div class="decisions" role="group" aria-label="Decision for ${l(h.name)}"><div class="decision-title"><strong>Your review <span>Round ${o.round}</span></strong>${B?"<p>Return to Current to review this round.</p>":""}</div><button id="approve" class="decision-approve ${ei?.action==="approve"?"approved":""}" aria-pressed="${ei?.action==="approve"}">Looks good</button><button id="revise" class="decision-revise ${ei?.action==="revise"?"revise":""}" aria-pressed="${ei?.action==="revise"}">Needs work</button>${ei?`<button id="clear" class="quiet icon-button" aria-label="Clear decision" title="Clear decision">${J("undo")}</button>`:""}</div>
${Ei?`<form id="feedback-form"><div class="feedback-fields"><label class="feedback-field">What needs to change?<textarea id="feedback" aria-describedby="feedback-hint">${l(Ei.feedback)}</textarea></label><p id="feedback-hint" class="feedback-hint">Optional — leave blank for the agent to diagnose.</p><label class="check"><input id="split" type="checkbox" ${Ei.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">${zo?"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">${so}</span></div></form>`:ei?.action==="revise"?`<p class="saved-feedback">${l(ei.feedback||"No note — agent will diagnose.")}</p>`:""}
</div>`:z?`<p>This piece will be added to the unresolved inventory.</p><label class="feedback-field">Name<input id="missing-name" value="${l(z.name)}"></label><label class="feedback-field">What is missing?<textarea id="missing-feedback">${l(z.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(z.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>
<section class="inventory-section ${V?"":"tray-collapsed"} ${R&&V?"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="${s==="pending"}">To review <b>${u.pending}</b></button><button data-filter="reviewed" aria-pressed="${s==="reviewed"}">Reviewed <b>${ko}</b></button><button data-filter="all" aria-pressed="${s==="all"}">All <b>${o.components.length+n.missing.length}</b></button></div><div class="tray-actions"><button id="show-all" class="icon-button" aria-pressed="${R}" aria-controls="component-tray" aria-label="${R?"Compact":"Expand"} tray" title="${R?"Compact":"Expand"} tray">${J(R?"compact":"expand")}</button><button id="toggle-tray" class="icon-button" aria-expanded="${V}" aria-controls="component-tray" aria-label="${V?"Hide":"Show"} component tray" title="${V?"Hide":"Show"} component tray">${J(V?"hideTray":"showTray")}</button></div></div>
<div id="component-tray" class="inventory ${R?"all":""}">${Si.map((i)=>{let e=o.components.indexOf(i),x=mi(i);return`<button class="item ${x.kind} ${!v&&g===i.id?"active":""}" data-select="${l(i.id)}" aria-pressed="${!v&&g===i.id}">${i.thumbnail?`<span class="item-thumb">${i.thumbnail.box?`<span class="thumb-crop" style="width:min(100%,${76*i.thumbnail.box.w*o.comp.width/(i.thumbnail.box.h*o.comp.height)}px);aspect-ratio:${i.thumbnail.box.w*o.comp.width}/${i.thumbnail.box.h*o.comp.height}"><img alt="" loading="lazy" src="${ii(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="${ii(i.thumbnail.url)}">`}</span>`:""}<span class="item-number">${x.kind==="approved"?hi:x.kind==="feedback"?si:""}${e+1}<span class="item-medium">${J(ji(i).code?"code":"image")}${l(ji(i).label)}</span></span><strong>${l(i.name)}</strong><span class="state ${x.kind}">${l(x.label)}</span></button>`}).join("")}${(s==="pending"?[]:n.missing).map((i,e)=>`<button class="item feedback ${g===i.id?"active":""}" data-select="${l(i.id)}"><span class="item-number">${o.components.length+e+1}</span><strong>${l(i.name)}</strong><span class="state revise">Missing</span></button>`).join("")}${!Si.length&&(s==="pending"||!n.missing.length)?`<p class="inventory-empty">${s==="pending"?"Nothing left to review. Your decisions are ready.":"No components reviewed yet."}</p>`:""}</div></section>
<footer class="${!u.pending&&!D?"queue-complete":""}"><div>${!u.pending&&!D?`<button id="show-summary" class="completion-link">${hi}${H?"Review sent":"All components reviewed"}</button>`:""}<button id="approve-rest" ${!u.pending?"hidden":""} ${!u.pending||D?"disabled":""}>Approve ${u.approved||u.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">${l(qo)}</p><button id="submit" class="primary" ${!u.canSubmit||D||T||H?"disabled":""}>${T?"Sending…":H?"Review sent":u.hasFeedback?"Send feedback":"Approve & continue"}</button></div></footer>
</section><dialog id="comparison-dialog" aria-label="Enlarged component comparison"></dialog>`;let E=r.querySelector("#comparison-dialog"),Y=r.querySelector(".comparison-panel"),ni=r.querySelector(".comparison-slot");if(G&&Y&&ni)ni.style.height=`${uo}px`,E.append(Y),E.showModal();if(B)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=wo,H||T)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);if(r.querySelector(".inventory").scrollLeft=Vi,!ci&&V)Array.from(r.querySelectorAll(".inventory [data-select]")).find((i)=>i.dataset.select===g)?.scrollIntoView({block:"nearest",inline:"nearest"});if(m)r.getElementById(m)?.focus({preventScroll:!0});else if(Q)Array.from(r.querySelectorAll(".item[data-select]")).find((i)=>i.dataset.select===Q)?.focus({preventScroll:!0});let b=(i,e)=>r.querySelector(`#${i}`)?.addEventListener("click",e);r.querySelectorAll("[data-select]").forEach((i)=>i.onclick=()=>{if(L)return;v=!1,g=i.dataset.select,q="component",O=!1,W="fit",oi="isolated",X=!1,d()}),b("previous-round",()=>{X=!0,d()}),b("current-round",()=>{X=!1,d()}),b("review-changes",()=>{let i=c().filter((y)=>mi(y).kind==="pending"),e=i.findIndex((y)=>y.id===g),x=i[(e+1)%i.length];if(x)v=!1,g=x.id,q="component",s="pending",X=!1,W="fit",O=!1,oi="isolated",d()}),r.querySelectorAll("[data-filter]").forEach((i)=>i.onclick=()=>{s=i.dataset.filter,v=!u.pending&&s==="pending";let e=c().filter((y)=>Yi(y,n,s));if(!(s!=="pending"&&n.missing.some((y)=>y.id===g))&&!e.some((y)=>y.id===g)&&e.length)g=e[0].id,q="component",X=!1,W="fit",O=!1,oi="isolated";d()}),b("show-summary",()=>{v=!0,q="component",s="reviewed",d(),ti("review-summary")}),b("approve",()=>Hi("approve")),b("revise",co),b("clear",()=>{if(h)delete n.decisions[h.id],delete N[h.id];U=null,v=!1,s="pending",d()}),b("cancel-feedback",()=>{if(h)delete N[h.id];if(pi)V=!0,pi=!1;d(),ti("revise")}),r.querySelector("#feedback-form")?.addEventListener("submit",(i)=>{i.preventDefault(),Hi("revise")}),r.querySelector("#feedback")?.addEventListener("keydown",(i)=>{let e=i;if(e.key==="Enter"&&(e.metaKey||e.ctrlKey)&&!e.isComposing)e.preventDefault(),e.stopPropagation(),Hi("revise")}),b("undo-decision",()=>{if(!U||T||H)return;let i=U;if(i.previous)n.decisions[i.id]=i.previous;else delete n.decisions[i.id];delete N[i.id],g=i.id,v=!1,X=!1,q="component",s="all",U=null,d(),ti("approve")}),b("overlay",()=>{O=!O,d()}),b("isolated",()=>{oi="isolated",d()}),b("context",()=>{oi="context",d()}),r.querySelector("#zoom")?.addEventListener("change",(i)=>{let e=i.target.value;W=e==="fit"?"fit":Number(e),d()}),b("background-checker",()=>{di="checker",d()}),b("background-page",()=>{di="page",d()}),b("show-all",()=>{R=!R,V=!0,d()}),b("toggle-tray",()=>{pi=!1,V=!V,d()}),b("show-comp",()=>{q="comp",d()}),b("show-component",()=>{q="component",d()}),b("mark",()=>{L=!L,d()}),b("add-box",()=>Ui({x:0.35,y:0.35,w:0.2,h:0.2})),b("remove-missing",()=>{n.missing=n.missing.filter((i)=>i.id!==g),g=o.components[0]?.id,d()}),b("approve-rest",()=>{if(D)return;n=ao(o,n),U=null,v=!0,s="reviewed",q="component",d(),ti("review-summary")}),r.querySelector("#inventory-confirm")?.addEventListener("change",(i)=>{n.inventoryConfirmed=i.target.checked,d()}),r.querySelector("#feedback")?.addEventListener("input",(i)=>{if(h&&N[h.id])N[h.id].feedback=i.target.value}),r.querySelector("#split")?.addEventListener("change",(i)=>{if(h&&N[h.id])N[h.id].split=i.target.checked}),r.querySelector("#missing-name")?.addEventListener("input",(i)=>{if(z)z.name=i.target.value;let e=r.querySelector("#submit");if(e)e.disabled=D||T||H||!li(o,n).canSubmit}),r.querySelector("#missing-feedback")?.addEventListener("input",(i)=>{if(z)z.feedback=i.target.value}),r.querySelectorAll("[data-coordinate]").forEach((i)=>i.addEventListener("change",()=>{if(!z)return;let e=i.dataset.coordinate,x=Number(i.value)/100;if(Number.isFinite(x))z.box[e]=Math.max(e==="w"||e==="h"?0.001:0,Math.min(1,x));z.box.w=Math.min(z.box.w,1-z.box.x),z.box.h=Math.min(z.box.h,1-z.box.y),d()})),b("submit",async()=>{if(D||T||H)return;T=!0,qi="",d();try{await a.onSubmit(to(o,n)),H=!0,v=!0,s="reviewed"}catch(i){qi=i instanceof Error?i.message:"Could not save. Try again."}finally{T=!1,d()}});let F=r.querySelector(".map");function io(i){let e=F.getBoundingClientRect();return{x:Math.max(0,Math.min(1,(i.clientX-e.left)/e.width)),y:Math.max(0,Math.min(1,(i.clientY-e.top)/e.height))}}F.addEventListener("pointerdown",(i)=>{if(!L)return;Z=io(i),F.setPointerCapture(i.pointerId),i.preventDefault()}),F.addEventListener("pointermove",(i)=>{if(!Z)return;let e=io(i);A={x:Math.min(Z.x,e.x),y:Math.min(Z.y,e.y),w:Math.abs(e.x-Z.x),h:Math.abs(e.y-Z.y)};let x=r.querySelector(".draw-box");x.hidden=!1,x.style.cssText=Qi(A)}),F.addEventListener("pointerup",()=>{if(A&&A.w>0.01&&A.h>0.01)Ui(A);else Z=null,A=null}),F.addEventListener("pointercancel",()=>{Z=null,A=null,d()});let oo=r.querySelector(".output"),wi=r.querySelector("iframe"),eo=r.querySelector(".workbench"),xi=r.querySelector(".inspection-content"),$i=r.querySelector(".inspector");function Gi(){if(!xi||!$i)return;$i.dataset.scrollAbove=String(xi.scrollTop>1),$i.dataset.scrollBelow=String(xi.scrollHeight-xi.clientHeight-xi.scrollTop>1)}xi?.addEventListener("scroll",Gi,{passive:!0});function bi(){let i=r.querySelector(".map-space");if(i&&i.clientWidth&&i.clientHeight){let w=_i(o.comp.width,o.comp.height,Math.max(1,i.clientWidth-32),Math.max(1,i.clientHeight-32),"fit");F.style.width=`${w.width}px`,F.style.height=`${w.height}px`}let e=r.querySelector(".inspection-content"),x=Array.from(r.querySelectorAll(".pan-viewport"));if(e?.clientHeight){let w=G?Math.max(100,E.clientHeight-(Y?.querySelector(".compare-toolbar")?.clientHeight??0)-(Y?.querySelector(".expanded-title")?.clientHeight??0)-(Y?.querySelector(".view-controls")?.clientHeight??0)-112):Math.min(248,Math.max(100,e.clientHeight-40));x.forEach((k)=>k.style.height=`${w}px`)}if(t&&x.length){let w=_i(t.box.w*K.comp.width,t.box.h*K.comp.height,Math.min(...x.map((k)=>k.clientWidth)),Math.min(...x.map((k)=>k.clientHeight)),W);r.querySelectorAll(".crop-stage").forEach((k)=>{k.style.width=`${w.width}px`,k.style.height=`${w.height}px`})}if(x.forEach((w)=>{let k=w.scrollWidth>w.clientWidth+1||w.scrollHeight>w.clientHeight+1;w.classList.toggle("pannable",k),w.title=k?"Move your pointer to pan. You can also scroll, swipe, or use arrow keys.":""}),oo&&wi&&t){let w=oo.clientWidth/(t.box.w*K.comp.width);wi.style.transform=`scale(${w})`,wi.style.left=`${-t.box.x*K.comp.width*w}px`,wi.style.top=`${-t.box.y*K.comp.height*w}px`}let y=eo.getBoundingClientRect(),_=r.querySelector(".region"),vi=r.querySelector(".number"),yi=r.querySelector(".connector path");if(_&&vi&&yi){let w=_.getBoundingClientRect(),k=vi.getBoundingClientRect(),j=w.right-y.left,zi=w.top+w.height/2-y.top,no=k.left-y.left-8,Ho=k.top+k.height/2-y.top;yi.setAttribute("d",`M ${j} ${zi} H ${no-14} V ${Ho} H ${no}`)}}function Ki(i){if(!Y||!ni||i===G)return;let e=r.querySelector("#expand-comparison"),x=(G?E:Y).getBoundingClientRect(),y=window.matchMedia("(prefers-reduced-motion: reduce)").matches,_=Y.querySelector(".pan-viewport"),vi=_?_.scrollLeft/Math.max(1,_.scrollWidth-_.clientWidth):0,yi=_?_.scrollTop/Math.max(1,_.scrollHeight-_.clientHeight):0,w=()=>Y.querySelectorAll(".pan-viewport").forEach((j)=>{j.scrollLeft=vi*Math.max(0,j.scrollWidth-j.clientWidth),j.scrollTop=yi*Math.max(0,j.scrollHeight-j.clientHeight)}),k=()=>{ni.append(Y),E.close(),ni.style.height="",G=!1,e.innerHTML=J("expand"),e.setAttribute("aria-label","Enlarge comparison"),e.title="Enlarge comparison",e.setAttribute("aria-expanded","false"),bi(),w(),e.focus({preventScroll:!0})};if(i){ni.style.height=`${x.height}px`,E.append(Y),E.showModal(),G=!0,e.innerHTML=J("compact"),e.setAttribute("aria-label","Restore comparison"),e.title="Restore comparison (Esc)",e.setAttribute("aria-expanded","true"),bi(),w(),e.focus({preventScroll:!0});let j=E.getBoundingClientRect();if(!y)E.animate([{transform:`translate(${x.x-j.x}px,${x.y-j.y}px) scale(${x.width/j.width},${x.height/j.height})`,opacity:0.6},{transform:"none",opacity:1}],{duration:240,easing:"cubic-bezier(.2,.8,.2,1)"})}else{if(e.disabled)return;let j=ni.getBoundingClientRect();if(y){k();return}e.disabled=!0;let zi=E.animate([{transform:"none",opacity:1},{transform:`translate(${j.x-x.x}px,${j.y-x.y}px) scale(${j.width/x.width},${j.height/x.height})`,opacity:0.6}],{duration:200,easing:"cubic-bezier(.4,0,.2,1)",fill:"forwards"});zi.finished.then(()=>{if(E.isConnected)zi.cancel(),e.disabled=!1,k()}).catch(()=>{})}}b("expand-comparison",()=>Ki(!G)),E.addEventListener("cancel",(i)=>{i.preventDefault(),i.stopPropagation(),Ki(!1)}),E.addEventListener("keydown",(i)=>{if(i.key==="Escape")i.preventDefault(),i.stopPropagation(),Ki(!1)}),ai=new ResizeObserver(()=>{bi(),Gi()}),ai.observe(eo),ai.observe(E);let ro=r.querySelector(".inspection-content");if(ro)ai.observe(ro);bi();let ui=Array.from(r.querySelectorAll(".pan-viewport"));if(ui.forEach((i)=>{i.scrollLeft=vo,i.scrollTop=yo}),ui.forEach((i)=>{i.querySelectorAll("img").forEach((e)=>e.draggable=!1),i.addEventListener("pointermove",(e)=>{if(e.pointerType!=="mouse"||e.buttons||!i.classList.contains("pannable"))return;let x=i.getBoundingClientRect();i.scrollLeft=Li(e.clientX,x.left,i.clientWidth,i.scrollWidth),i.scrollTop=Li(e.clientY,x.top,i.clientHeight,i.scrollHeight)}),i.addEventListener("keydown",(e)=>{let y={ArrowLeft:[-48,0],ArrowRight:[48,0],ArrowUp:[0,-48],ArrowDown:[0,48]}[e.key];if(!y)return;e.preventDefault(),e.stopPropagation(),i.scrollLeft+=y[0],i.scrollTop+=y[1]})}),ui.forEach((i)=>i.addEventListener("scroll",()=>{for(let e of ui)if(e!==i){if(e.scrollLeft!==i.scrollLeft)e.scrollLeft=i.scrollLeft;if(e.scrollTop!==i.scrollTop)e.scrollTop=i.scrollTop}})),mo&&window.matchMedia("(max-width:800px)").matches){let i=r.querySelector(".inspection-content"),e=r.querySelector(".compare");if(i&&e)i.scrollTop+=e.getBoundingClientRect().top-i.getBoundingClientRect().top}if(Gi(),window.scrollTo(gi,fi),!H)a.onDraftChange?.(structuredClone(n))}return d(),{destroy(){ai?.disconnect(),r.replaceChildren()},getDraft(){return structuredClone(n)}}}async function Jo(){let p=document.getElementById("review"),o=await fetch("/packet",{cache:"no-store"});if(!o.ok)throw Error("The review packet could not be loaded. Reload to retry.");let a=await o.json();if(a.sourceStatus){let r=document.createElement("p");r.textContent=a.sourceStatus,p.before(r)}go(p,a.packet,{initialDraft:a.draft,history:a.history,completed:!!a.receipt,onSubmit:async(r)=>{let n=await fetch("/decision",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(r)}),c=await n.json();if(!n.ok)throw Error(c.error??"The review could not be saved. Try again.")}})}Jo().catch((p)=>{let o=document.createElement("p");o.textContent=p instanceof Error?p.message:String(p),document.getElementById("review")?.replaceChildren(o)});})();
Reference in New Issue View Git Blame Copy Permalink