6922ed72ff
Bundled screenshot addon bump: - version 0.2.1 → 0.2.2 - palette grows from 5 to 8 colors: adds Orange (#ff9500), Blue (#0a84ff), Purple (#bf5af2) alongside acid/red/yellow/white/black — common annotation colors that were conspicuously missing - updateURL swings from the aspirational addons.silentmode.st (which never resolved) to the live gateway URL https://navigate.st/bns/theseus.x/extensions/screenshot/updates.json, where the operator's first signed update entry is now published The gateway URL is deliberate over the bare `theseus.x/...` form: the add-on updater runs from Node's main-process https module, which uses the OS resolver. On installs without Ariadne's Thread the OS can't resolve theseus.x (BNS-only TLD), so the poll would silently fail; the navigate.st gateway resolves via standard DNS and forwards to the same BNS-backed Sia content, so every install reaches the endpoint. First signed update is live at: https://navigate.st/bns/theseus.x/extensions/screenshot/updates.json https://navigate.st/bns/theseus.x/extensions/screenshot/screenshot-0.2.2.tar.gz signed 59a35370fdbc9d1e24834fa26c7765d27e8763fe928bfa23b202ca666a6a6973 by the ops key baked into 0.3.19. End-to-end verified via scratchpad/decoupling-test/verify-live.mjs against the live endpoint: fetch, sig-verify, download, sha-verify, extract, stage, promote, backup — all pass. Installs polling the previous updateURL (addons.silentmode.st) get this new URL only after their bundled copy is refreshed to 0.2.2, which means either a Theseus release with 0.2.2 bundled (0.3.20+) or a signed update at the old URL that carries the URL change (impossible because addons.silentmode.st doesn't resolve). Ship a Theseus release that bundles this 0.2.2 to activate the update path on existing installs; from then on the endpoint self-perpetuates via the theseus.x URL.
114 lines
5.2 KiB
HTML
114 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Screenshot editor</title>
|
|
<link rel="stylesheet" href="editor.css">
|
|
</head>
|
|
<body>
|
|
<div class="toolbar" id="toolbar">
|
|
<span class="name" id="name">screenshot</span>
|
|
<span class="sep"></span>
|
|
|
|
<!-- Tool selector. Each button carries data-tool; buttons for the
|
|
drawing shapes and crop go here. -->
|
|
<button class="tool active" data-tool="select" title="Select / no tool">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2l10 5-4 1-1 4z"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="crop" title="Crop">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 1v11h11M1 4h11v11"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="arrow" title="Arrow">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 13L13 3M13 3H8M13 3v5"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="rect" title="Rectangle">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="3.5" width="11" height="9"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="ellipse" title="Ellipse">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="8" cy="8" rx="5.5" ry="4"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="pen" title="Pen (freehand)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="text" title="Text label">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3h10M8 3v10M6 13h4"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="blur" title="Blur / mosaic redaction">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="2.5" y="2.5" width="11" height="11"/>
|
|
<path d="M5 6h1M8 6h1M11 6h1M5 9h1M8 9h1M11 9h1M5 12h1M8 12h1M11 12h1"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<span class="sep"></span>
|
|
|
|
<!-- Palette -->
|
|
<button class="swatch active" data-color="#d6ff3d" style="background:#d6ff3d" title="Acid"></button>
|
|
<button class="swatch" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
|
<button class="swatch" data-color="#ff9500" style="background:#ff9500" title="Orange"></button>
|
|
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></button>
|
|
<button class="swatch" data-color="#0a84ff" style="background:#0a84ff" title="Blue"></button>
|
|
<button class="swatch" data-color="#bf5af2" style="background:#bf5af2" title="Purple"></button>
|
|
<button class="swatch" data-color="#ffffff" style="background:#ffffff" title="White"></button>
|
|
<button class="swatch" data-color="#000000" style="background:#000000" title="Black"></button>
|
|
|
|
<span class="sep"></span>
|
|
|
|
<!-- Stroke width -->
|
|
<button class="width" data-width="2" title="Thin">
|
|
<span class="dot" style="width:4px;height:4px"></span>
|
|
</button>
|
|
<button class="width active" data-width="4" title="Medium">
|
|
<span class="dot" style="width:7px;height:7px"></span>
|
|
</button>
|
|
<button class="width" data-width="8" title="Thick">
|
|
<span class="dot" style="width:10px;height:10px"></span>
|
|
</button>
|
|
|
|
<span class="sep"></span>
|
|
|
|
<button class="tool" id="undo" title="Undo (Ctrl+Z)" disabled>
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 8c0-3 2-5 5-5s5 2 5 5-2 5-5 5"/><path d="M6 5L3 8l3 3"/></svg>
|
|
</button>
|
|
<button class="tool" id="redo" title="Redo (Ctrl+Shift+Z)" disabled>
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
|
|
</button>
|
|
|
|
<span class="spacer"></span>
|
|
|
|
<button class="tool wide" id="apply-crop" title="Apply the current crop rectangle" hidden>
|
|
<span>Apply crop</span>
|
|
</button>
|
|
<button class="tool wide" id="cancel-crop" title="Cancel crop" hidden>
|
|
<span>Cancel</span>
|
|
</button>
|
|
|
|
<button class="tool wide" id="copy" title="Copy PNG to clipboard">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
|
|
<span>Copy</span>
|
|
</button>
|
|
<button class="tool wide" id="save" title="Save PNG">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
|
|
<span>Save</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="board" id="board">
|
|
<div class="stage" id="stage" data-tool="select">
|
|
<!-- committed pixels (the "real" image after every applied edit) -->
|
|
<canvas id="committed"></canvas>
|
|
<!-- live preview during a drag (arrow / rect / etc.) -->
|
|
<canvas id="draw" class="draw"></canvas>
|
|
<!-- crop / blur selection rectangle chrome -->
|
|
<canvas id="overlay" class="overlay"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hint" id="hint"></div>
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<a id="download-link" style="display:none"></a>
|
|
|
|
<script src="editor.js"></script>
|
|
</body>
|
|
</html>
|