Comma-separated codes. Empty means this post is unfiled.
Comma-separated plot names.
${loadingVisual?'
Loading private machine visual notes…
':machineFields(p)}
`}
- function workFields(w,editableCode=false){return `${editableCode?`
Changing this migrates every assigned post and retires the old URL.
`:""}
Optional. Paste an assigned archive post ID to choose its thumbnail.
`}
+ // — the standard color map — every whistlegraph can RESERVE one CSS named color, like a call sign:
+ // one color, one work. The 148 CSS keywords are deduped by hex value (gray beats grey, cyan beats
+ // aqua, magenta beats fuchsia — nine alias spellings dropped), then 28 near-whites are culled
+ // (snow, ivory, white, mintcream, seashell, ghostwhite, lavenderblush, whitesmoke, honeydew,
+ // aliceblue, azure, oldlace, linen, lightyellow, cornsilk, beige, lightcyan, mistyrose, lavender,
+ // antiquewhite, lightgoldenrodyellow, papayawhip, lemonchiffon, blanchedalmond, gainsboro, bisque,
+ // moccasin, floralwhite) because they'd vanish as swatches on the site's cream paper #fffdf6 —
+ // anything within RGB distance 70 of the paper is out. 111 colors survive. The head of the list is
+ // the "iconic order": the call signs the most-viewed works should claim first — red, blue, yellow…
+ // — then the long tail walks the hue wheel from grays through reds, earths, greens, blues, purples.
+ const DESK_COLORS=[
+ ["red","#ff0000"],["blue","#0000ff"],["yellow","#ffff00"],["green","#008000"],["orange","#ffa500"],
+ ["purple","#800080"],["pink","#ffc0cb"],["black","#000000"],["cyan","#00ffff"],["magenta","#ff00ff"],
+ ["gold","#ffd700"],["crimson","#dc143c"],["teal","#008080"],["indigo","#4b0082"],["violet","#ee82ee"],
+ ["coral","#ff7f50"],["turquoise","#40e0d0"],["salmon","#fa8072"],["navy","#000080"],["maroon","#800000"],
+ ["olive","#808000"],["lime","#00ff00"],["brown","#a52a2a"],["hotpink","#ff69b4"],["orangered","#ff4500"],
+ ["deeppink","#ff1493"],["royalblue","#4169e1"],["skyblue","#87ceeb"],["tomato","#ff6347"],["chartreuse","#7fff00"],
+ ["gray","#808080"],["silver","#c0c0c0"],["dimgray","#696969"],["darkgray","#a9a9a9"],["lightgray","#d3d3d3"],
+ ["darkred","#8b0000"],["firebrick","#b22222"],["indianred","#cd5c5c"],["rosybrown","#bc8f8f"],["lightcoral","#f08080"],
+ ["darksalmon","#e9967a"],["lightsalmon","#ffa07a"],["sienna","#a0522d"],["saddlebrown","#8b4513"],["chocolate","#d2691e"],
+ ["sandybrown","#f4a460"],["peachpuff","#ffdab9"],["peru","#cd853f"],["darkorange","#ff8c00"],["burlywood","#deb887"],
+ ["tan","#d2b48c"],["navajowhite","#ffdead"],["wheat","#f5deb3"],["darkgoldenrod","#b8860b"],["goldenrod","#daa520"],
+ ["khaki","#f0e68c"],["palegoldenrod","#eee8aa"],["darkkhaki","#bdb76b"],["olivedrab","#6b8e23"],["yellowgreen","#9acd32"],
+ ["darkolivegreen","#556b2f"],["greenyellow","#adff2f"],["lawngreen","#7cfc00"],["darkgreen","#006400"],["forestgreen","#228b22"],
+ ["limegreen","#32cd32"],["darkseagreen","#8fbc8f"],["lightgreen","#90ee90"],["palegreen","#98fb98"],["seagreen","#2e8b57"],
+ ["mediumseagreen","#3cb371"],["springgreen","#00ff7f"],["mediumspringgreen","#00fa9a"],["mediumaquamarine","#66cdaa"],["aquamarine","#7fffd4"],
+ ["lightseagreen","#20b2aa"],["mediumturquoise","#48d1cc"],["darkslategray","#2f4f4f"],["darkcyan","#008b8b"],["paleturquoise","#afeeee"],
+ ["darkturquoise","#00ced1"],["cadetblue","#5f9ea0"],["powderblue","#b0e0e6"],["lightblue","#add8e6"],["deepskyblue","#00bfff"],
+ ["lightskyblue","#87cefa"],["steelblue","#4682b4"],["dodgerblue","#1e90ff"],["slategray","#708090"],["lightslategray","#778899"],
+ ["lightsteelblue","#b0c4de"],["cornflowerblue","#6495ed"],["darkblue","#00008b"],["midnightblue","#191970"],["mediumblue","#0000cd"],
+ ["slateblue","#6a5acd"],["darkslateblue","#483d8b"],["mediumslateblue","#7b68ee"],["mediumpurple","#9370db"],["rebeccapurple","#663399"],
+ ["blueviolet","#8a2be2"],["darkorchid","#9932cc"],["darkviolet","#9400d3"],["mediumorchid","#ba55d3"],["darkmagenta","#8b008b"],
+ ["plum","#dda0dd"],["thistle","#d8bfd8"],["orchid","#da70d6"],["mediumvioletred","#c71585"],["palevioletred","#db7093"],
+ ["lightpink","#ffb6c1"]
+ ];
+ const COLOR_NAME=new Map(DESK_COLORS.map(([name,hex])=>[hex,name]));
+ // Reservations need every work, but the Desk's `works` array is page-loaded per mode — so the
+ // full roster comes from the site's own static /graphs.json, with live curation overlays on top.
+ let paletteBase=null,paletteWorks=[];
+ function rebuildPaletteWorks(){
+ if(!paletteBase)return;
+ const deleted=new Set(curation.deletedWorks||[]);
+ paletteWorks=paletteBase.filter(w=>!deleted.has(w.code)).map(w=>({code:w.code,views:w.views||0,c:String(curation.works?.[w.code]?.c||w.c||"").toLowerCase()}));
+ for(const [code,w] of Object.entries(curation.createdWorks||{}))if(!paletteWorks.some(r=>r.code===code))paletteWorks.push({code,views:0,c:String(w.c||"").toLowerCase()});
+ }
+ (async()=>{try{paletteBase=(await (await fetch("/graphs.json",{cache:"no-store"})).json()).works||[]}catch{paletteBase=[]}rebuildPaletteWorks()})();
+ function reservedColorMap(exceptCode){ // hex → the work code holding it (highest views wins a tie)
+ const map=new Map();
+ for(const w of [...paletteWorks].sort((a,b)=>(b.views||0)-(a.views||0))){
+ if(w.code===exceptCode||!COLOR_NAME.has(w.c)||map.has(w.c))continue;
+ map.set(w.c,w.code);
+ }
+ return map;
+ }
+ function nearestOpenColor(hex,reserved){
+ const r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);
+ let best=null,bd=Infinity;
+ for(const [name,candidate] of DESK_COLORS){
+ if(reserved.has(candidate))continue;
+ const d=(r-parseInt(candidate.slice(1,3),16))**2+(g-parseInt(candidate.slice(3,5),16))**2+(b-parseInt(candidate.slice(5,7),16))**2;
+ if(d!reserved.has(hex));
+ if(open){
+ const rank=code?[...paletteWorks].sort((a,b)=>(b.views||0)-(a.views||0)).findIndex(w=>w.code===code)+1:0;
+ return {hex:open[1],why:`next open call sign in iconic order: ${open[0]}${rank?` (work ranks #${rank} by views)`:""}`};
+ }
+ return null; // every standard color is spoken for — custom is the only road left
+ }
+ function paletteHTML(w){
+ const current=String(w.c||"#b44887").toLowerCase(),reserved=reservedColorMap(w.code),named=COLOR_NAME.has(current);
+ const swatches=DESK_COLORS.map(([name,hex])=>{
+ const holder=reserved.get(hex),own=hex===current;
+ return ``;
+ }).join("");
+ return `
+
${named?"One standard color, one work — reserved swatches carry their call sign.":"Non-standard custom color. Suggest finds the nearest open standard."}
+
Off the standard map — reach for this only when every fitting call sign is taken.
`;
+ }
+ function setDeskColor(hex,why){
+ const input=drawer.querySelector("#workColor");if(!input)return;hex=hex.toLowerCase();input.value=hex;
+ drawer.querySelector("#palChip").style.background=hex;
+ const name=COLOR_NAME.get(hex);drawer.querySelector("#palName").textContent=name||`custom ${hex}`;
+ drawer.querySelectorAll("#palette [data-swatch]").forEach(b=>b.classList.toggle("sel",b.dataset.swatch===hex));
+ if(why)drawer.querySelector("#palWhy").textContent=why;
+ }
+ drawer.addEventListener("click",event=>{
+ const swatch=event.target.closest("#palette [data-swatch]");
+ if(swatch&&!swatch.disabled)return setDeskColor(swatch.dataset.swatch,`standard: ${COLOR_NAME.get(swatch.dataset.swatch)}`);
+ if(event.target.closest("#palSuggest")){
+ const pick=suggestStandardColor(selected?.type==="work"?selected.key:null);
+ if(!pick)return toast("Every standard color is reserved — go custom");
+ setDeskColor(pick.hex,`Suggested — ${pick.why}`);return;
+ }
+ if(event.target.closest("#palCustom"))drawer.querySelector("#palCustomRow")?.classList.toggle("hidden");
+ });
+ drawer.addEventListener("input",event=>{if(event.target.id==="workColorCustom")setDeskColor(event.target.value,`custom ${event.target.value} — off the standard map`)});
+ function workFields(w,editableCode=false){return `${editableCode?`
Changing this migrates every assigned post and retires the old URL.
`:""}${paletteHTML(w)}
Optional. Paste an assigned archive post ID to choose its thumbnail.
`}
function workPatch(){return {title:drawer.querySelector("#workTitle").value,by:drawer.querySelector("#workBy").value,year:Number(drawer.querySelector("#workYear").value),c:drawer.querySelector("#workColor").value,featuredPost:drawer.querySelector("#featuredPost").value.trim()}}
async function createWork(){
const button=drawer.querySelector("#createWork"),code=drawer.querySelector("#workCode").value.trim().toLowerCase();button.disabled=true;button.textContent="Creating…";