Pocket Palette — Private Rehearsal

HTML

<main><header><span class="badge">PRIVATE REHEARSAL</span><h1>Pocket Palette</h1><p>A small space to try three quiet colors.</p></header><div class="choices" aria-label="Palette colors"><button data-color="Sage">Sage</button><button data-color="Clay">Clay</button><button data-color="Sky">Sky</button></div><div id="swatch" role="img" aria-label="Neutral color swatch"></div><p id="selection">Neutral · #E7E5E0</p><label for="note">Private note</label><textarea id="note" rows="3" maxlength="1000" placeholder="Add a palette note…"></textarea><p id="save" class="small" role="status">Saved in widget state only.</p><button id="guard">Check publishing guard</button><pre id="guard-result" role="status" aria-live="polite">Ready to test. No publishing action will be requested.</pre></main>

CSS

*{box-sizing:border-box}body{margin:0;background:#f5f4f0;color:#303b37;font:15px system-ui,sans-serif}main{max-width:460px;margin:0 auto;padding:26px}h1{font-size:28px;margin:9px 0}header p{color:#68716b;margin:0 0 22px}.badge{font-size:10px;letter-spacing:1.8px;color:#69746c}.choices{display:flex;gap:9px}button{font:inherit;padding:10px 16px;border:1px solid #c8cec7;background:#fff;border-radius:9px;cursor:pointer;color:inherit}button:hover{background:#eeefea}button:focus-visible,textarea:focus-visible{outline:3px solid #657f92;outline-offset:3px}button[aria-pressed=true]{border-color:#354c3c;box-shadow:0 0 0 1px #354c3c}#swatch{height:118px;background:#e7e5e0;border-radius:12px;margin-top:16px;border:1px solid #00000012}#selection{font-size:13px;color:#647168}label{display:block;margin:20px 0 8px;font-weight:600}textarea{width:100%;resize:vertical;min-height:80px;font:inherit;padding:11px;border:1px solid #c8cec7;border-radius:9px;background:#fff;color:inherit}.small{font-size:12px;color:#68716b}#guard{margin-top:9px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 system-ui,sans-serif;background:#ebece6;border-radius:9px;padding:12px;min-height:56px}button:disabled{opacity:.6;cursor:wait}

JavaScript

const palette={Neutral:"#E7E5E0",Sage:"#A6B69E",Clay:"#C9937A",Sky:"#A5BDCF"};
let state={color:"Neutral",note:""};
const note=document.getElementById("note"), status=document.getElementById("save");
WidgetCanvas.setControlsPosition("top-right");
WidgetCanvas.setSharingEnabled(false);
WidgetCanvas.setResetEnabled(false);
function restore(value){const s=value&&typeof value==="object"?value:{};state={color:Object.prototype.hasOwnProperty.call(palette,s.color)?s.color:"Neutral",note:typeof s.note==="string"?s.note.slice(0,1000):""};paint();}
function paint(){document.getElementById("swatch").style.background=palette[state.color];document.getElementById("swatch").setAttribute("aria-label",state.color+" color swatch");document.getElementById("selection").textContent=state.color+" · "+palette[state.color];note.value=state.note;document.querySelectorAll("[data-color]").forEach(b=>b.setAttribute("aria-pressed",String(b.dataset.color===state.color)));}
async function save(){try{await WidgetCanvas.setState({color:state.color,note:state.note});status.textContent="Saved in widget state only.";}catch(e){status.textContent="Could not save: "+String(e.message||e);}}
document.querySelectorAll("[data-color]").forEach(b=>b.addEventListener("click",()=>{state.color=b.dataset.color;paint();save();}));
note.addEventListener("input",()=>{state.note=note.value;save();});
window.addEventListener("widgetcanvas:restore",e=>restore(e.detail));
(async()=>{try{restore(await WidgetCanvas.getState());}catch(e){paint();status.textContent="State unavailable; using neutral defaults.";}})();
function errorText(result){const blocks=Array.isArray(result.content)?result.content:[];const text=blocks.filter(b=>b.type==="text").map(b=>b.text).join("\n");return text||JSON.stringify(result.structuredContent||result);}
document.getElementById("guard").addEventListener("click",async()=>{const b=document.getElementById("guard"),out=document.getElementById("guard-result");b.disabled=true;out.textContent="Checking publishing guard…";try{const result=await WidgetCanvas.callTool("get_creator_profile", {});if(result.isError){out.textContent="Blocked error:\n"+errorText(result);}else{out.textContent="Guard was not blocked. The host returned a successful response; publishing access isolation needs review.";}}catch(e){out.textContent="Blocked error:\n"+String(e.message||e);}finally{b.disabled=false;}});
paint();