Changeset 3736872

Timestamp:

10/09/2026 02:34:13 PM (2 weeks ago)

Author:

idreesdawlat

Message:

Release 0.2.5 — capture and annotation fixes

• fix the editor failing to open a capture when no text size was set
• keep the current admin screen when capturing it, including the post editor, and still drop links that would delete or change data
• ask before another screenshot replaces one that still has unsaved marks
• keep one-line rows, such as pagination and the admin bar, on a single line in redrawn screenshots
• load dashboard icons before a redraw so they stay visible in the screenshot
• change text boxes so the side handles set the line width, the corners scale the letters, and the height follows the text
• shrink selection handles on small marks so they no longer cover the shape
• let marks and their handles sit in the grey area around the picture without being cut off
• show Desktop, iPad, and Mobile on a solid bar under the capture toolbar in Window mode
• wait until the pointer is idle before redrawing the page, so selecting and drawing stay responsive
• start a full-screen redraw as soon as the area is selected, so Capture does not wait for the page to be built
• load the annotation editor from the admin bar using the current file version
• explain that pixel-perfect capture is Area, Window, and Full screen in Chrome or Edge, and that Direct Page and Tools redraw the page
• say when tab sharing is cancelled or does not match this window, then redraw the page instead
• retake the directory screenshots

Location:

stillframe

Files:

• assets/screenshot-1.png (modified) ( previous)
• assets/screenshot-2.png (modified) ( previous)
• assets/screenshot-3.png (modified) ( previous)
• assets/screenshot-4.png (modified) ( previous)
• assets/screenshot-5.png (modified) ( previous)
• tags/0.2.5 (copied) (copied from stillframe/trunk )
• tags/0.2.5/assets/css/stillframe-capture-panel.css (modified) (4 diffs)
• tags/0.2.5/assets/css/stillframe-tools.css (modified) (1 diff)
• tags/0.2.5/assets/js/stillframe-admin-bar.js (modified) (2 diffs)
• tags/0.2.5/assets/js/stillframe-annotation-editor-v2.js (added)
• tags/0.2.5/assets/js/stillframe-annotation-editor.js (modified) (4 diffs)
• tags/0.2.5/assets/js/stillframe-capture-panel.js (modified) (37 diffs)
• tags/0.2.5/assets/js/stillframe-tools.js (modified) (5 diffs)
• tags/0.2.5/assets/js/vendor/LICENSE-fabric.txt (added)
• tags/0.2.5/assets/js/vendor/fabric.min.js (added)
• tags/0.2.5/includes/class-stillframe-asset-loader.php (modified) (17 diffs)
• tags/0.2.5/includes/class-stillframe-media.php (modified) (7 diffs)
• tags/0.2.5/includes/class-stillframe-plugin.php (modified) (1 diff)
• tags/0.2.5/includes/class-stillframe-tools-page.php (modified) (3 diffs)
• tags/0.2.5/languages/stillframe.pot (modified) (3 diffs)
• tags/0.2.5/readme.txt (modified) (3 diffs)
• tags/0.2.5/stillframe.php (modified) (2 diffs)
• tags/0.2.5/uninstall.php (modified) (1 diff)
• trunk/assets/css/stillframe-capture-panel.css (modified) (4 diffs)
• trunk/assets/css/stillframe-tools.css (modified) (1 diff)
• trunk/assets/js/stillframe-admin-bar.js (modified) (2 diffs)
• trunk/assets/js/stillframe-annotation-editor-v2.js (added)
• trunk/assets/js/stillframe-annotation-editor.js (modified) (4 diffs)
• trunk/assets/js/stillframe-capture-panel.js (modified) (37 diffs)
• trunk/assets/js/stillframe-tools.js (modified) (5 diffs)
• trunk/assets/js/vendor/LICENSE-fabric.txt (added)
• trunk/assets/js/vendor/fabric.min.js (added)
• trunk/includes/class-stillframe-asset-loader.php (modified) (17 diffs)
• trunk/includes/class-stillframe-media.php (modified) (7 diffs)
• trunk/includes/class-stillframe-plugin.php (modified) (1 diff)
• trunk/includes/class-stillframe-tools-page.php (modified) (3 diffs)
• trunk/languages/stillframe.pot (modified) (3 diffs)
• trunk/readme.txt (modified) (3 diffs)
• trunk/stillframe.php (modified) (2 diffs)
• trunk/uninstall.php (modified) (1 diff)

stillframe/tags/0.2.5/assets/css/stillframe-capture-panel.css

@@ -1595 +1595 @@
         align-items: center;
         gap: 10px;
-        width: max-content;
-        max-width: calc(100% - 32px);
+        width: fit-content;
+        max-width: min(520px, calc(100% - 32px));
+        white-space: normal;
         margin: 0 auto;
         padding: 8px 14px;
@@ -1717 +1718 @@
 }
 
-/* Neutral accents ------------------------------------------------------- */
-/* The brand colour is reserved for primary buttons (Capture, Download, Save).
-   Selected and active states use plain greys so nothing else competes. */
+/* Brand accents --------------------------------------------------------- */
+/* Selected and active states use the Stillframe petrol colour. */
 
 .stillframe-snip,
 .stillframe-result {
-        --sf-ink: #1f2937;
-        --sf-pick-bg: #f3f4f6;
-        --sf-pick-line: #9ca3af;
+        --sf-ink: #005976;
+        --sf-pick-bg: #e6f4f8;
+        --sf-pick-line: #7fb9cc;
 }
 
@@ -1851 +1851 @@
 .stillframe-snip,
 .stillframe-result {
-        --sf-pick-line: #6b7280;
+        --sf-pick-line: #7fb9cc;
         --sf-edge: #b4bac4;
 }
@@ -2070 +2070 @@
 }
 .stillframe-snip__bar .stillframe-hub-sec { margin-bottom: 0; }
-.stillframe-snip__direct-menu { width: 480px; padding: 12px; gap: 8px; }
+.stillframe-snip__direct-menu { width: 480px; min-width: 360px; padding: 12px; gap: 8px; max-height: min(80vh, 640px); overflow-y: auto; }
+.stillframe-snip__recent-menu { max-height: min(80vh, 640px); overflow-y: auto; }
+
+.stillframe-hub-help {
+        font-size: 11.5px;
+        line-height: 1.4;
+        color: var(--sf-muted, #6b7280);
+}
+
+/* Recent screenshots: two-column card grid */
+.stillframe-snip__recent-menu {
+        width: 520px;
+}
+
+.stillframe-snip .stillframe-recent-list {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 10px;
+        max-height: none;
+        overflow: visible;
+}
+
+.stillframe-snip .stillframe-recent-card {
+        flex-direction: column;
+        gap: 8px;
+        padding: 8px;
+        background: var(--sf-surface);
+        border: 1px solid var(--sf-line);
+        border-radius: 10px;
+}
+
+.stillframe-snip .stillframe-recent-card:last-child {
+        border-bottom: 1px solid var(--sf-line);
+}
+
+.stillframe-snip .stillframe-recent-card:hover {
+        background: var(--sf-brand-muted);
+        border-color: var(--sf-brand);
+}
+
+.stillframe-snip .stillframe-recent-thumbwrap {
+        flex: 0 0 auto;
+        width: 100%;
+        height: auto;
+        aspect-ratio: 16 / 10;
+}
+
+.stillframe-snip .stillframe-recent-info {
+        gap: 4px;
+}
+
+.stillframe-snip .stillframe-recent-actions {
+        margin-top: 2px;
+}
+
+@media (max-width: 560px) {
+        .stillframe-snip .stillframe-recent-list {
+                grid-template-columns: minmax(0, 1fr);
+        }
+}
+
+.stillframe-result .stillframe-format-select {
+        height: 36px;
+        margin: 0 4px 0 0;
+        padding: 0 24px 0 10px;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151);
+        background-color: var(--sf-surface, #ffffff);
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 8px;
+        box-shadow: none;
+        cursor: pointer;
+}
+
+.stillframe-result .stillframe-format-select:hover,
+.stillframe-result .stillframe-format-select:focus {
+        color: var(--sf-brand, #005976);
+        border-color: var(--sf-brand, #005976);
+        outline: none;
+}
+
+/* Device preview frames */
+.stillframe-dev-card__frame {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 8px;
+        background: var(--sf-well);
+        border: 1.5px solid var(--sf-line-strong);
+        border-radius: 5px;
+        box-sizing: border-box;
+        color: var(--sf-muted);
+}
+
+.stillframe-dev-card.is-selected .stillframe-dev-card__frame {
+        background: var(--sf-surface);
+        border-color: var(--sf-brand);
+        color: var(--sf-brand);
+}
+
+.stillframe-dev-card__frame .stillframe-dev-card__icon {
+        margin: 0;
+        color: inherit;
+}
+
+.stillframe-hub-size {
+        font-size: 11.5px;
+        line-height: 1.4;
+        color: var(--sf-text-2);
+}
+
+/* Sticky capture button */
+.stillframe-hub-footer {
+        position: sticky;
+        bottom: -12px;
+        z-index: 2;
+        margin: 4px -12px -12px;
+        padding: 10px 12px 12px;
+        background: var(--sf-surface);
+        border-top: 1px solid var(--sf-line);
+        border-radius: 0 0 10px 10px;
+}
+
+@media (max-width: 560px) {
+        .stillframe-snip__direct-menu {
+                width: calc(100vw - 24px);
+                min-width: 0;
+        }
+}
+
+/* Fabric annotation layer sits exactly over the captured image */
+.stillframe-result .stillframe-annotation-wrapper {
+        z-index: 2;
+}
+
+.stillframe-result .stillframe-annotation-wrapper canvas {
+        touch-action: none;
+}
+
+/* ==========================================================================
+   Stillframe interface layer
+   Flat, compact controls in the Stillframe petrol colour. These rules sit last
+   and use !important on colours so a site theme's button styles cannot recolour them.
+   ========================================================================== */
+
+.stillframe-snip,
+.stillframe-result {
+        --sf-brand: #005976;
+        --sf-brand-hover: #004a61;
+        --sf-brand-muted: #f1f6f8;
+        --sf-brand-border: #c3d3da;
+}
+
+.stillframe-snip button,
+.stillframe-result button,
+.sfp button {
+        appearance: none;
+        margin: 0;
+        font-family: inherit;
+        letter-spacing: normal;
+        text-transform: none;
+        text-shadow: none;
+}
+
+/* ---- Top selection bar ---- */
+.stillframe-snip .stillframe-snip__bar button {
+        height: 32px;
+        gap: 6px;
+        padding: 0 10px;
+        font-size: 12.5px;
+        font-weight: 600;
+        border-radius: 6px;
+}
+
+.stillframe-snip .stillframe-snip__bar svg {
+        width: 16px;
+        height: 16px;
+}
+
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__chevron {
+        width: 10px;
+        height: 10px;
+}
+
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__mode:hover,
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__close:hover {
+        color: var(--sf-brand) !important;
+        background: #f3f5f6 !important;
+}
+
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__mode[aria-pressed="true"],
+.stillframe-snip.has-menu-open .stillframe-snip__bar .stillframe-snip__mode[aria-expanded="true"] {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+.stillframe-snip .stillframe-snip__go,
+.stillframe-snip .stillframe-snip__go:focus {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border: 0 !important;
+        box-shadow: none !important;
+}
+
+.stillframe-snip .stillframe-snip__go:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand-hover) !important;
+}
+
+/* ---- Menus that open from the bar ---- */
+.stillframe-snip .stillframe-snip__direct-menu {
+        width: 400px;
+        max-width: calc(100vw - 24px);
+        padding: 12px 14px 14px;
+        gap: 10px;
+        max-height: none;
+        overflow: visible;
+}
+
+@media (max-height: 640px) {
+        .stillframe-snip .stillframe-snip__direct-menu {
+                max-height: calc(100vh - 110px);
+                overflow-y: auto;
+        }
+}
+
+.stillframe-snip .stillframe-hub-sec-title {
+        margin: 0;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--sf-muted);
+}
+
+.sfd-row {
+        display: grid;
+        grid-template-columns: 64px minmax(0, 1fr);
+        align-items: center;
+        gap: 8px;
+}
+
+.sfd-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151);
+}
+
+.sfd-chips {
+        display: flex;
+        gap: 6px;
+        min-width: 0;
+}
+
+.stillframe-snip .sfd-chip {
+        flex: 1 1 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        min-width: 0;
+        height: 30px;
+        padding: 0 6px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+        cursor: pointer;
+}
+
+.stillframe-snip .sfd-chip em {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 11px;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-snip .sfd-chip:hover {
+        color: var(--sf-brand) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+.stillframe-snip .sfd-chip.is-selected {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-snip .sfd-chip.is-selected em {
+        color: var(--sf-brand);
+}
+
+.sfd-seg {
+        display: inline-flex;
+        width: fit-content;
+        overflow: hidden;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 6px;
+}
+
+.stillframe-snip .sfd-seg__btn {
+        height: 28px;
+        padding: 0 14px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 0 !important;
+        border-right: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 0;
+        box-shadow: none !important;
+        cursor: pointer;
+}
+
+.stillframe-snip .sfd-seg__btn:last-child {
+        border-right: 0 !important;
+}
+
+.stillframe-snip .sfd-seg__btn:hover {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+}
+
+.stillframe-snip .sfd-seg__btn.is-active,
+.stillframe-snip .sfd-seg__btn.is-active:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+}
+
+.sfd-help {
+        margin: -4px 0 0;
+        padding-left: 72px;
+        font-size: 11.5px;
+        line-height: 1.4;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-snip .stillframe-hub-toggle {
+        gap: 8px;
+        font-size: 12.5px;
+        color: var(--sf-text-2, #374151);
+}
+
+.stillframe-snip .stillframe-hub-toggle__track {
+        width: 30px;
+        height: 17px;
+        background: #cbd5e1;
+}
+
+.stillframe-snip .stillframe-hub-toggle__track::before {
+        top: 2px;
+        left: 2px;
+        width: 13px;
+        height: 13px;
+}
+
+.stillframe-snip .stillframe-hub-toggle__input:checked + .stillframe-hub-toggle__track {
+        background: var(--sf-brand) !important;
+}
+
+.stillframe-snip .stillframe-hub-toggle__input:checked + .stillframe-hub-toggle__track::before {
+        transform: translateX(13px);
+}
+
+.stillframe-snip .stillframe-hub-toggle__input:focus-visible + .stillframe-hub-toggle__track {
+        outline: 2px solid var(--sf-brand);
+}
+
+.sfd-engine {
+        align-items: flex-start;
+        padding-top: 10px;
+        margin-top: 4px;
+        border-top: 1px solid var(--sf-line, #e5e7eb);
+}
+
+.sfd-engine .stillframe-hub-toggle__track {
+        margin-top: 2px;
+}
+
+.sfd-engine__text {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+}
+
+.sfd-engine__text b {
+        font-size: 12.5px;
+        font-weight: 600;
+        color: var(--sf-text, #111827);
+}
+
+.sfd-engine__text small {
+        font-size: 11.5px;
+        line-height: 1.4;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-snip .sfd-submit {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        width: 100%;
+        height: 34px;
+        padding: 0 12px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border: 1px solid var(--sf-brand) !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+        cursor: pointer;
+}
+
+.stillframe-snip .sfd-submit:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand-hover) !important;
+        border-color: var(--sf-brand-hover) !important;
+}
+
+/* ---- Page dropdown ---- */
+.sfp {
+        position: relative;
+        min-width: 0;
+        width: 100%;
+        font-size: 12.5px;
+}
+
+.sfp *,
+.sfp *::before,
+.sfp *::after {
+        box-sizing: border-box;
+}
+
+.sfp .sfp__trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        width: 100%;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12.5px;
+        font-weight: 500;
+        line-height: 1;
+        text-align: left;
+        color: var(--sf-text, #111827) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+        cursor: pointer;
+}
+
+.sfp .sfp__trigger:hover,
+.sfp.is-open .sfp__trigger {
+        border-color: var(--sf-brand) !important;
+}
+
+.sfp .sfp__trigger:focus-visible {
+        outline: 2px solid var(--sf-brand);
+        outline-offset: 1px;
+}
+
+.sfp .sfp__summary {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+}
+
+.sfp .sfp__trigger svg {
+        flex: 0 0 auto;
+        color: var(--sf-muted, #6b7280);
+}
+
+.sfp.is-open .sfp__trigger svg {
+        transform: rotate(180deg);
+}
+
+.sfp .sfp__drop {
+        position: absolute;
+        z-index: 40;
+        top: calc(100% + 4px);
+        left: 0;
+        right: 0;
+        padding: 6px;
+        background: #ffffff;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 8px;
+        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
+}
+
+.sfp .sfp__drop[hidden] {
+        display: none !important;
+}
+
+.sfp .sfp__search {
+        display: block;
+        width: 100%;
+        height: 30px;
+        margin: 0 0 6px;
+        padding: 0 10px;
+        font-family: inherit;
+        font-size: 12.5px;
+        color: var(--sf-text, #111827);
+        background: #ffffff;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 6px;
+        box-shadow: none;
+}
+
+.sfp .sfp__search:focus {
+        border-color: var(--sf-brand);
+        box-shadow: 0 0 0 1px var(--sf-brand);
+        outline: none;
+}
+
+.sfp .sfp__list {
+        max-height: 220px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+}
+
+.sfp .sfp__group {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        padding: 6px 8px 4px;
+        font-size: 10.5px;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: var(--sf-muted, #6b7280);
+        background: #ffffff;
+}
+
+.sfp .sfp__row {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        column-gap: 8px;
+        align-items: center;
+        padding: 5px 8px;
+        border-radius: 5px;
+        cursor: pointer;
+}
+
+.sfp .sfp__row:hover,
+.sfp .sfp__row.is-active {
+        background: var(--sf-well, #f3f4f6);
+}
+
+.sfp .sfp__row.is-selected {
+        background: var(--sf-brand-muted, #e6f4f8);
+}
+
+.sfp .sfp__row.is-selected .sfp__title {
+        color: var(--sf-brand);
+}
+
+.sfp .sfp__title {
+        grid-column: 1;
+        overflow: hidden;
+        font-weight: 600;
+        color: var(--sf-text, #111827);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+}
+
+.sfp .sfp__path {
+        grid-column: 1;
+        overflow: hidden;
+        font-size: 11.5px;
+        color: var(--sf-muted, #6b7280);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+}
+
+.sfp .sfp__chip {
+        grid-column: 2;
+        grid-row: 1 / span 2;
+        padding: 1px 6px;
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--sf-muted, #6b7280);
+        background: var(--sf-well, #f3f4f6);
+        border-radius: 999px;
+}
+
+.sfp .sfp__note {
+        padding: 10px 8px;
+        font-size: 12px;
+        color: var(--sf-muted, #6b7280);
+}
+
+/* ---- Editor top bar ---- */
+.stillframe-result .stillframe-result__toolbar {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-areas: "brand tools actions";
+        align-items: center;
+        gap: 8px 16px;
+        padding: 8px 12px;
+}
+
+.stillframe-result .stillframe-result__brand {
+        grid-area: brand;
+}
+
+.stillframe-result .stillframe-result__editing {
+        grid-area: tools;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 6px 12px;
+}
+
+.stillframe-result .stillframe-result__actions {
+        grid-area: actions;
+        justify-self: end;
+        flex-shrink: 0;
+        gap: 6px;
+        margin-left: 0;
+}
+
+@media (max-width: 1180px) {
+        .stillframe-result .stillframe-result__toolbar {
+                grid-template-columns: minmax(0, 1fr) auto;
+                grid-template-areas: "brand actions" "tools tools";
+        }
+}
+
+.stillframe-result .stillframe-result__tools,
+.stillframe-result .stillframe-result__history,
+.stillframe-result .stillframe-result__sizes,
+.stillframe-result .stillframe-result__swatches {
+        gap: 2px;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+}
+
+.stillframe-result .stillframe-result__editing > * + * {
+        padding-left: 12px;
+        border-left: 1px solid var(--sf-line, #e5e7eb);
+}
+
+.stillframe-result .stillframe-result__swatches {
+        gap: 7px;
+}
+
+.stillframe-result .stillframe-tool,
+.stillframe-result .stillframe-icon-btn,
+.stillframe-result .stillframe-size {
+        width: 30px;
+        height: 30px;
+        color: var(--sf-text-2, #374151) !important;
+        background: transparent !important;
+        border: 1px solid transparent !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+}
+
+.stillframe-result .stillframe-tool svg,
+.stillframe-result .stillframe-icon-btn svg {
+        width: 16px;
+        height: 16px;
+}
+
+.stillframe-result .stillframe-tool:hover,
+.stillframe-result .stillframe-icon-btn:hover,
+.stillframe-result .stillframe-size:hover {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+}
+
+.stillframe-result .stillframe-tool[aria-pressed="true"],
+.stillframe-result .stillframe-size[aria-pressed="true"] {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+.stillframe-result .stillframe-swatch {
+        width: 16px;
+        height: 16px;
+}
+
+.stillframe-result .stillframe-btn {
+        height: 32px;
+        gap: 6px;
+        padding: 0 11px;
+        font-size: 12.5px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+}
+
+.stillframe-result .stillframe-btn svg {
+        width: 16px;
+        height: 16px;
+}
+
+.stillframe-result .stillframe-btn:hover {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+.stillframe-result .stillframe-btn.stillframe-btn-primary,
+.stillframe-result .stillframe-btn.stillframe-btn-primary:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-result .stillframe-btn.stillframe-btn-primary:hover {
+        background: var(--sf-brand-hover) !important;
+}
+
+.stillframe-result .stillframe-btn.stillframe-result__close {
+        width: 32px;
+        padding: 0;
+        color: var(--sf-muted, #6b7280) !important;
+}
+
+.stillframe-result .stillframe-format-select {
+        height: 32px;
+        margin: 0;
+        border-radius: 6px;
+}
+
+/* ---- Recent cards ---- */
+.stillframe-snip .stillframe-recent-btn:hover,
+.stillframe-result .stillframe-recent-btn:hover {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+/* Download keeps its label at every width */
+.stillframe-result .stillframe-btn.stillframe-btn-primary {
+        width: auto;
+        min-width: 0;
+        padding: 0 14px;
+}
+
+.stillframe-result .stillframe-btn.stillframe-btn-primary .stillframe-btn__label {
+        display: inline !important;
+}
+
+/* ---- Direct Page tweaks ---- */
+.stillframe-snip .stillframe-snip__direct-menu {
+        width: 420px;
+        gap: 12px;
+}
+
+.stillframe-snip .sfd-chip {
+        height: 32px;
+}
+
+.stillframe-snip .sfd-chip svg {
+        width: 17px;
+        height: 17px;
+}
+
+.sfd-error {
+        margin: -6px 0 0;
+        padding-left: 72px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #b42318;
+}
+
+.sfd-error:empty {
+        display: none;
+}
+
+.stillframe-snip .sfd-row + .stillframe-hub-toggle,
+.stillframe-snip .stillframe-snip__direct-menu > .stillframe-hub-toggle {
+        margin: 6px 0 4px;
+}
+
+/* Page list opens across the full width of the menu and nothing in it is sticky */
+.sfd-row .sfp .sfp__drop {
+        left: -72px;
+}
+
+.sfp .sfp__search {
+        height: 26px;
+        margin-bottom: 4px;
+        font-size: 12px;
+}
+
+.sfp .sfp__group {
+        position: static;
+}
+
+.sfp .sfp__list {
+        max-height: 260px;
+}
+
+/* ---- Recent cards: quiet hover, smaller buttons ---- */
+.stillframe-snip .stillframe-recent-card:hover,
+.stillframe-result .stillframe-recent-card:hover {
+        background: #ffffff;
+        border-color: var(--sf-line-strong, #d1d5db);
+        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+
+.stillframe-snip .stillframe-recent-actions,
+.stillframe-result .stillframe-recent-actions {
+        flex-wrap: nowrap;
+        gap: 6px;
+}
+
+.stillframe-snip .stillframe-recent-btn,
+.stillframe-result .stillframe-recent-btn {
+        height: 26px !important;
+        gap: 5px !important;
+        padding: 0 9px !important;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        border-radius: 6px !important;
+}
+
+.stillframe-snip .stillframe-recent-btn svg,
+.stillframe-result .stillframe-recent-btn svg {
+        width: 13px;
+        height: 13px;
+}
+
+.stillframe-snip .stillframe-recent-btn:hover,
+.stillframe-result .stillframe-recent-btn:hover {
+        color: var(--sf-text, #111827) !important;
+        background: #f3f4f6 !important;
+        border-color: #9ca3af !important;
+}
+
+.stillframe-snip .stillframe-recent-btn.stillframe-recent-btn--del,
+.stillframe-result .stillframe-recent-btn.stillframe-recent-btn--del {
+        width: 26px !important;
+        padding: 0 !important;
+}
+
+.stillframe-snip .stillframe-recent-btn.stillframe-recent-btn--del:hover,
+.stillframe-result .stillframe-recent-btn.stillframe-recent-btn--del:hover {
+        color: #b42318 !important;
+        background: #fef2f2 !important;
+        border-color: #f1b5b0 !important;
+}
+
+/* ---- Lighter states, calmer menus ---- */
+.stillframe-snip.has-menu-open .stillframe-snip__bar .stillframe-snip__mode[aria-pressed="true"]:not([aria-expanded="true"]) {
+        color: var(--sf-text-2) !important;
+        background: transparent !important;
+        border-color: transparent !important;
+}
+
+/* Both menus open centred under the bar */
+.stillframe-snip .stillframe-snip__devices-wrap,
+.stillframe-snip .stillframe-snip__direct-wrap,
+.stillframe-snip .stillframe-snip__recent-wrap {
+        position: static;
+}
+
+.stillframe-snip .stillframe-snip__direct-menu,
+.stillframe-snip .stillframe-snip__recent-menu {
+        top: calc(100% + 8px);
+        right: auto;
+        left: 50%;
+        transform: translateX(-50%);
+}
+
+.stillframe-snip .stillframe-snip__recent-menu {
+        width: 480px;
+        max-height: min(75vh, 600px);
+        padding: 14px;
+}
+
+.stillframe-snip .stillframe-snip__direct-menu {
+        gap: 14px;
+        padding: 14px 16px 16px;
+}
+
+.stillframe-snip .sfd-label {
+        display: block;
+        padding: 0;
+        margin: 0;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 1.2;
+        color: var(--sf-text-2, #374151);
+        background: none !important;
+        border: 0;
+        border-radius: 0;
+}
+
+.stillframe-snip .sfd-chips {
+        gap: 8px;
+}
+
+.stillframe-snip .sfd-chip:hover {
+        color: var(--sf-brand) !important;
+        background: #f6f8f9 !important;
+        border-color: #aebcc2 !important;
+}
+
+.stillframe-snip .sfd-chip.is-selected,
+.stillframe-snip .sfd-chip.is-selected:hover {
+        color: var(--sf-brand) !important;
+        background: #f4f8fa !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-snip .sfd-seg {
+        gap: 8px;
+        overflow: visible;
+        border: 0;
+        border-radius: 0;
+}
+
+.stillframe-snip .sfd-seg__btn {
+        height: 30px;
+        padding: 0 16px;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px;
+}
+
+.stillframe-snip .sfd-seg__btn:last-child {
+        border-right: 1px solid var(--sf-line-strong, #d1d5db) !important;
+}
+
+.stillframe-snip .sfd-seg__btn:hover {
+        color: var(--sf-brand) !important;
+        background: #f6f8f9 !important;
+        border-color: #aebcc2 !important;
+}
+
+.stillframe-snip .sfd-seg__btn.is-active,
+.stillframe-snip .sfd-seg__btn.is-active:hover {
+        color: var(--sf-brand) !important;
+        background: #f4f8fa !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-snip .sfd-submit,
+.stillframe-snip .sfd-submit:focus {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-snip .sfd-submit:hover {
+        background: var(--sf-brand-hover) !important;
+        border-color: var(--sf-brand-hover) !important;
+}
+
+.stillframe-snip .stillframe-snip__direct-menu > .stillframe-hub-toggle {
+        margin: 4px 0 2px;
+        padding: 4px 0;
+}
+
+/* Page list: lighter rows, no type badge */
+.sfp .sfp__chip {
+        display: none;
+}
+
+.sfp .sfp__list {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+}
+
+.sfp .sfp__row {
+        padding: 6px 10px;
+}
+
+.sfp .sfp__title {
+        font-size: 12.5px;
+        font-weight: 500;
+}
+
+.sfp .sfp__path {
+        font-size: 11px;
+}
+
+.sfp .sfp__group {
+        padding: 8px 10px 3px;
+        font-size: 10px;
+}
+
+.sfp .sfp__row:hover,
+.sfp .sfp__row.is-active {
+        background: #f5f6f7;
+}
+
+.sfp .sfp__row.is-selected {
+        background: #f4f8fa;
+}
+
+.sfp .sfp__trigger:hover,
+.sfp.is-open .sfp__trigger {
+        background: #ffffff !important;
+}
+
+/* ---- Editor: one toolbar row, compact side panel ---- */
+.stillframe-result .stillframe-result__tools { order: 1; }
+.stillframe-result .stillframe-result__history { order: 2; }
+.stillframe-result .stillframe-result__shape-opts { order: 3; display: inline-flex; align-items: center; gap: 6px; }
+.stillframe-result .stillframe-result__swatches { order: 4; }
+.stillframe-result .stillframe-result__sizes { order: 5; }
+
+.stillframe-result .stillframe-result__editing {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 8px 10px;
+}
+
+.stillframe-result .stillframe-result__editing > * + * {
+        padding-left: 10px;
+}
+
+.stillframe-result .stillframe-result__shape-opts[style*="display: none"] {
+        display: none !important;
+        padding-left: 0 !important;
+        border-left: none !important;
+}
+
+.stillframe-result .stillframe-tool,
+.stillframe-result .stillframe-icon-btn,
+.stillframe-result .stillframe-size {
+        width: 28px;
+        height: 28px;
+}
+
+.stillframe-result .stillframe-tool:hover,
+.stillframe-result .stillframe-icon-btn:hover,
+.stillframe-result .stillframe-size:hover,
+.stillframe-result .stillframe-btn:hover {
+        color: var(--sf-brand) !important;
+        background: #f3f5f6 !important;
+}
+
+.stillframe-result .stillframe-tool[aria-pressed="true"],
+.stillframe-result .stillframe-size[aria-pressed="true"] {
+        background: #eef3f5 !important;
+        border-color: transparent !important;
+}
+
+@media (max-width: 1500px) {
+        .stillframe-result .stillframe-result__actions .stillframe-btn:not(.stillframe-btn-primary):not(.stillframe-result__close) .stillframe-btn__label {
+                display: none !important;
+        }
+
+        .stillframe-result .stillframe-result__actions .stillframe-btn:not(.stillframe-btn-primary):not(.stillframe-result__close) {
+                width: 32px;
+                padding: 0;
+        }
+}
+
+@media (max-width: 1180px) {
+        .stillframe-result .stillframe-result__editing {
+                flex-wrap: wrap;
+        }
+}
+
+.stillframe-result .stillframe-result__sidebar {
+        width: 184px;
+}
+
+.stillframe-result .stillframe-result__sidebar-head {
+        font-size: 10.5px !important;
+        padding: 12px 12px 6px;
+}
+
+.stillframe-result .stillframe-device-tab__name {
+        font-size: 12.5px !important;
+        font-weight: 600 !important;
+        line-height: 1.3;
+}
+
+.stillframe-result .stillframe-device-tab__res {
+        font-size: 11px !important;
+}
+
+.stillframe-result .stillframe-sidebar-action-btn {
+        height: 30px;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        box-shadow: none !important;
+}
+
+.stillframe-result .stillframe-sidebar-action-btn:not(.stillframe-sidebar-action-btn--primary):hover {
+        color: var(--sf-brand) !important;
+        background: #f3f5f6 !important;
+        border-color: #aebcc2 !important;
+}
+
+.stillframe-result .stillframe-sidebar-action-btn--primary,
+.stillframe-result .stillframe-sidebar-action-btn--primary:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-result .stillframe-sidebar-action-btn--primary:hover {
+        background: var(--sf-brand-hover) !important;
+}
+
+.stillframe-result .stillframe-device-tab.is-active {
+        background: #f4f8fa;
+        border-color: var(--sf-brand);
+}
+
+/* ---- Round close buttons everywhere ---- */
+.stillframe-result .stillframe-btn.stillframe-result__close,
+.stillframe-result .stillframe-result__drawer-close,
+.stillframe-snip .stillframe-snip__reset,
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__close {
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        border-radius: 50% !important;
+}
+
+.stillframe-result .stillframe-result__drawer-close {
+        width: 28px;
+        height: 28px;
+}
+
+/* ---- Editor top bar: every control on the right shares one height and corner ---- */
+.stillframe-result .stillframe-result__actions {
+        align-items: center;
+        gap: 8px;
+}
+
+.stillframe-result .stillframe-result__actions .stillframe-btn,
+.stillframe-result .stillframe-result__actions .stillframe-format-select {
+        height: 34px;
+        margin: 0;
+        border-radius: 8px;
+}
+
+.stillframe-result .stillframe-result__actions .stillframe-btn:not(.stillframe-btn-primary):not(.stillframe-result__close) {
+        min-width: 34px;
+}
+
+.stillframe-result .stillframe-result__actions .stillframe-format-select {
+        appearance: none;
+        -webkit-appearance: none;
+        padding: 0 28px 0 12px;
+        font-size: 12.5px;
+        font-weight: 600;
+        line-height: 32px;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
+        background-repeat: no-repeat;
+        background-position: right 9px center;
+}
+
+/* ---- Page list: the search box scrolls away with the list ---- */
+.sfp .sfp__drop {
+        max-height: 300px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+}
+
+.sfp .sfp__list {
+        max-height: none;
+        overflow: visible;
+}
+
+/* ---- Hover help next to Quality and Height ---- */
+.sfd-label {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+}
+
+.sfd-info {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--sf-muted, #6b7280);
+        cursor: help;
+        border-radius: 50%;
+}
+
+.sfd-info:hover,
+.sfd-info:focus-visible {
+        color: var(--sf-brand, #005976);
+        outline: none;
+}
+
+.sfd-info__tip {
+        position: absolute;
+        z-index: 50;
+        left: -6px;
+        bottom: calc(100% + 8px);
+        display: none;
+        width: max-content;
+        max-width: 230px;
+        padding: 8px 10px;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1.45;
+        color: #ffffff;
+        background: #14313c;
+        border-radius: 8px;
+        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
+        pointer-events: none;
+}
+
+.sfd-info__tip::after {
+        content: "";
+        position: absolute;
+        left: 10px;
+        top: 100%;
+        border: 5px solid transparent;
+        border-top-color: #14313c;
+}
+
+.sfd-info:hover .sfd-info__tip,
+.sfd-info:focus-visible .sfd-info__tip {
+        display: block;
+}
+
+.sfd-info__line {
+        display: block;
+}
+
+.sfd-info__line b {
+        font-weight: 700;
+}
+
+/* ---- Toast ---- */
+.stillframe-toast {
+        position: fixed;
+        z-index: 1000001;
+        left: 50%;
+        bottom: 24px;
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        max-width: min(520px, calc(100vw - 32px));
+        padding: 10px 16px 10px 11px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 1.35;
+        color: #1f2937;
+        background: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
+        opacity: 0;
+        transform: translate(-50%, 10px);
+        pointer-events: none;
+        transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.stillframe-toast.is-visible {
+        opacity: 1;
+        transform: translate(-50%, 0);
+        pointer-events: auto;
+}
+
+.stillframe-toast__icon {
+        flex: none;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: #e6f4f8;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 14px 14px;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005976' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8v.01M12 12v5'/></svg>");
+}
+
+.stillframe-toast[data-tone="success"] .stillframe-toast__icon {
+        background-color: #005976;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
+}
+
+.stillframe-toast[data-tone="error"] .stillframe-toast__icon {
+        background-color: #fdecea;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v7M12 18v.01'/></svg>");
+}
+
+.stillframe-toast[data-tone="busy"] .stillframe-toast__icon {
+        background-image: none;
+        background-color: transparent;
+        border: 2.5px solid #cfe5ec;
+        border-top-color: #005976;
+        animation: stillframe-toast-spin 0.8s linear infinite;
+}
+
+.stillframe-toast__link {
+        padding-left: 12px;
+        font-weight: 600;
+        color: #005976;
+        text-decoration: none;
+        white-space: nowrap;
+        border-left: 1px solid #e5e7eb;
+}
+
+.stillframe-toast__link:hover {
+        text-decoration: underline;
+}
+
+@keyframes stillframe-toast-spin {
+        to {
+                transform: rotate(360deg);
+        }
+}
+
+/* ---- Options for the selected mark ---- */
+.stillframe-result .stillframe-result__props {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px 18px;
+        padding: 6px 16px;
+        background: #f9fafb;
+        border-bottom: 1px solid var(--sf-line, #e5e7eb);
+}
+
+.stillframe-result .stillframe-result__props[hidden] {
+        display: none;
+}
+
+.stillframe-result .stillframe-prop {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+}
+
+.stillframe-result .stillframe-prop__label {
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-result .stillframe-prop__select {
+        box-sizing: border-box !important;
+        height: 28px !important;
+        max-height: 28px !important;
+        line-height: 26px !important;
+        padding: 0 8px !important;
+        font-size: 12px !important;
+        font-weight: 500 !important;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px !important;
+        cursor: pointer;
+        outline: none;
+}
+
+.stillframe-result .stillframe-prop__select:hover {
+        border-color: var(--sf-brand, #005976) !important;
+}
+
+.stillframe-result .stillframe-prop__color {
+        width: 28px;
+        height: 28px;
+        padding: 2px;
+        background: #ffffff;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 50%;
+        cursor: pointer;
+}
+
+.stillframe-result .stillframe-prop__toggle,
+.stillframe-result .stillframe-prop__seg-btn {
+        box-sizing: border-box !important;
+        height: 28px !important;
+        max-height: 28px !important;
+        min-width: 28px !important;
+        line-height: 26px !important;
+        padding: 0 8px !important;
+        font-size: 12px !important;
+        font-weight: 700 !important;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px !important;
+        cursor: pointer;
+        transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.stillframe-result .stillframe-prop__seg {
+        display: inline-flex;
+}
+
+.stillframe-result .stillframe-prop__seg-btn:first-child {
+        border-radius: 6px 0 0 6px;
+}
+
+.stillframe-result .stillframe-prop__seg-btn:last-child {
+        margin-left: -1px;
+        border-radius: 0 6px 6px 0;
+}
+
+.stillframe-result .stillframe-prop__toggle[aria-pressed="true"],
+.stillframe-result .stillframe-prop__seg-btn[aria-pressed="true"] {
+        color: #ffffff;
+        background: var(--sf-brand, #005976);
+        border-color: var(--sf-brand, #005976);
+}
+
+/* ---- Custom colour and thickness slider ---- */
+.stillframe-result .stillframe-swatch-custom {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 18px;
+        height: 18px;
+        padding: 0;
+        cursor: pointer;
+        background: conic-gradient(#ef4444, #facc15, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
+        border: 0;
+        border-radius: 50%;
+        box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.18);
+}
+
+.stillframe-result .stillframe-swatch-custom::-webkit-color-swatch-wrapper {
+        padding: 0;
+        opacity: 0;
+}
+
+.stillframe-result .stillframe-swatch-custom::-moz-color-swatch {
+        opacity: 0;
+}
+
+.stillframe-result .stillframe-size-slider {
+        width: 92px;
+        height: 4px;
+        margin: 0 4px;
+        cursor: pointer;
+        accent-color: var(--sf-brand, #005976);
+}
+
+/* ---- Text size control ---- */
+.stillframe-result .stillframe-prop__size {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+}
+
+.stillframe-result .stillframe-prop__range {
+        width: 140px;
+        accent-color: var(--sf-brand, #005976);
+}
+
+.stillframe-result .stillframe-prop__number {
+        width: 58px;
+        height: 28px;
+        padding: 0 6px;
+        font-size: 12.5px;
+        color: var(--sf-text-2, #374151);
+        background: #ffffff;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 6px;
+}
+
+/* ---- Top bar controls: exactly one height, whatever WordPress does to selects ---- */
+.stillframe-result .stillframe-result__actions > .stillframe-btn,
+.stillframe-result .stillframe-result__actions > .stillframe-format-select {
+        box-sizing: border-box !important;
+        height: 36px !important;
+        min-height: 36px !important;
+        max-height: 36px !important;
+        margin: 0 !important;
+        line-height: 1 !important;
+        border-radius: 8px;
+}
+
+.stillframe-result .stillframe-result__actions > .stillframe-format-select {
+        padding: 0 28px 0 12px !important;
+        line-height: 34px !important;
+}
+
+.stillframe-result .stillframe-result__actions > .stillframe-btn.stillframe-result__close {
+        width: 36px !important;
+        border-radius: 50% !important;
+}
+
+.stillframe-result .stillframe-result__actions > .stillframe-btn:not(.stillframe-btn-primary):not(.stillframe-result__close) {
+        min-width: 36px;
+}
+
+/* Marks may hang past the picture, so the wrapper must not clip them */
+.stillframe-result .stillframe-capture-panel__canvas-wrap:has(img) {
+        overflow: visible;
+}
+
+.stillframe-result .stillframe-capture-panel__canvas-wrap > img {
+        border-radius: 4px;
+}
+
+/* ---- Device sizes shown in Window mode ---- */
+.stillframe-snip__devstrip {
+        position: fixed;
+        z-index: 7;
+        top: 74px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: max-content;
+        max-width: calc(100vw - 16px);
+        margin: 0;
+        padding: 5px 12px;
+        background: var(--sf-surface, #ffffff);
+        border: 1px solid var(--sf-line, #e5e7eb);
+        border-radius: 10px;
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.08);
+        pointer-events: auto;
+}
+
+.stillframe-snip__devstrip[hidden] {
+        display: none;
+}
+
+.stillframe-snip__devstrip-label {
+        margin-right: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--sf-muted, #6b7280);
+        white-space: nowrap;
+}
+
+.stillframe-snip .stillframe-snip__devstrip-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12.5px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151);
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        box-shadow: none;
+}
+
+.stillframe-snip .stillframe-snip__devstrip-btn small {
+        font-size: 11px;
+        font-weight: 500;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-snip .stillframe-snip__devstrip-btn:hover,
+.stillframe-snip .stillframe-snip__devstrip-btn[aria-pressed="true"] {
+        color: var(--sf-brand, #005976);
+        background: var(--sf-brand-muted, #e6f4f8);
+}

stillframe/tags/0.2.5/assets/css/stillframe-tools.css

@@ -473 +473 @@
 }
 
-/* Neutral accents: the brand colour is only for the primary Capture button. */
-:root {
-        --sf-ink: #1d2327;
-}
-
-.stillframe-select:focus,
-.stillframe-input:focus {
-        border-color: var(--sf-ink) !important;
-        box-shadow: none !important;
-}
-
-.stillframe-device-tile.is-active {
-        border-color: var(--sf-ink);
-        background: var(--sf-well);
-}
-
-.stillframe-device-tile.is-active .stillframe-device-tile__icon {
-        color: var(--sf-ink);
-}
-
-.stillframe-device-tile.is-active .stillframe-device-tile__check {
-        background: var(--sf-ink);
-        border-color: var(--sf-ink);
-}
-
-.stillframe-device-tile.is-active .stillframe-device-tile__res {
-        color: var(--sf-muted);
-        font-weight: 400;
-}
-
-.stillframe-pill.is-active,
-.stillframe-pill.is-active:hover {
-        background: #f0f0f1;
-        border-color: var(--sf-ink);
-        color: var(--sf-ink);
-        font-weight: 600;
-}
-
-.stillframe-switch-wrap input.stillframe-switch-input:checked + .stillframe-switch-slider {
-        background: var(--sf-ink);
-}
-
-/* Softer, button-like choices */
-.stillframe-pill {
-        background: #fafafa;
-        border-color: #b4bac4;
-}
-
-.stillframe-pill:hover {
-        background: #f0f0f1;
-        border-color: #6b7280;
-}
-
-.stillframe-pill.is-active,
-.stillframe-pill.is-active:hover {
-        background: #eceef1;
-        border-color: #6b7280;
-        color: var(--sf-ink);
-}
-
-.stillframe-device-tile {
-        border-width: 1px;
-        border-color: #b4bac4;
-}
-
-.stillframe-device-tile.is-active {
-        background: #f3f4f6;
-        border-color: #6b7280;
-        box-shadow: inset 0 0 0 1px #6b7280;
-}
-
-.stillframe-device-tile.is-active .stillframe-device-tile__check {
-        background: #6b7280;
-        border-color: #6b7280;
-}
-
-.stillframe-switch-wrap input.stillframe-switch-input:checked + .stillframe-switch-slider {
-        background: #6b7280;
-}
-
 .stillframe-box__header {
         padding: 18px 28px;

stillframe/tags/0.2.5/assets/js/stillframe-admin-bar.js

@@ -35 +35 @@
                         throw new Error('origin');
                 }
-                if (config.version) {
-                        parsed.searchParams.set('ver', String(config.version));
+                var ver = config.assetVer || config.version;
+                if (ver) {
+                        parsed.searchParams.set('ver', String(ver));
                 }
                 return parsed.toString();
@@ -93 +94 @@
                         return loading;
                 }
+                var useFabric = config.useFabric !== false;
                 loading = Promise.resolve().then(function () {
-                        return Promise.all([
+                        var initial = [
                                 loadStylesheet(assetUrl('assets/css/stillframe-capture-panel.css'), 'stillframe-capture-panel-css'),
-                                loadScript(assetUrl('assets/js/stillframe-annotation-editor.js'), 'stillframe-annotation-editor-js'),
                                 loadScript(assetUrl('assets/js/vendor/modern-screenshot.js'), 'stillframe-modern-screenshot-js')
-                        ]);
+                        ];
+                        if (useFabric) {
+                                initial.push(loadScript(assetUrl('assets/js/vendor/fabric.min.js'), 'stillframe-fabric-js'));
+                        }
+                        return Promise.all(initial);
+                }).then(function () {
+                        var editorScript = useFabric ? 'assets/js/stillframe-annotation-editor-v2.js' : 'assets/js/stillframe-annotation-editor.js';
+                        return loadScript(assetUrl(editorScript), 'stillframe-annotation-editor-js');
                 }).then(function () {
                         return loadScript(assetUrl('assets/js/stillframe-capture-panel.js'), 'stillframe-capture-panel-js');

stillframe/tags/0.2.5/assets/js/stillframe-annotation-editor.js

@@ -11 +11 @@
         var BOX_TYPES = { circle: 1, rect: 1, highlight: 1, blur: 1 };
         var NO_ROTATE = { arrow: 1, blur: 1, step: 1 };
-        var UNIFORM = { text: 1, step: 1 };
+        var UNIFORM = { step: 1 };
         var MAX_MARKS = 400;
         var MAX_PEN_POINTS = 3000;
-        var HANDLE_PX = 9;
-        var ROTATE_OFFSET = 26;
+        var HANDLE_PX = 6;
+        var ROTATE_OFFSET = 16;
         var measureCtx = null;
 
@@ -580 +580 @@
                                                         return;
                                                 }
+                                                var wShape = b.r - b.l;
+                                                var hShape = b.b - b.t;
+                                                var minShape = Math.min(wShape, hShape);
+                                                var hRad = minShape < 35 ? 2.5 : (minShape < 70 ? 3 : 3.5);
                                                 ctx.fillStyle = '#ffffff';
-                                                ctx.strokeStyle = '#374151';
+                                                ctx.strokeStyle = '#005976';
+                                                ctx.lineWidth = 1.5;
                                                 ctx.beginPath();
                                                 if (hd.id === 'rot') {
@@ -588 +593 @@
                                                         ctx.stroke();
                                                         ctx.beginPath();
-                                                        ctx.arc(hd.x, hd.y, 5, 0, Math.PI * 2);
+                                                        ctx.arc(hd.x, hd.y, hRad, 0, Math.PI * 2);
                                                 } else {
-                                                        ctx.rect(hd.x - 4, hd.y - 4, 8, 8);
+                                                        ctx.arc(hd.x, hd.y, hRad, 0, Math.PI * 2);
                                                 }
                                                 ctx.fill();
@@ -970 +975 @@
                                         m.x1 = cw.x / d.w;
                                         m.y1 = cw.y / d.h;
+                                }
+                        } else if (o.type === 'text') {
+                                var isSide = h === 'w' || h === 'e' || h === 'ml' || h === 'mr';
+                                if (isSide) {
+                                        var rawW = (h.indexOf('w') > -1 || h === 'ml') ? b.r - local.x : local.x - b.l;
+                                        m.w = Math.max(0.04, Math.min(1.5, rawW / d.w));
                                 } else {
-                                        m.fs = Math.max(8, Math.min(240, fontSize(o) * s));
+                                        var rawW = h.indexOf('w') > -1 ? b.r - local.x : local.x - b.l;
+                                        var rawH = h.indexOf('n') > -1 ? b.b - local.y : local.y - b.t;
+                                        var s = Math.max(rawW / ow, rawH / oh, min / Math.min(ow, oh));
+                                        m.fs = Math.max(8, Math.min(240, Math.round(fontSize(o) * s)));
                                         if (o.w) {
-                                                m.w = Math.min(1, o.w * s);
+                                                m.w = Math.min(1.5, o.w * s);
                                         }
-                                        var lay = textLayout(m, d.w);
-                                        m.x1 = (cw.x - lay.width / 2) / d.w;
-                                        m.y1 = (cw.y - lay.height / 2) / d.h;
                                 }
                                 return;

stillframe/tags/0.2.5/assets/js/stillframe-capture-panel.js

@@ -14 +14 @@
         var returnFocus = null;
         var captured = null;
+        var resultDevices = null;
         var statusNode = null;
         var propsNode = null;
@@ -56 +57 @@
         };
 
-        // Above this many elements, or after a render slower than SLOW_RENDER_MS,
-        // the page is rendered only after the selection is released. A background
-        // render freezes the main thread and would make the drag stutter.
-        var HEAVY_PAGE_NODES = 1500;
+        // A background render freezes the main thread, so it waits until the pointer
+        // has been idle. Full screen starts it immediately.
         var SLOW_RENDER_MS = 700;
         var IDLE_BEFORE_RENDER_MS = 1500;
 
         function canPrerender() {
-                // Do not prerender in the background during active capture — it freezes the main thread
-                // on pages with many DOM nodes, causing dropped clicks and sluggish interaction.
-                return false;
+                // The redraw is heavy, so it starts only after the pointer has been idle.
+                // That way a full-screen shot can already be underway before Capture is clicked.
+                return true;
         }
 
@@ -305 +304 @@
         }
 
+        // Read-only actions such as "edit" stay. These values change data if replayed.
+        var MUTATING_ACTIONS = [
+                'trash', 'untrash', 'delete', 'delete-all', 'editpost', 'postajaxpost', 'post-quickdraft-save',
+                'deletecomment', 'trashcomment', 'untrashcomment', 'spamcomment', 'unspamcomment', 'approvecomment', 'unapprovecomment',
+                'approve', 'unapprove', 'spam', 'unspam', 'dim-comment',
+                'activate', 'deactivate', 'activate-selected', 'deactivate-selected', 'update-selected', 'delete-selected',
+                'enable-auto-update', 'disable-auto-update', 'error_scrape', 'resume',
+                'upgrade-plugin', 'upgrade-theme', 'do-plugin-upgrade', 'do-theme-upgrade', 'do-core-upgrade', 'do-translation-upgrade',
+                'install-plugin', 'install-theme', 'upload-plugin', 'upload-theme',
+                'logout', 'remove', 'deleteblog', 'spamblog'
+        ];
+
+        function mutatingActions() {
+                return Array.isArray(config.mutatingActions) && config.mutatingActions.length
+                        ? config.mutatingActions
+                        : MUTATING_ACTIONS;
+        }
+
+        function actionIsMutating(value) {
+                var list = mutatingActions();
+                if (Array.isArray(value)) {
+                        return value.some(actionIsMutating);
+                }
+                var name = String(value || '').toLowerCase();
+                if (!name) {
+                        return false;
+                }
+                return list.indexOf(name) !== -1;
+        }
+
+        // Drop nonces and state-changing actions from any URL the capture iframe will open.
+        // Read-only actions such as edit stay, so a pasted editor link still opens the editor.
+        function scrubCaptureUrl(urlString) {
+                var current = new URL(window.location.href);
+                var target;
+                try {
+                        target = new URL(String(urlString || current.href), current.href);
+                } catch (error) {
+                        target = new URL(current.href);
+                }
+                var strip = Array.isArray(config.stripArgs) && config.stripArgs.length
+                        ? config.stripArgs
+                        : ['_wpnonce', 'nonce', '_wp_http_referer', 'wp_customize'];
+                strip.forEach(function (key) {
+                        if (String(key) === 'action') {
+                                return;
+                        }
+                        target.searchParams.delete(String(key));
+                });
+                var actions = target.searchParams.getAll('action');
+                if (actions.some(actionIsMutating)) {
+                        target.searchParams.delete('action');
+                }
+                target.hash = '';
+                return target.toString();
+        }
+
         function captureTargetUrl() {
                 var current = new URL(window.location.href);
@@ -316 +372 @@
                         target = new URL(current.href);
                 }
-                var strip = Array.isArray(config.stripArgs) && config.stripArgs.length
-                        ? config.stripArgs
-                        : ['action', '_wpnonce', 'nonce', '_wp_http_referer', 'wp_customize'];
-                strip.forEach(function (key) {
-                        target.searchParams.delete(String(key));
-                });
-                target.hash = '';
-                return target.toString();
+                return scrubCaptureUrl(target.toString());
         }
 
@@ -1478 +1527 @@
         }
 
+        // The redraw keeps each box at its on-screen width but can draw text a
+        // fraction wider, so a row that fit on one line (pagination, the admin bar
+        // avatar) wraps in the shot. Rows that sit on one line now are marked so the
+        // copy cannot wrap them; multi-line boxes inside them keep wrapping.
+        var ATOMIC_TAGS = { IMG: true, INPUT: true, SELECT: true, TEXTAREA: true, BUTTON: true, SVG: true, svg: true, CANVAS: true, VIDEO: true, IFRAME: true, OBJECT: true, EMBED: true };
+
+        // Boxes that sit on the lines of el. Text and inline boxes count; block
+        // children count as one box each. Out-of-flow content such as WordPress's
+        // screen-reader-text labels (absolute, clipped to 1px) is ignored.
+        function lineRects(el, win, range) {
+                var rects = [];
+                var stack = [el];
+                while (stack.length) {
+                        var node = stack.pop();
+                        var child;
+                        for (child = node.lastChild; child; child = child.previousSibling) {
+                                if (child.nodeType === 3) {
+                                        if (/\S/.test(child.data)) {
+                                                range.selectNodeContents(child);
+                                                Array.prototype.push.apply(rects, range.getClientRects());
+                                        }
+                                        continue;
+                                }
+                                if (child.nodeType !== 1) {
+                                        continue;
+                                }
+                                var cs = win.getComputedStyle(child);
+                                if (cs.display === 'none' || cs.position === 'absolute' || cs.position === 'fixed') {
+                                        continue;
+                                }
+                                if (cs.display === 'contents' || (cs.display === 'inline' && !ATOMIC_TAGS[child.tagName])) {
+                                        stack.push(child);
+                                        continue;
+                                }
+                                rects.push(child.getBoundingClientRect());
+                        }
+                }
+                return rects;
+        }
+
+        function markSingleLines(doc, crop) {
+                var marked = [];
+                var win = doc.defaultView;
+                var all = doc.body ? doc.body.getElementsByTagName('*') : [];
+                var range = doc.createRange();
+                var i;
+                for (i = 0; i < all.length; i++) {
+                        var el = all[i];
+                        var box = el.getBoundingClientRect();
+                        if (!box.width || !box.height || box.height > 160) {
+                                continue;
+                        }
+                        if (crop && (box.bottom < crop.y || box.top > crop.y + crop.height || box.right < crop.x || box.left > crop.x + crop.width)) {
+                                continue;
+                        }
+                        var style;
+                        try {
+                                style = win.getComputedStyle(el);
+                        } catch (error) {
+                                continue;
+                        }
+                        if (style.whiteSpace !== 'normal' || style.display === 'inline' || style.display === 'contents' || style.display === 'none') {
+                                continue;
+                        }
+                        var rects = lineRects(el, win, range);
+                        var top = -Infinity;
+                        var bottom = Infinity;
+                        var count = 0;
+                        var r;
+                        for (r = 0; r < rects.length; r++) {
+                                if (!rects[r].width || !rects[r].height) {
+                                        continue;
+                                }
+                                top = Math.max(top, rects[r].top);
+                                bottom = Math.min(bottom, rects[r].bottom);
+                                count++;
+                        }
+                        if (!count) {
+                                continue;
+                        }
+                        var name = top < bottom ? 'data-stillframe-line' : 'data-stillframe-wrap';
+                        if (name === 'data-stillframe-wrap' && !(el.parentElement && el.parentElement.closest('[data-stillframe-line]'))) {
+                                continue;
+                        }
+                        el.setAttribute(name, '1');
+                        marked.push([el, name]);
+                }
+                if (range.detach) {
+                        range.detach();
+                }
+                return function () {
+                        marked.forEach(function (item) {
+                                item[0].removeAttribute(item[1]);
+                        });
+                };
+        }
+
         function prepareClone(root, view, crop) {
                 if (!root || root.nodeType !== 1) {
@@ -1483 +1629 @@
                 }
                 var doc = view.document;
+                // The copy writes text-wrap onto every element, so a one-line row is
+                // held on one line by setting it on each element inside it, except
+                // inside boxes that wrap on screen. text-wrap-mode leaves spacing alone.
+                var wrapProp = view.CSS && view.CSS.supports && view.CSS.supports('text-wrap-mode', 'nowrap') ? 'text-wrap-mode' : 'white-space';
+                Array.prototype.forEach.call(root.querySelectorAll('[data-stillframe-line], [data-stillframe-line] *'), function (node) {
+                        var owner = node.closest('[data-stillframe-line], [data-stillframe-wrap]');
+                        if (owner && owner.hasAttribute('data-stillframe-line') && node.style) {
+                                node.style.setProperty(wrapProp, 'nowrap', 'important');
+                        }
+                });
                 Array.prototype.forEach.call(root.querySelectorAll('[data-stillframe-off]'), function (node) {
                         if (node.tagName === 'IMG') {
@@ -1550 +1706 @@
         }
 
+        function fontNames(value) {
+                return String(value || '').toLowerCase().split(',').map(function (part) {
+                        return part.trim().replace(/^["']|["']$/g, '');
+                }).filter(Boolean);
+        }
+
+        // Drop the CSS alt-text separator in values such as "\f148" / "".
+        function stripContentAlt(text) {
+                var quote = '';
+                var i;
+                for (i = 0; i < text.length; i++) {
+                        var ch = text.charAt(i);
+                        if (quote) {
+                                if (ch === '\\') {
+                                        i++;
+                                        continue;
+                                }
+                                if (ch === quote) {
+                                        quote = '';
+                                }
+                                continue;
+                        }
+                        if (ch === '"' || ch === "'") {
+                                quote = ch;
+                                continue;
+                        }
+                        if (ch === '/' && i > 0 && text.charAt(i - 1) === ' ' && text.charAt(i + 1) === ' ') {
+                                return text.slice(0, i - 1).trim();
+                        }
+                }
+                return text;
+        }
+
+        function quotedStrings(text) {
+                var out = [];
+                var i = 0;
+                while (i < text.length) {
+                        var ch = text.charAt(i);
+                        if (ch !== '"' && ch !== "'") {
+                                i++;
+                                continue;
+                        }
+                        var quote = ch;
+                        var buf = '';
+                        i++;
+                        while (i < text.length) {
+                                var c = text.charAt(i);
+                                if (c === '\\') {
+                                        i++;
+                                        if (i < text.length) {
+                                                buf += text.charAt(i);
+                                        }
+                                        i++;
+                                        continue;
+                                }
+                                if (c === quote) {
+                                        i++;
+                                        break;
+                                }
+                                buf += c;
+                                i++;
+                        }
+                        out.push(buf);
+                }
+                return out;
+        }
+
+        // getComputedStyle returns a quoted string for content, or the keyword none.
+        function pseudoText(content) {
+                if (!content || content === 'none' || content === 'normal') {
+                        return '';
+                }
+                var text = stripContentAlt(String(content).trim());
+                if (/^(?:url|attr|counter|counters|image-set|-webkit-image-set|[a-z-]*gradient)\(/i.test(text)) {
+                        return '';
+                }
+                var parts = quotedStrings(text);
+                if (parts.length) {
+                        text = parts.join('');
+                }
+                if (!text || text === 'none' || text === 'normal') {
+                        return '';
+                }
+                return text;
+        }
+
+        function usesIconFont(fontFamily) {
+                return /dashicons|fontawesome|font-awesome|font awesome|material-icons|material icons|glyphicons|icomoon|ionicons|bootstrap-icons|feather|remixicon|tabler/i.test(fontFamily || '');
+        }
+
+        // A slash in the shot is a private-use icon character written into a CSS ::before.
+        // Real text in that same font draws; the pseudo's character does not.
+        function needsRealGlyph(text, fontFamily) {
+                var i;
+                if (!text || /^\s+$/.test(text)) {
+                        return false;
+                }
+                if (usesIconFont(fontFamily)) {
+                        return true;
+                }
+                for (i = 0; i < text.length; i++) {
+                        if (text.charCodeAt(i) > 126) {
+                                return true;
+                        }
+                }
+                return false;
+        }
+
+        function iconContentSelectors(doc) {
+                var list = [];
+                var seen = {};
+                function add(selectorText) {
+                        if (!selectorText) {
+                                return;
+                        }
+                        selectorText.split(',').forEach(function (raw) {
+                                var sel = raw.replace(/::(?:before|after)/gi, '').replace(/:(?:before|after)/gi, '').trim();
+                                if (!sel || seen[sel]) {
+                                        return;
+                                }
+                                seen[sel] = true;
+                                list.push(sel);
+                        });
+                }
+                function walk(rules) {
+                        var i;
+                        for (i = 0; i < rules.length; i++) {
+                                var rule = rules[i];
+                                if (rule.cssRules && rule.cssRules.length) {
+                                        try {
+                                                walk(rule.cssRules);
+                                        } catch (error) {}
+                                }
+                                if (!rule.style || !rule.selectorText) {
+                                        continue;
+                                }
+                                if (rule.selectorText.indexOf('before') === -1 && rule.selectorText.indexOf('after') === -1) {
+                                        continue;
+                                }
+                                var content = rule.style.getPropertyValue('content');
+                                if (!content || content === 'none' || content === 'normal' || content === '""' || content === "''") {
+                                        continue;
+                                }
+                                if (/counter\(|url\(|attr\(|gradient|image-set|open-quote|close-quote/i.test(content)) {
+                                        continue;
+                                }
+                                if (!needsRealGlyph(pseudoText(content), rule.style.getPropertyValue('font-family'))) {
+                                        continue;
+                                }
+                                add(rule.selectorText);
+                        }
+                }
+                var sheets = doc.styleSheets;
+                var s;
+                for (s = 0; s < sheets.length; s++) {
+                        var rules;
+                        try {
+                                rules = sheets[s].cssRules;
+                        } catch (error2) {
+                                continue;
+                        }
+                        if (rules) {
+                                walk(rules);
+                        }
+                }
+                return list;
+        }
+
+        function iconCandidates(root) {
+                var doc = root.ownerDocument || document;
+                var found = [];
+                var seen = typeof WeakSet === 'function' ? new WeakSet() : null;
+                function add(el) {
+                        if (!el || el.nodeType !== 1) {
+                                return;
+                        }
+                        if (seen) {
+                                if (seen.has(el)) {
+                                        return;
+                                }
+                                seen.add(el);
+                        }
+                        found.push(el);
+                }
+                function take(list) {
+                        var i;
+                        for (i = 0; i < list.length; i++) {
+                                add(list[i]);
+                        }
+                }
+                try {
+                        take(root.querySelectorAll('[class*="dashicons"], .wp-menu-image, .ab-icon, .view-switch a, .collapse-button-icon'));
+                } catch (error) {
+                        return found;
+                }
+                var selectors = iconContentSelectors(doc);
+                var batch = [];
+                function flush() {
+                        if (!batch.length) {
+                                return;
+                        }
+                        var query = batch.join(',');
+                        batch = [];
+                        try {
+                                take(root.querySelectorAll(query));
+                        } catch (error2) {
+                                query.split(',').forEach(function (sel) {
+                                        try {
+                                                take(root.querySelectorAll(sel));
+                                        } catch (error3) {
+                                                return;
+                                        }
+                                });
+                        }
+                }
+                var i;
+                for (i = 0; i < selectors.length; i++) {
+                        batch.push(selectors[i]);
+                        if (batch.length === 20) {
+                                flush();
+                        }
+                }
+                flush();
+                return found;
+        }
+
+        // Icon fonts such as dashicons live on ::before / ::after. The redraw turns
+        // those characters into slashes, so the glyph is painted as real text instead.
+        // The live page is only marked. The glyphs go into the redraw's copy, where
+        // no page stylesheet applies, so nothing on screen moves while the shot is
+        // taken and no theme rule (span, :first-child, :empty) can restyle them.
+        var GLYPH_ATTR = 'data-stillframe-glyph';
+
+        function pinIconFonts(root) {
+                var marked = [];
+                var glyphs = {};
+                var families = [];
+                var seenFamily = {};
+                var doc = root && root.ownerDocument;
+                var none = {
+                        undo: function () {},
+                        apply: function () {},
+                        families: families
+                };
+                if (!root || root.nodeType !== 1 || !root.querySelectorAll || !doc) {
+                        return none;
+                }
+                var view = doc.defaultView || window;
+                var skip = {
+                        IMG: true,
+                        INPUT: true,
+                        TEXTAREA: true,
+                        SELECT: true,
+                        OPTION: true,
+                        BR: true,
+                        HR: true,
+                        SVG: true,
+                        CANVAS: true,
+                        VIDEO: true,
+                        IFRAME: true,
+                        SCRIPT: true,
+                        STYLE: true
+                };
+                var nodes = iconCandidates(root);
+                var i;
+                for (i = 0; i < nodes.length; i++) {
+                        var el = nodes[i];
+                        if (!el || skip[el.tagName]) {
+                                continue;
+                        }
+                        if (el.namespaceURI && el.namespaceURI !== 'http://www.w3.org/1999/xhtml') {
+                                continue;
+                        }
+                        if (el.closest && el.closest('.stillframe-snip, .stillframe-result, .stillframe-capture-panel, .stillframe-capture-frame')) {
+                                continue;
+                        }
+                        var elStyle;
+                        try {
+                                elStyle = view.getComputedStyle(el);
+                        } catch (error) {
+                                continue;
+                        }
+                        if (elStyle.display === 'none' || elStyle.visibility === 'hidden') {
+                                continue;
+                        }
+                        var pseudos = ['::before', '::after'];
+                        var p;
+                        for (p = 0; p < pseudos.length; p++) {
+                                var pseudo = pseudos[p];
+                                var cs;
+                                try {
+                                        cs = view.getComputedStyle(el, pseudo);
+                                } catch (error2) {
+                                        continue;
+                                }
+                                var text = pseudoText(cs.content);
+                                if (!needsRealGlyph(text, cs.fontFamily)) {
+                                        continue;
+                                }
+                                // Every computed property, so borders, min-width, flex and float
+                                // match the pseudo-element exactly.
+                                var style = [];
+                                var c;
+                                for (c = 0; c < cs.length; c++) {
+                                        var prop = cs.item(c);
+                                        if (prop !== 'content') {
+                                                style.push([prop, cs.getPropertyValue(prop)]);
+                                        }
+                                }
+                                var id = el.getAttribute(GLYPH_ATTR);
+                                if (!id) {
+                                        id = String(marked.length);
+                                        el.setAttribute(GLYPH_ATTR, id);
+                                        marked.push(el);
+                                        glyphs[id] = {};
+                                }
+                                glyphs[id][pseudo] = { text: text, style: style };
+                                var fam = cs.fontFamily;
+                                if (fam && !seenFamily[fam]) {
+                                        seenFamily[fam] = true;
+                                        families.push(fam);
+                                }
+                        }
+                }
+                if (!marked.length) {
+                        return none;
+                }
+
+                function makeGlyph(cloneDoc, entry) {
+                        var span = cloneDoc.createElement('span');
+                        span.setAttribute('aria-hidden', 'true');
+                        entry.style.forEach(function (pair) {
+                                span.style.setProperty(pair[0], pair[1]);
+                        });
+                        span.textContent = entry.text;
+                        return span;
+                }
+
+                return {
+                        // Swap the pseudo-elements for real glyphs inside the cloned tree.
+                        apply: function (cloned) {
+                                if (!cloned || cloned.nodeType !== 1 || !cloned.querySelectorAll) {
+                                        return;
+                                }
+                                var cloneDoc = cloned.ownerDocument || doc;
+                                var nodes = Array.prototype.slice.call(cloned.querySelectorAll('[' + GLYPH_ATTR + ']'));
+                                if (cloned.hasAttribute(GLYPH_ATTR)) {
+                                        nodes.unshift(cloned);
+                                }
+                                if (!nodes.length) {
+                                        return;
+                                }
+                                nodes.forEach(function (host) {
+                                        var entry = glyphs[host.getAttribute(GLYPH_ATTR)];
+                                        host.removeAttribute(GLYPH_ATTR);
+                                        if (!entry) {
+                                                return;
+                                        }
+                                        if (entry['::before']) {
+                                                host.insertBefore(makeGlyph(cloneDoc, entry['::before']), host.firstChild);
+                                                host.classList.add('stillframe-icon-before');
+                                        }
+                                        if (entry['::after']) {
+                                                host.appendChild(makeGlyph(cloneDoc, entry['::after']));
+                                                host.classList.add('stillframe-icon-after');
+                                        }
+                                });
+                                var styleTag = cloneDoc.createElement('style');
+                                styleTag.textContent = '.stillframe-icon-before::before{content:none!important;}.stillframe-icon-after::after{content:none!important;}';
+                                (cloned.querySelector('body') || cloned).appendChild(styleTag);
+                        },
+                        undo: function () {
+                                marked.forEach(function (el) {
+                                        el.removeAttribute(GLYPH_ATTR);
+                                });
+                        },
+                        families: families
+                };
+        }
+
+        function loadIconFonts(view, families) {
+                var fonts = view && view.document && view.document.fonts;
+                if (!fonts || typeof fonts.load !== 'function' || !families || !families.length) {
+                        return Promise.resolve();
+                }
+                return Promise.all(families.map(function (family) {
+                        return fonts.load('20px ' + family).catch(function () {
+                                return null;
+                        });
+                })).then(function () {
+                        return fonts.ready;
+                }).catch(function () {
+                        return null;
+                });
+        }
+
         function renderCanvas(node, scale, bounds, view) {
                 view = view || window;
@@ -1558 +2110 @@
                 }
                 var crop = bounds && bounds.crop ? bounds.crop : null;
-                var unmark = crop ? markElements(view.document, crop) : function () {};
+                var unmarkCrop = crop ? markElements(view.document, crop) : function () {};
+                var unmarkLines = function () {};
+                try {
+                        unmarkLines = markSingleLines(view.document, crop);
+                } catch (lineError) {
+                        unmarkLines = function () {};
+                }
+                var unmark = function () {
+                        unmarkCrop();
+                        unmarkLines();
+                };
+                var pinned = { undo: function () {}, apply: function () {}, families: [] };
+                try {
+                        pinned = pinIconFonts(node);
+                } catch (pinError) {
+                        pinned = { undo: function () {}, apply: function () {}, families: [] };
+                }
                 try {
                         var options = {
@@ -1573 +2141 @@
                                 onCloneNode: function (cloned) {
                                         try {
+                                                pinned.apply(cloned);
+                                        } catch (glyphError) {
+                                                // The shot still renders; icons may show as slashes.
+                                        }
+                                        try {
                                                 prepareClone(cloned, view, crop);
                                         } catch (cloneError) {
@@ -1583 +2156 @@
                                 options.height = bounds.height;
                         }
-                        return window.modernScreenshot.domToCanvas(node, options).then(function (canvas) {
+                        var nodeView = (node.ownerDocument && node.ownerDocument.defaultView) || view;
+                        return loadIconFonts(nodeView, pinned.families).then(function () {
+                                return window.modernScreenshot.domToCanvas(node, options);
+                        }).then(function (canvas) {
+                                pinned.undo();
                                 unmark();
                                 return canvas;
                         }, function (error) {
+                                pinned.undo();
                                 unmark();
                                 throw error;
                         });
                 } catch (error) {
+                        pinned.undo();
                         unmark();
                         if (error && !error.code) {
@@ -1749 +2328 @@
                 var token = session;
 
-                function compatCapture() {
+                function compatNote(error) {
+                        var name = error && error.name ? String(error.name) : '';
+                        var message = error && error.message ? String(error.message) : '';
+                        if (name === 'NotAllowedError' || name === 'AbortError') {
+                                return tr('exactCancelled', 'Sharing was cancelled, so this shot was redrawn from the page. The next capture will ask to share the tab again.');
+                        }
+                        if (message === 'surface') {
+                                return tr('exactSurface', 'That share was not this browser tab, so this shot was redrawn from the page. The next capture will ask again.');
+                        }
+                        if (message === 'mismatch') {
+                                return tr('exactMismatch', 'The tab capture did not match this window, so this shot was redrawn from the page. The next capture will ask again.');
+                        }
+                        return tr('exactFallback', 'Pixel-perfect capture did not finish, so this shot was redrawn from the page. The next capture will ask again.');
+                }
+
+                function compatCapture(note) {
                         var work = getViewCanvas().then(function (canvas) {
                                 return cropCanvasToBlob(canvas, rect, viewShot.scale);
                         });
+                        if (note) {
+                                rect.compatNote = note;
+                        }
                         openResult(rect, work, token);
                         destroySnip();
@@ -1768 +2365 @@
                                 openResult(rect, Promise.resolve(result.blob), token);
                                 destroySnip();
-                        }).catch(function () {
+                        }).catch(function (error) {
                                 if (hideEl) {
                                         hideEl.style.visibility = '';
@@ -1776 +2373 @@
                                         return;
                                 }
-                                // Denied or unsupported: use the compatible DOM render for the rest of this page view.
-                                exact.failed = true;
+                                // One failure does not turn pixel-perfect off. The next capture asks again.
                                 stopExact();
-                                compatCapture();
-                        });
+                                compatCapture(compatNote(error));
+                        });
+                        return;
+                }
+                if (exactPref()) {
+                        compatCapture(tr('exactUnsupported', 'This browser cannot share the tab, so this shot was redrawn from the page.'));
                         return;
                 }
@@ -2116 +2716 @@
         }
 
-        // Drop originals that are no longer in the list, and the oldest ones past the size cap.
-        function recentPrune(list) {
+        // A blob can land in IndexedDB before its card is in the list. Don't delete it in that window.
+        var RECENT_GRACE_MS = 120000;
+
+        function commitRecentList(build) {
+                var next = [];
+                var pass;
+                for (pass = 0; pass < 3; pass++) {
+                        next = build(getRecentCaptures().slice());
+                        if (!Array.isArray(next)) {
+                                next = [];
+                        }
+                        if (next.length > RECENT_MAX) {
+                                next = next.slice(0, RECENT_MAX);
+                        }
+                        while (next.length) {
+                                try {
+                                        window.localStorage.setItem(RECENT_KEY, JSON.stringify(next));
+                                        break;
+                                } catch (error) {
+                                        next.pop();
+                                }
+                        }
+                        if (!next.length) {
+                                try {
+                                        window.localStorage.removeItem(RECENT_KEY);
+                                } catch (removeError) {
+                                        return [];
+                                }
+                        }
+                }
+                return getRecentCaptures();
+        }
+
+        function bitmapScale(cssWidth, pixelWidth, fallback) {
+                var css = Number(cssWidth);
+                var pixels = Number(pixelWidth);
+                if (pixels > 0 && css > 0) {
+                        var ratio = pixels / css;
+                        if (ratio >= 0.5 && ratio <= 6) {
+                                return Math.round(ratio * 100) / 100;
+                        }
+                }
+                var scale = Number(fallback);
+                if (isFinite(scale) && scale > 0) {
+                        return Math.round(scale * 100) / 100;
+                }
+                return 1;
+        }
+
+        function recentScaleOf(item) {
+                return bitmapScale(item && item.width, item && item.pixelWidth, item && item.scale);
+        }
+
+        function cleanRecentTitle(title, url) {
+                var cleanTitle = title || '';
+                if (!cleanTitle || cleanTitle.indexOf('http') === 0) {
+                        try {
+                                cleanTitle = new URL(url || window.location.href).pathname || 'Screenshot';
+                                if (cleanTitle === '/') {
+                                        cleanTitle = 'Home Page';
+                                }
+                        } catch (error) {
+                                cleanTitle = 'Screenshot';
+                        }
+                }
+                return cleanTitle;
+        }
+
+        // Drop originals that fell off the list, and the oldest ones past the size cap.
+        // Re-reads the list inside IndexedDB so a second capture is not deleted first.
+        function recentPrune() {
                 return idbRun('readwrite', function (store) {
                         var all = store.getAll();
@@ -2123 +2792 @@
                                 var byId = {};
                                 (all.result || []).forEach(function (row) {
-                                        byId[row.id] = row;
-                                });
-                                var total = 0;
-                                var keep = {};
-                                list.forEach(function (item) {
-                                        var row = byId[item.id];
-                                        if (row && total + (row.size || 0) <= RECENT_BYTES) {
-                                                total += row.size || 0;
-                                                keep[item.id] = true;
+                                        if (row && row.id) {
+                                                byId[row.id] = row;
                                         }
                                 });
+                                var list = getRecentCaptures();
+                                var now = Date.now();
+                                var total = 0;
+                                var over = false;
+                                var keep = {};
+                                var evict = {};
+                                list.forEach(function (item) {
+                                        if (!item || !item.id) {
+                                                return;
+                                        }
+                                        var row = byId[item.id];
+                                        var size = row && row.size ? row.size : (item.size || 0);
+                                        if (!over && total + size <= RECENT_BYTES) {
+                                                total += size;
+                                                keep[item.id] = true;
+                                                return;
+                                        }
+                                        over = true;
+                                        evict[item.id] = true;
+                                });
                                 Object.keys(byId).forEach(function (id) {
-                                        if (!keep[id]) {
+                                        if (keep[id]) {
+                                                return;
+                                        }
+                                        if (evict[id]) {
                                                 store.delete(id);
+                                                return;
                                         }
+                                        var row = byId[id];
+                                        if (row && row.timestamp && (now - row.timestamp) < RECENT_GRACE_MS) {
+                                                return;
+                                        }
+                                        store.delete(id);
                                 });
+                                if (over) {
+                                        commitRecentList(function (latest) {
+                                                return latest.filter(function (item) {
+                                                        return item && !evict[item.id];
+                                                });
+                                        });
+                                }
                         };
                         return all;
@@ -2200 +2898 @@
         }
 
-        function saveCaptureToRecent(blob, width, height, title, url) {
+        function saveCaptureToRecent(blob, width, height, title, url, scale) {
                 if (!blob || !width || !height) return;
                 var id = 'sf_' + Date.now() + '_' + Math.random().toString(36).substr(2, 5);
+                var storedScale = Number(scale);
+                if (!isFinite(storedScale) || storedScale <= 0) {
+                        storedScale = 1;
+                }
+                storedScale = Math.round(storedScale * 100) / 100;
+                var item = {
+                        id: id,
+                        title: cleanRecentTitle(title, url),
+                        url: url || window.location.href,
+                        width: width,
+                        height: height,
+                        scale: storedScale,
+                        timestamp: Date.now(),
+                        size: blob.size,
+                        thumb: ''
+                };
                 recentBlobs[id] = blob;
+                // The card is in the list before the thumbnail or the prune, so a second capture cannot be deleted first.
+                commitRecentList(function (list) {
+                        var next = list.filter(function (entry) {
+                                return entry && entry.id !== id;
+                        });
+                        next.unshift(item);
+                        return next;
+                });
                 idbRun('readwrite', function (store) {
-                        return store.put({ id: id, blob: blob, size: blob.size, timestamp: Date.now() });
+                        return store.put({ id: id, blob: blob, size: blob.size, timestamp: item.timestamp });
                 }).catch(function () {
                         return null;
@@ -2222 +2944 @@
                                 ctx.drawImage(img, 0, 0, thumbCanvas.width, thumbCanvas.height);
                                 var thumbData = thumbCanvas.toDataURL('image/jpeg', 0.85);
-
-                                var cleanTitle = title || '';
-                                if (!cleanTitle || cleanTitle.indexOf('http') === 0) {
-                                        try {
-                                                cleanTitle = new URL(url || window.location.href).pathname || 'Screenshot';
-                                                if (cleanTitle === '/') cleanTitle = 'Home Page';
-                                        } catch (e) {
-                                                cleanTitle = 'Screenshot';
-                                        }
-                                }
-
-                                var item = {
-                                        id: id,
-                                        title: cleanTitle,
-                                        url: url || window.location.href,
-                                        width: width,
-                                        height: height,
-                                        timestamp: Date.now(),
-                                        size: blob.size,
-                                        pixelWidth: img.naturalWidth || width,
-                                        thumb: thumbData
-                                };
-
-                                var list = getRecentCaptures();
-                                list.unshift(item);
-                                if (list.length > RECENT_MAX) list = list.slice(0, RECENT_MAX);
-                                saveRecentList(list);
-                                recentPrune(list);
+                                var pixelWidth = img.naturalWidth || width;
+                                var pixelHeight = img.naturalHeight || height;
+                                var usedScale = bitmapScale(width, pixelWidth, storedScale);
+                                commitRecentList(function (list) {
+                                        list.forEach(function (entry) {
+                                                if (!entry || entry.id !== id) {
+                                                        return;
+                                                }
+                                                entry.thumb = thumbData;
+                                                entry.pixelWidth = pixelWidth;
+                                                entry.pixelHeight = pixelHeight;
+                                                entry.scale = usedScale;
+                                                entry.height = Math.max(1, Math.round(pixelHeight / usedScale));
+                                                entry.size = blob.size;
+                                        });
+                                        // A missing card was removed or pruned. Do not put it back onto a deleted file.
+                                        return list;
+                                });
+                                showRecentThumb(id, thumbData);
+                                recentPrune();
                         } catch (err) {
                                 console.warn('Stillframe recent save error', err);
@@ -2258 +2972 @@
                 img.onerror = function () {
                         URL.revokeObjectURL(objUrl);
+                        recentPrune();
                 };
                 img.src = objUrl;
         }
 
+        function unsavedMarks() {
+                if (editor && typeof editor.hasMarks === 'function' && editor.hasMarks()) {
+                        return true;
+                }
+                if (!resultDevices) {
+                        return false;
+                }
+                var i;
+                for (i = 0; i < resultDevices.length; i++) {
+                        var marks = resultDevices[i] && resultDevices[i].marks;
+                        if (marks && marks.length) {
+                                return true;
+                        }
+                }
+                return false;
+        }
+
         function openRecentCaptureInEditor(item) {
+                if (!item) {
+                        return;
+                }
+                if (unsavedMarks()) {
+                        var proceed = window.confirm(tr('discardMarks', 'This capture has unsaved marks. Opening another screenshot will discard them. Continue?'));
+                        if (!proceed) {
+                                return;
+                        }
+                }
                 var token = ++session;
                 var rect = {
@@ -2269 +3010 @@
                         width: item.width || 1440,
                         height: item.height || 900,
-                        scale: 1,
+                        scale: recentScaleOf(item),
                         url: item.url || window.location.href,
                         fromRecent: true
@@ -2325 +3066 @@
         }
 
+        function showRecentThumb(id, thumbData) {
+                if (!id || !thumbData) {
+                        return;
+                }
+                var cards = document.querySelectorAll('.stillframe-recent-card[data-id="' + id + '"]');
+                Array.prototype.forEach.call(cards, function (card) {
+                        var wrap = card.querySelector('.stillframe-recent-thumbwrap');
+                        if (!wrap) {
+                                return;
+                        }
+                        var img = wrap.querySelector('img');
+                        if (img) {
+                                img.src = thumbData;
+                                return;
+                        }
+                        wrap.appendChild(element('img', {
+                                className: 'stillframe-recent-thumb',
+                                alt: '',
+                                src: thumbData
+                        }));
+                });
+        }
+
         function renderRecentList(container, onSelect, onAction) {
                 while (container.firstChild) {
@@ -2340 +3104 @@
                 var listWrap = element('div', { className: 'stillframe-recent-list' });
                 list.forEach(function (item) {
-                        var card = element('div', { className: 'stillframe-recent-card' });
+                        var card = element('div', { className: 'stillframe-recent-card', 'data-id': item.id || '' });
                         var thumbWrap = element('div', { className: 'stillframe-recent-thumbwrap' });
                         if (item.thumb) {
@@ -2588 +3352 @@
                 sizeGroup.appendChild(sizeSlider);
 
-                var textOptGroup = element('div', {
-                        className: 'stillframe-result__text-opts',
-                        role: 'group',
-                        'aria-label': 'Text options'
-                });
-                textOptGroup.style.display = 'none';
-
-                var fontSelect = element('select', { className: 'stillframe-prop__select', 'aria-label': 'Font family', title: 'Font family' });
-                FONT_CHOICES.forEach(function (choice) {
-                        fontSelect.appendChild(element('option', { value: choice[0], text: choice[1] }));
-                });
-                fontSelect.value = currentFont || 'sans';
-                fontSelect.addEventListener('change', function () {
-                        currentFont = fontSelect.value;
-                        if (editor && editor.setFont) {
-                                editor.setFont(currentFont);
-                        }
-                });
-                textOptGroup.appendChild(fontSelect);
-
-                var boldBtn = element('button', {
-                        type: 'button',
-                        className: 'stillframe-prop__toggle',
-                        'aria-pressed': currentBold ? 'true' : 'false',
-                        text: 'B',
-                        title: 'Bold (toggle)'
-                });
-                boldBtn.addEventListener('click', function () {
-                        currentBold = boldBtn.getAttribute('aria-pressed') !== 'true';
-                        boldBtn.setAttribute('aria-pressed', currentBold ? 'true' : 'false');
-                        if (editor && editor.setBold) {
-                                editor.setBold(currentBold);
-                        }
-                });
-                textOptGroup.appendChild(boldBtn);
-
                 var shapeOptGroup = element('div', {
                         className: 'stillframe-result__shape-opts',
@@ -2687 +3415 @@
                         if (isText) {
                                 currentSliderMode = 'text';
-                                textOptGroup.style.display = 'inline-flex';
                                 shapeOptGroup.style.display = 'none';
                                 sizeSlider.min = '12';
@@ -2698 +3425 @@
                                 sizeSlider.title = 'Text size (' + sizeSlider.value + 'px)';
                                 sizeSlider.setAttribute('aria-label', 'Text size');
-                                if (info && info.font) {
-                                        currentFont = info.font;
-                                        fontSelect.value = currentFont;
-                                }
-                                if (info && typeof info.bold === 'boolean') {
-                                        currentBold = info.bold;
-                                        boldBtn.setAttribute('aria-pressed', currentBold ? 'true' : 'false');
-                                }
                         } else if (isShape) {
                                 currentSliderMode = 'stroke';
-                                textOptGroup.style.display = 'none';
                                 shapeOptGroup.style.display = 'inline-flex';
                                 sizeSlider.min = '1';
@@ -2726 +3444 @@
                         } else {
                                 currentSliderMode = 'stroke';
-                                textOptGroup.style.display = 'none';
                                 shapeOptGroup.style.display = 'none';
                                 sizeSlider.min = '1';
@@ -2768 +3485 @@
                 var toolsWrap = element('div', { className: 'stillframe-result__editing' });
                 toolsWrap.appendChild(markGroup);
+                toolsWrap.appendChild(historyGroup);
+                toolsWrap.appendChild(shapeOptGroup);
                 toolsWrap.appendChild(colorGroup);
                 toolsWrap.appendChild(sizeGroup);
-                toolsWrap.appendChild(textOptGroup);
-                toolsWrap.appendChild(shapeOptGroup);
-                toolsWrap.appendChild(historyGroup);
 
                 var saveGroup = element('div', { className: 'stillframe-result__actions' });
@@ -2859 +3575 @@
                 var hasMulti = multiOptions && Array.isArray(multiOptions.devices) && multiOptions.devices.length > 1;
                 var devicesList = (multiOptions && multiOptions.devices) || [];
+                resultDevices = devicesList.length ? devicesList : null;
                 var currentDeviceId = multiOptions && multiOptions.activeDeviceId ? multiOptions.activeDeviceId : (devicesList[0] ? devicesList[0].id : '');
                 var currentDevice = devicesList.find(function (d) { return d.id === currentDeviceId; }) || devicesList[0] || null;
@@ -3256 +3973 @@
                                 setStatus('');
                                 flushPending();
+                                if (rect && rect.compatNote) {
+                                        setStatus(rect.compatNote);
+                                }
                                 if (captured.blob && !(rect && rect.fromRecent)) {
-                                        saveCaptureToRecent(captured.blob, captured.width, captured.height, document.title, captured.url);
+                                        saveCaptureToRecent(captured.blob, captured.width, captured.height, document.title, captured.url, captured.scale);
                                 }
                         }).catch(function (error) {
@@ -3271 +3991 @@
                                         text: error && error.code === 'library' ? text('libraryMissing') : text('captureFailed')
                                 }));
-                                setStatus('');
+                                setStatus(rect && rect.compatNote ? rect.compatNote : '');
                                 if (dialog) {
                                         dialog.setAttribute('aria-busy', 'false');
@@ -3286 +4006 @@
                                 if (dev.id === currentDeviceId) {
                                         captured.blob = blob;
+                                        captured.scale = dev.scale || captured.scale || 1;
                                         captured.width = dev.width;
                                         captured.height = dev.height;
@@ -3342 +4063 @@
 
         function openMultiDirectCapture(sourceUrl, selectedDevices, scale, hideAdminBar, isFullPage) {
+                sourceUrl = scrubCaptureUrl(sourceUrl);
                 var token = ++session;
                 var scaleVal = scale || 1;
@@ -3406 +4128 @@
                                                 dev.image = img;
                                                 dev.status = 'ready';
-                                                dev.height = Math.round(img.naturalHeight / scaleVal);
+                                                dev.scale = bitmapScale(dev.width, img.naturalWidth, scaleVal);
+                                                dev.height = Math.max(1, Math.round((img.naturalHeight || 1) / dev.scale));
                                                 controller.onDeviceReady(dev, blob, img);
-                                                saveCaptureToRecent(blob, dev.width, dev.height, document.title + ' (' + dev.label + ')', sourceUrl);
+                                                saveCaptureToRecent(blob, dev.width, dev.height, document.title + ' (' + dev.label + ')', sourceUrl, dev.scale);
                                         });
                                 }).catch(function (err) {
@@ -3563 +4286 @@
                         sel = { x: 0, y: 0, width: sizeNow.width, height: sizeNow.height };
                         showSelection(sel);
-                        scheduleShot(IDLE_BEFORE_RENDER_MS);
+                        // Start the redraw now, while the selection is on screen, so Capture
+                        // does not wait for the whole page to be built from scratch.
+                        if (!viewShot.canvas && !viewShot.work) {
+                                startViewShot().catch(function () {
+                                        return null;
+                                });
+                        }
                 });
 
@@ -3710 +4439 @@
                 var engineText = element('span', { className: 'sfd-engine__text' });
                 engineText.appendChild(element('b', { text: tr('engineTitle', 'Pixel-perfect capture') }));
-                engineText.appendChild(element('small', { text: tr('engineHelp', 'Your browser asks to share this tab, so the screenshot matches the screen exactly. Nothing is uploaded.') }));
+                engineText.appendChild(element('small', { text: tr('engineHelp', 'Area, Window, and Full screen on this tab in Chrome or Edge. The browser asks to share the tab, and nothing is uploaded. Other browsers, Direct Page, and Tools redraw the page.') }));
                 engineLabel.appendChild(engineCb);
                 engineLabel.appendChild(element('span', { className: 'stillframe-hub-toggle__track' }));
@@ -4015 +4744 @@
                 bar.appendChild(windowModeButton);
                 bar.appendChild(fullButton);
+                bar.appendChild(devWrap);
                 bar.appendChild(directWrap);
                 bar.appendChild(recentWrap);
@@ -4434 +5164 @@
 
         function captureInFrame(url, width, scale, isCancelled, options) {
+                url = scrubCaptureUrl(url);
                 options = options || {};
                 return new Promise(function (resolve, reject) {
@@ -5032 +5763 @@
                 }
                 captured = null;
+                resultDevices = null;
                 compactPanel = false;
                 resultReady = false;

stillframe/tags/0.2.5/assets/js/stillframe-tools.js

@@ -2 +2 @@
         'use strict';
 
-        var pageSelect = document.getElementById('stillframe-target-page');
-        var customUrlWrap = document.getElementById('stillframe-custom-url-wrap');
-        var customUrlInput = document.getElementById('stillframe-custom-url');
+        var pickerMount = document.getElementById('stillframe-target-page');
+        var toolsData = window.StillframeToolsData || {};
+        var pagePicker = null;
         var startBtn = document.getElementById('stillframe-start-multicapture');
 
@@ -41 +41 @@
         });
 
-        if (pageSelect) {
-                pageSelect.addEventListener('change', function () {
-                        var isCustom = pageSelect.value === '__custom__';
-                        if (customUrlWrap) {
-                                customUrlWrap.hidden = !isCustom;
-                                customUrlWrap.style.display = isCustom ? 'block' : 'none';
-                        }
-                        if (isCustom && customUrlInput) {
-                                customUrlInput.focus();
-                        }
+        if (pickerMount && window.StillframeCapture && typeof window.StillframeCapture.createPagePicker === 'function') {
+                pagePicker = window.StillframeCapture.createPagePicker({
+                        pages: toolsData.pages,
+                        homeUrl: toolsData.homeUrl || ''
                 });
+                pickerMount.appendChild(pagePicker.root);
         }
 
         function getTargetUrl() {
-                if (!pageSelect) {
-                        return '';
-                }
-                if (pageSelect.value === '__custom__') {
-                        return customUrlInput ? customUrlInput.value.trim() : '';
-                }
-                return pageSelect.value.trim();
+                return pagePicker ? pagePicker.getValue() : '';
         }
 
@@ -86 +75 @@
         // The capture opens the same pop-up editor as the top-bar capture,
         // with every chosen device ready to switch between.
+        // Tools always redraws the page in an iframe. Pixel-perfect tab capture
+        // is the admin-bar Area, Window, and Full screen control, not this screen.
+        var errorNode = null;
+
+        function showError(message) {
+                if (!errorNode) {
+                        errorNode = document.createElement('p');
+                        errorNode.className = 'stillframe-tools-error';
+                        errorNode.setAttribute('role', 'alert');
+                        errorNode.style.cssText = 'margin:8px 0 0;color:#b42318;font-size:13px;font-weight:600';
+                        if (startBtn && startBtn.parentNode) {
+                                startBtn.parentNode.insertBefore(errorNode, startBtn);
+                        }
+                }
+                errorNode.textContent = message;
+                errorNode.hidden = !message;
+        }
+
         function startCapture() {
+                showError('');
                 var url = getTargetUrl();
                 if (!url) {
-                        window.alert('Please select a target page or enter a URL to capture.');
-                        if (customUrlInput && pageSelect && pageSelect.value === '__custom__') {
-                                customUrlInput.focus();
+                        showError('Please select a target page or enter a URL to capture.');
+                        if (pagePicker) {
+                                pagePicker.focusCustom();
                         }
                         return;
@@ -98 +106 @@
                 var devices = getSelectedDevices();
                 if (!devices.length) {
-                        window.alert('Please select at least one device to capture.');
+                        showError('Please select at least one device to capture.');
                         return;
                 }
@@ -104 +112 @@
                 var engine = window.StillframeCapture || {};
                 if (typeof engine.openMultiCapture !== 'function') {
-                        window.alert('Stillframe is still loading. Please try again in a moment.');
+                        showError('Stillframe is still loading. Please try again in a moment.');
                         return;
                 }

stillframe/tags/0.2.5/includes/class-stillframe-asset-loader.php

@@ -20 +20 @@
          * @var string
          */
-        public const PAGES_TRANSIENT = 'stillframe_site_pages';
+        public const PAGES_TRANSIENT = 'stillframe_site_pages_v2';
 
         /**
          * Query arguments that must not be replayed inside the capture frame.
          *
+         * `action` is not in this list. Screens such as post.php?action=edit need it
+         * to stay on the same screen. Mutating values are removed separately.
+         *
          * @var string[]
          */
         public const STRIPPED_QUERY_ARGS = array(
-                'action',
                 '_wpnonce',
                 'nonce',
@@ -36 +38 @@
 
         /**
+         * Admin `action` values that change data when loaded with GET.
+         *
+         * Read-only values such as `edit` are kept so the capture iframe opens the
+         * screen the user was on.
+         *
+         * @var string[]
+         */
+        public const MUTATING_ACTIONS = array(
+                'trash',
+                'untrash',
+                'delete',
+                'delete-all',
+                'editpost',
+                'postajaxpost',
+                'post-quickdraft-save',
+                'deletecomment',
+                'trashcomment',
+                'untrashcomment',
+                'spamcomment',
+                'unspamcomment',
+                'approvecomment',
+                'unapprovecomment',
+                'approve',
+                'unapprove',
+                'spam',
+                'unspam',
+                'dim-comment',
+                'activate',
+                'deactivate',
+                'activate-selected',
+                'deactivate-selected',
+                'update-selected',
+                'delete-selected',
+                'enable-auto-update',
+                'disable-auto-update',
+                'error_scrape',
+                'resume',
+                'upgrade-plugin',
+                'upgrade-theme',
+                'do-plugin-upgrade',
+                'do-theme-upgrade',
+                'do-core-upgrade',
+                'do-translation-upgrade',
+                'install-plugin',
+                'install-theme',
+                'upload-plugin',
+                'upload-theme',
+                'logout',
+                'remove',
+                'deleteblog',
+                'spamblog',
+        );
+
+        /**
          * Enqueue the admin bar script and its small style, for administrators only.
          *
@@ -46 +102 @@
 
                 $style_url = false;
-                wp_register_style( 'stillframe-admin-bar', $style_url, array(), STILLFRAME_VERSION );
+                wp_register_style( 'stillframe-admin-bar', $style_url, array(), STILLFRAME_ASSET_VER );
                 wp_enqueue_style( 'stillframe-admin-bar' );
                 wp_add_inline_style( 'stillframe-admin-bar', $this->admin_bar_css() );
@@ -56 +112 @@
                         $base . 'assets/css/stillframe-capture-panel.css',
                         array(),
-                        STILLFRAME_VERSION
-                );
-
-                wp_register_script(
-                        'stillframe-annotation-editor',
-                        $base . 'assets/js/stillframe-annotation-editor.js',
-                        array(),
-                        STILLFRAME_VERSION,
-                        true
-                );
+                        STILLFRAME_ASSET_VER
+                );
+
+                /**
+                 * Filters whether the Fabric.js annotation editor is used. Return false for the legacy editor.
+                 *
+                 * @param bool $use_fabric Whether to use the Fabric.js editor.
+                 */
+                if ( apply_filters( 'stillframe_use_fabric_editor', true ) ) {
+                        wp_register_script(
+                                'stillframe-fabric',
+                                $base . 'assets/js/vendor/fabric.min.js',
+                                array(),
+                                '6.7.1',
+                                true
+                        );
+                        wp_register_script(
+                                'stillframe-annotation-editor',
+                                $base . 'assets/js/stillframe-annotation-editor-v2.js',
+                                array( 'stillframe-fabric' ),
+                                STILLFRAME_ASSET_VER,
+                                true
+                        );
+                } else {
+                        wp_register_script(
+                                'stillframe-annotation-editor',
+                                $base . 'assets/js/stillframe-annotation-editor.js',
+                                array(),
+                                STILLFRAME_ASSET_VER,
+                                true
+                        );
+                }
 
                 wp_register_script(
@@ -71 +149 @@
                         $base . 'assets/js/stillframe-capture-panel.js',
                         array( 'stillframe-annotation-editor' ),
-                        STILLFRAME_VERSION,
+                        STILLFRAME_ASSET_VER,
                         true
                 );
@@ -79 +157 @@
                         $base . 'assets/js/stillframe-admin-bar.js',
                         array(),
-                        STILLFRAME_VERSION,
+                        STILLFRAME_ASSET_VER,
                         true
                 );
@@ -86 +164 @@
                         'pluginUrl'    => $base,
                         'version'      => STILLFRAME_VERSION,
+                        'assetVer'     => STILLFRAME_ASSET_VER,
+                        'useFabric'    => apply_filters( 'stillframe_use_fabric_editor', true ),
                         'currentUrl'   => $this->current_screen_url(),
                         'presets'      => $this->device_width_presets(),
@@ -97 +177 @@
                         'maxWidth'     => 2560,
                         'homeUrl'      => home_url( '/' ),
-                        'sitePages'    => $this->site_pages(),
+                        'sitePages'    => self::site_pages(),
                         'toolsUrl'     => admin_url( 'tools.php?page=stillframe' ),
-                        'stripArgs'    => self::STRIPPED_QUERY_ARGS,
-                        'i18n'         => $this->script_strings(),
+                        'stripArgs'       => self::STRIPPED_QUERY_ARGS,
+                        'mutatingActions' => self::MUTATING_ACTIONS,
+                        'i18n'            => $this->script_strings(),
                 );
 
@@ -115 +196 @@
                                 $base . 'assets/css/stillframe-tools.css',
                                 array(),
-                                STILLFRAME_VERSION
+                                STILLFRAME_ASSET_VER
                         );
                         wp_enqueue_style( 'stillframe-tools' );
@@ -123 +204 @@
                                 $base . 'assets/js/vendor/modern-screenshot.js',
                                 array(),
-                                STILLFRAME_VERSION,
+                                STILLFRAME_ASSET_VER,
                                 true
                         );
@@ -134 +215 @@
                                 $base . 'assets/js/stillframe-tools.js',
                                 array( 'stillframe-capture-panel', 'stillframe-modern-screenshot' ),
-                                STILLFRAME_VERSION,
+                                STILLFRAME_ASSET_VER,
                                 true
                         );
@@ -145 +226 @@
                                 'mediaNonce' => wp_create_nonce( 'stillframe_save_media' ),
                                 'canUpload'  => current_user_can( 'upload_files' ),
-                                'pages'      => $this->site_pages(),
+                                'pages'      => self::site_pages(),
                         );
                         wp_add_inline_script(
@@ -164 +245 @@
 
         /**
-         * Retrieve a list of published pages and posts for quick selection.
-         *
-         * @return array<int, array{id: int, title: string, type: string, url: string}>
-         */
-        private function site_pages() {
+         * Retrieve published content from every public post type, for the page picker.
+         *
+         * Shared by the capture panel and the Tools screen.
+         *
+         * @return array<int, array{id: int, title: string, type: string, url: string, path: string, parent: string, status: string, home: bool}>
+         */
+        public static function site_pages() {
                 $cached = get_transient( self::PAGES_TRANSIENT );
                 if ( is_array( $cached ) ) {
@@ -174 +257 @@
                 }
 
-                $items = array();
+                $types = array_values( array_diff( get_post_types( array( 'public' => true ) ), array( 'attachment' ) ) );
+
+                /**
+                 * Filters the maximum number of items listed in the page picker.
+                 *
+                 * @param int $max Maximum number of items.
+                 */
+                $max = (int) apply_filters( 'stillframe_max_pages', 500 );
+                if ( $max < 1 ) {
+                        $max = 500;
+                }
+
                 $pages = get_posts(
                         array(
-                                'post_type'      => array( 'page', 'post' ),
+                                'post_type'      => $types,
                                 'post_status'    => 'publish',
-                                'posts_per_page' => 25,
-                                'orderby'        => 'title',
-                                'order'          => 'ASC',
+                                'posts_per_page' => $max,
+                                'no_found_rows'  => true,
+                                'orderby'        => array(
+                                        'type'       => 'ASC',
+                                        'menu_order' => 'ASC',
+                                        'title'      => 'ASC',
+                                ),
                         )
                 );
+
+                $home_ids = array_values(
+                        array_filter(
+                                array(
+                                        (int) get_option( 'page_on_front' ),
+                                        (int) get_option( 'page_for_posts' ),
+                                )
+                        )
+                );
+
+                foreach ( array_reverse( $home_ids ) as $home_id ) {
+                        $home_post = get_post( $home_id );
+                        if ( $home_post && 'publish' === $home_post->post_status ) {
+                                array_unshift( $pages, $home_post );
+                        }
+                }
+
+                $items = array();
+                $seen  = array();
                 foreach ( $pages as $p ) {
+                        if ( isset( $seen[ $p->ID ] ) ) {
+                                continue;
+                        }
+                        $seen[ $p->ID ] = true;
+
                         $permalink = get_permalink( $p );
-                        if ( $permalink ) {
-                                $items[] = array(
-                                        'id'    => (int) $p->ID,
-                                        'title' => $p->post_title ? $p->post_title : __( '(No title)', 'stillframe' ),
-                                        'type'  => $p->post_type,
-                                        'url'   => $permalink,
-                                );
-                        }
-                }
+                        if ( ! $permalink ) {
+                                continue;
+                        }
+
+                        $path    = wp_parse_url( $permalink, PHP_URL_PATH );
+                        $items[] = array(
+                                'id'     => (int) $p->ID,
+                                'title'  => $p->post_title ? $p->post_title : __( '(No title)', 'stillframe' ),
+                                'type'   => $p->post_type,
+                                'url'    => $permalink,
+                                'path'   => is_string( $path ) && '' !== $path ? $path : '/',
+                                'parent' => $p->post_parent ? get_the_title( $p->post_parent ) : '',
+                                'status' => $p->post_status,
+                                'home'   => in_array( (int) $p->ID, $home_ids, true ),
+                        );
+                }
+
                 set_transient( self::PAGES_TRANSIENT, $items, 12 * HOUR_IN_SECONDS );
                 return $items;
@@ -411 +541 @@
                         'recent'          => __( 'Recent', 'stillframe' ),
                         'devices'         => __( 'Devices', 'stillframe' ),
+                        'pickCurrent'           => __( 'Current screen', 'stillframe' ),
+                        'pickHome'              => __( 'Home', 'stillframe' ),
+                        'pickPages'             => __( 'Pages', 'stillframe' ),
+                        'pickPosts'             => __( 'Posts', 'stillframe' ),
+                        'pickCustomPlaceholder' => __( 'Custom URL: paste any address...', 'stillframe' ),
+                        'pickCustom'            => __( 'Custom URL', 'stillframe' ),
+                        'pickUse'               => __( 'Use', 'stillframe' ),
+                        'pickSearchPlaceholder' => __( 'Search pages or paste a URL from this site', 'stillframe' ),
+                        'pickSearch'            => __( 'Search pages', 'stillframe' ),
+                        'pickEnterUrl'          => __( 'Enter a URL below', 'stillframe' ),
+                        'pickNoMatch'           => __( 'No matching pages. Paste a full URL to use it.', 'stillframe' ),
+                        'directTitle'           => __( 'Capture a page', 'stillframe' ),
+                        'targetPage'            => __( 'Page', 'stillframe' ),
+                        'currentAdmin'          => __( 'Current Admin Screen', 'stillframe' ),
+                        'currentScreen'         => __( 'Current Screen', 'stillframe' ),
+                        'selectDevices'         => __( 'Devices', 'stillframe' ),
+                        'desktopOnly'           => __( 'Desktop Only', 'stillframe' ),
+                        'selectAll'             => __( 'Select All (3)', 'stillframe' ),
+                        'hideAdminBar'          => __( 'Hide the admin bar in the screenshot', 'stillframe' ),
+                        'resQuality'            => __( 'Quality', 'stillframe' ),
+                        'captureHeight'         => __( 'Height', 'stillframe' ),
+                        'res1'                  => __( '1x', 'stillframe' ),
+                        'res2'                  => __( '2x', 'stillframe' ),
+                        'res3'                  => __( '3x', 'stillframe' ),
+                        'res1Help'              => __( 'Same pixels as the screen. Smallest files.', 'stillframe' ),
+                        'res2Help'              => __( 'Sharp on high-density displays. Recommended.', 'stillframe' ),
+                        'res3Help'              => __( 'Maximum detail. Large files; very long pages may be reduced.', 'stillframe' ),
+                        'heightViewport'        => __( 'First screen', 'stillframe' ),
+                        'heightFull'            => __( 'Full Page', 'stillframe' ),
+                        'heightViewportHelp'    => __( 'Only the first screen (above the fold).', 'stillframe' ),
+                        'heightFullHelp'        => __( 'The entire page, top to bottom.', 'stillframe' ),
+                        'captureAll'            => __( 'Capture 3 devices', 'stillframe' ),
+                        'dev_desktop'           => __( 'Desktop', 'stillframe' ),
+                        'dev_tablet'            => __( 'iPad', 'stillframe' ),
+                        'dev_mobile'            => __( 'Mobile', 'stillframe' ),
+                        /* translators: 1: rows shown, 2: rows matched. */
+                        'pickShowing'          => __( 'Showing %1$d of %2$d. Keep typing to narrow the list.', 'stillframe' ),
+                        'pickChoose'           => __( 'Choose a page', 'stillframe' ),
+                        'captureNone'          => __( 'Capture', 'stillframe' ),
+                        'chooseDevice'         => __( 'Choose at least one device to capture.', 'stillframe' ),
+                        'pickUseUrl'           => __( 'Use this URL', 'stillframe' ),
+                        'engineTitle'          => __( 'Pixel-perfect capture', 'stillframe' ),
+                        'engineHelp'           => __( 'Area, Window, and Full screen on this tab in Chrome or Edge. The browser asks to share the tab, and nothing is uploaded. Other browsers, Direct Page, and Tools redraw the page.', 'stillframe' ),
+                        'exactUnsupported'     => __( 'This browser cannot share the tab, so this shot was redrawn from the page.', 'stillframe' ),
+                        'exactCancelled'       => __( 'Sharing was cancelled, so this shot was redrawn from the page. The next capture will ask to share the tab again.', 'stillframe' ),
+                        'exactSurface'         => __( 'That share was not this browser tab, so this shot was redrawn from the page. The next capture will ask again.', 'stillframe' ),
+                        'exactMismatch'        => __( 'The tab capture did not match this window, so this shot was redrawn from the page. The next capture will ask again.', 'stillframe' ),
+                        'exactFallback'        => __( 'Pixel-perfect capture did not finish, so this shot was redrawn from the page. The next capture will ask again.', 'stillframe' ),
+                        'discardMarks'         => __( 'This capture has unsaved marks. Opening another screenshot will discard them. Continue?', 'stillframe' ),
+                        /* translators: %d: number of devices. */
+                        'captureN'             => __( 'Capture %d devices', 'stillframe' ),
+                        /* translators: %s: device name. */
+                        'captureOne'           => __( 'Capture %s', 'stillframe' ),
                 );
         }
@@ -424 +607 @@
 
         /**
+         * Whether an admin `action` value changes data when the URL is opened.
+         *
+         * Empty and read-only values, including `edit`, are safe to keep.
+         *
+         * @param mixed $action Action value from the query string.
+         * @return bool
+         */
+        public static function action_is_mutating( $action ) {
+                if ( is_array( $action ) ) {
+                        foreach ( $action as $item ) {
+                                if ( self::action_is_mutating( $item ) ) {
+                                        return true;
+                                }
+                        }
+                        return false;
+                }
+
+                if ( ! is_string( $action ) || '' === $action ) {
+                        return false;
+                }
+
+                return in_array( strtolower( $action ), self::MUTATING_ACTIONS, true );
+        }
+
+        /**
+         * Remove nonces and state-changing actions from a capture URL.
+         *
+         * @param string $url Absolute or root-relative URL.
+         * @return string
+         */
+        public static function scrub_capture_url( $url ) {
+                $clean  = remove_query_arg( self::STRIPPED_QUERY_ARGS, $url );
+                $action = null;
+                $parts  = wp_parse_url( $clean );
+
+                if ( is_array( $parts ) && isset( $parts['query'] ) && is_string( $parts['query'] ) ) {
+                        $query = array();
+                        parse_str( $parts['query'], $query );
+                        if ( isset( $query['action'] ) ) {
+                                $action = $query['action'];
+                        }
+                }
+
+                if ( self::action_is_mutating( $action ) ) {
+                        $clean = remove_query_arg( 'action', $clean );
+                }
+
+                return $clean;
+        }
+
+        /**
          * URL of the screen being viewed, safe to load with a same-origin GET.
          *
-         * The host comes from home_url(). Query arguments that can replay a
-         * state-changing request are removed before the value ever reaches JavaScript.
+         * The host comes from home_url(). Nonces and state-changing actions are
+         * removed before the value ever reaches JavaScript. Read-only actions such
+         * as edit stay, so post.php?action=edit reloads the editor.
          *
          * @return string
@@ -434 +669 @@
                 $target = $this->request_path_and_query();
                 $origin = $this->home_origin();
-                $url    = remove_query_arg( self::STRIPPED_QUERY_ARGS, $origin . $target );
+                $url    = self::scrub_capture_url( $origin . $target );
                 $clean  = esc_url_raw( $url );
 

stillframe/tags/0.2.5/includes/class-stillframe-media.php

@@ -11 +11 @@
 
 /**
- * Accepts one PNG from an administrator and stores it as an attachment.
+ * Accepts one PNG, JPEG or WebP image from an administrator and stores it as an attachment.
  */
 class Stillframe_Media {
@@ -25 +25 @@
 
         /**
-         * Store the uploaded PNG and return its attachment URL.
+         * Store the uploaded image and return its attachment URL.
          *
          * @return void
@@ -66 +66 @@
                 }
 
-                $name = $this->png_filename( wp_unslash( $file['name'] ) );
+                $name = $this->image_filename( wp_unslash( $file['name'] ) );
 
                 require_once ABSPATH . 'wp-admin/includes/file.php';
@@ -76 +76 @@
                         $name,
                         array(
-                                'png' => 'image/png',
+                                'png'      => 'image/png',
+                                'jpg|jpeg' => 'image/jpeg',
+                                'webp'     => 'image/webp',
                         )
                 );
 
-                if ( empty( $checked['ext'] ) || 'png' !== $checked['ext'] || 'image/png' !== $checked['type'] ) {
+                if ( empty( $checked['ext'] ) || empty( $checked['type'] ) || ! in_array( $checked['type'], array( 'image/png', 'image/jpeg', 'image/webp' ), true ) ) {
                         $this->fail();
                 }
@@ -91 +93 @@
                                 'test_form' => false,
                                 'mimes'     => array(
-                                        'png' => 'image/png',
+                                        'png'      => 'image/png',
+                                        'jpg|jpeg' => 'image/jpeg',
+                                        'webp'     => 'image/webp',
                                 ),
                         )
@@ -104 +108 @@
                 $attachment_id = wp_insert_attachment(
                         array(
-                                'post_mime_type' => 'image/png',
+                                'post_mime_type' => $checked['type'],
                                 'post_title'     => sanitize_text_field( pathinfo( $name, PATHINFO_FILENAME ) ),
                                 'post_content'   => '',
@@ -141 +145 @@
 
         /**
-         * Keep a safe PNG filename, or fall back to a generated one.
+         * Keep a safe image filename, or fall back to a generated one.
          *
          * @param mixed $raw Original upload name.
          * @return string
          */
-        private function png_filename( $raw ) {
+        private function image_filename( $raw ) {
                 $name = is_string( $raw ) ? sanitize_file_name( $raw ) : '';
                 $name = strtolower( $name );
 
-                if ( ! preg_match( '/^[a-z0-9][a-z0-9._-]*\.png$/', $name ) ) {
+                if ( ! preg_match( '/^[a-z0-9][a-z0-9._-]*\.(png|jpe?g|webp)$/', $name ) ) {
                         $name = 'stillframe-' . gmdate( 'Ymd-His' ) . '.png';
                 }

stillframe/tags/0.2.5/includes/class-stillframe-plugin.php

@@ -66 +66 @@
                 add_action( 'save_post', array( 'Stillframe_Asset_Loader', 'flush_pages_cache' ) );
                 add_action( 'deleted_post', array( 'Stillframe_Asset_Loader', 'flush_pages_cache' ) );
+                add_action( 'trashed_post', array( 'Stillframe_Asset_Loader', 'flush_pages_cache' ) );
+                add_action( 'transition_post_status', array( 'Stillframe_Asset_Loader', 'flush_pages_cache' ) );
         }
 }

stillframe/tags/0.2.5/includes/class-stillframe-tools-page.php

@@ -49 +49 @@
                 }
 
-                $home_url   = home_url( '/' );
-                $site_pages = get_posts(
-                        array(
-                                'post_type'      => array( 'page', 'post' ),
-                                'post_status'    => 'publish',
-                                'posts_per_page' => 30,
-                                'orderby'        => 'title',
-                                'order'          => 'ASC',
-                        )
-                );
                 ?>
                 <div class="wrap stillframe-tools-wrap">
@@ -72 +62 @@
                                         <div class="stillframe-field-group">
                                                 <div class="stillframe-field-group__header">
-                                                        <label class="stillframe-field-group__title" for="stillframe-target-page"><?php esc_html_e( 'Target Page', 'stillframe' ); ?></label>
+                                                        <span class="stillframe-field-group__title"><?php esc_html_e( 'Target Page', 'stillframe' ); ?></span>
                                                         <span class="stillframe-field-group__hint"><?php esc_html_e( 'Select a site page or enter a custom URL to capture.', 'stillframe' ); ?></span>
                                                 </div>
                                                 <div class="stillframe-page-picker">
-                                                        <select id="stillframe-target-page" class="stillframe-select">
-                                                                <option value="<?php echo esc_url( $home_url ); ?>">
-                                                                        <?php echo esc_html__( 'Home Page', 'stillframe' ) . ' (' . esc_html( $home_url ) . ')'; ?>
-                                                                </option>
-                                                                <?php foreach ( $site_pages as $page ) : ?>
-                                                                        <?php
-                                                                        $page_url = get_permalink( $page );
-                                                                        if ( ! $page_url || $page_url === $home_url ) {
-                                                                                continue;
-                                                                        }
-                                                                        $title = $page->post_title ? $page->post_title : __( '(No title)', 'stillframe' );
-                                                                        ?>
-                                                                        <option value="<?php echo esc_url( $page_url ); ?>">
-                                                                                <?php echo esc_html( $title . ' (' . ucfirst( $page->post_type ) . ')' ); ?>
-                                                                        </option>
-                                                                <?php endforeach; ?>
-                                                                <option value="__custom__"><?php esc_html_e( 'Custom URL...', 'stillframe' ); ?></option>
-                                                        </select>
-                                                        <div id="stillframe-custom-url-wrap" class="stillframe-custom-url-wrap" hidden style="display: none;">
-                                                                <input type="url" id="stillframe-custom-url" class="stillframe-input" placeholder="https://example.com/" />
-                                                        </div>
+                                                        <div id="stillframe-target-page"></div>
                                                 </div>
                                         </div>
@@ -174 +144 @@
                                                 <div class="stillframe-field-group__header">
                                                         <span class="stillframe-field-group__title"><?php esc_html_e( 'Capture Preferences', 'stillframe' ); ?></span>
-                                                        <span class="stillframe-field-group__hint"><?php esc_html_e( 'Configure resolution quality and display settings.', 'stillframe' ); ?></span>
+                                                        <span class="stillframe-field-group__hint"><?php esc_html_e( 'These shots redraw the page. Pixel-perfect capture is Area, Window, and Full screen from the admin bar.', 'stillframe' ); ?></span>
                                                 </div>
                                                 <div class="stillframe-settings-grid">

stillframe/tags/0.2.5/languages/stillframe.pot

@@ -1 @@
-# Copyright (C) 2026 Stillframe
+# Copyright (C) 2026 Grafucci
 # This file is distributed under the GPL-2.0-or-later.
 msgid ""
 msgstr ""
-"Project-Id-Version: Stillframe 0.2.0\n"
-"Report-Msgid-Bugs-To: \n"
+"Project-Id-Version: Stillframe – Screenshot Capture & Markup 0.2.5\n"
+"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/stillframe\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -10 +10 @@
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2026-09-29T08:26:04+00:00\n"
+"POT-Creation-Date: 2026-10-09T14:33:09+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.12.0\n"
 "X-Domain: stillframe\n"
- 
+
 #. Plugin Name of the plugin
 #: stillframe.php
-#: includes/class-stillframe-admin-bar-menu.php:32
-msgid "Stillframe"
+msgid "Stillframe – Screenshot Capture & Markup"
+msgstr ""
+
+#. Plugin URI of the plugin
+#: stillframe.php
+msgid "https://grafucci.com/stillframe/"
 msgstr ""
 
 #. Description of the plugin
 #: stillframe.php
-msgid "Capture a plugin screen, a theme, or any page at phone, tablet, or a custom width, mark it up, and download a PNG."
+msgid "Capture multi-device screenshots (Desktop, Tablet, Mobile) or custom regions, mark them up with rich annotation tools, and export to PNG or Media Library."
 msgstr ""
 
@@ -31 +35 @@
 msgstr ""
 
+#. Author URI of the plugin
+#: stillframe.php
+msgid "https://grafucci.com/"
+msgstr ""
+
+#: includes/class-stillframe-admin-bar-menu.php:32
 #: includes/class-stillframe-admin-bar-menu.php:36
-#: includes/class-stillframe-asset-loader.php:233
+#: includes/class-stillframe-asset-loader.php:487
 msgid "Capture this screen"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:125
-#: includes/class-stillframe-asset-loader.php:185
+#: includes/class-stillframe-asset-loader.php:317
+msgid "(No title)"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:379
+#: includes/class-stillframe-asset-loader.php:439
 msgid "Phone"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:130
-#: includes/class-stillframe-asset-loader.php:190
+#: includes/class-stillframe-asset-loader.php:384
+#: includes/class-stillframe-asset-loader.php:444
+#: includes/class-stillframe-asset-loader.php:576
 msgid "iPad"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:135
-#: includes/class-stillframe-asset-loader.php:195
+#: includes/class-stillframe-asset-loader.php:389
+#: includes/class-stillframe-asset-loader.php:449
+#: includes/class-stillframe-asset-loader.php:575
+#: includes/class-stillframe-tools-page.php:95
 msgid "Desktop"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:213
+#: includes/class-stillframe-asset-loader.php:467
+#: includes/class-stillframe-asset-loader.php:564
 msgid "1x"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:217
+#: includes/class-stillframe-asset-loader.php:471
+#: includes/class-stillframe-asset-loader.php:565
 msgid "2x"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:221
+#: includes/class-stillframe-asset-loader.php:475
+#: includes/class-stillframe-asset-loader.php:566
 msgid "3x"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:234
+#: includes/class-stillframe-asset-loader.php:488
 msgid "Close"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:235
+#: includes/class-stillframe-asset-loader.php:489
+msgid "This screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:490
 msgid "Width"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:236
+#: includes/class-stillframe-asset-loader.php:491
 msgid "Custom"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:237
+#: includes/class-stillframe-asset-loader.php:492
 msgid "Custom width"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:238
+#: includes/class-stillframe-asset-loader.php:493
 msgid "Export scale"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:239
+#: includes/class-stillframe-asset-loader.php:494
+#: includes/class-stillframe-asset-loader.php:581
 msgid "Capture"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:240
+#: includes/class-stillframe-asset-loader.php:495
 msgid "Capture current window"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:241
-msgid "Download PNG"
-msgstr ""
-
-#: includes/class-stillframe-asset-loader.php:242
+#: includes/class-stillframe-asset-loader.php:496
+msgid "Reloading this page at the chosen width."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:497
+msgid "Download"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:498
+msgid "Save to Media"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:499
+msgid "Saving to the Media Library."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:500
+msgid "Saved to Media"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:501
+msgid "View in Media"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:502
+#: includes/class-stillframe-media.php:171
+msgid "The media save failed. The page was not changed."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:503
 msgid "Pen"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:243
+#: includes/class-stillframe-asset-loader.php:504
 msgid "Circle"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:244
+#: includes/class-stillframe-asset-loader.php:505
 msgid "Arrow"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:245
+#: includes/class-stillframe-asset-loader.php:506
 msgid "Undo"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:246
+#: includes/class-stillframe-asset-loader.php:507
 msgid "Clear"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:247
+#: includes/class-stillframe-asset-loader.php:508
 msgid "Annotation tools"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:248
+#: includes/class-stillframe-asset-loader.php:509
 msgid "Captured screen"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:249
+#: includes/class-stillframe-asset-loader.php:510
 msgid "Stillframe capture frame"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:250
+#: includes/class-stillframe-asset-loader.php:511
 msgid "Capturing this screen."
 msgstr ""
 
 #. translators: 1: width in CSS pixels, 2: export scale.
-#: includes/class-stillframe-asset-loader.php:252
+#: includes/class-stillframe-asset-loader.php:513
 #, php-format
 msgid "Captured at %1$d pixels wide and %2$dx. Draw on the picture, then download the PNG."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:253
+#: includes/class-stillframe-asset-loader.php:514
 msgid "Preparing the PNG."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:254
+#: includes/class-stillframe-asset-loader.php:515
 msgid "Stillframe could not load the capture tools. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:255
+#: includes/class-stillframe-asset-loader.php:516
 msgid "The capture failed. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:256
+#: includes/class-stillframe-asset-loader.php:517
 msgid "The capture timed out. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:257
+#: includes/class-stillframe-asset-loader.php:518
 msgid "The frame was blocked, so only the current window can be captured. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:258
+#: includes/class-stillframe-asset-loader.php:519
 msgid "Enter a whole number from 320 to 2560. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:259
+#: includes/class-stillframe-asset-loader.php:520
 msgid "The download failed. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:260
+#: includes/class-stillframe-asset-loader.php:521
 msgid "The capture tool did not load. The page was not changed."
 msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:522
+msgid "Drag to select an area"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:523
+msgid "Click a section of the page to capture it"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:524
+msgid "Area"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:525
+msgid "Window"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:526
+msgid "Full screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:527
+msgid "Capturing…"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:528
+msgid "Almost there. This will finish as soon as the capture is ready."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:529
+msgid "Downloaded."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:530
+msgid "Color"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:531
+msgid "Line thickness"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:532
+msgid "Top bar"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:533
+msgid "Side menu"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:534
+msgid "Hide other plugins"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:535
+msgid "Admin notices"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:536
+msgid "Cancel"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:537
+msgid "More"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:538
+msgid "Include the top bar"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:539
+msgid "Include the side menu"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:540
+msgid "Direct Page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:541
+msgid "Recent"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:542
+#: includes/class-stillframe-asset-loader.php:558
+msgid "Devices"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:543
+msgid "Current screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:544
+msgid "Home"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:545
+msgid "Pages"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:546
+msgid "Posts"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:547
+msgid "Custom URL: paste any address..."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:548
+msgid "Custom URL"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:549
+msgid "Use"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:550
+msgid "Search pages or paste a URL from this site"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:551
+msgid "Search pages"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:552
+msgid "Enter a URL below"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:553
+msgid "No matching pages. Paste a full URL to use it."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:554
+msgid "Capture a page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:555
+msgid "Page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:556
+msgid "Current Admin Screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:557
+msgid "Current Screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:559
+msgid "Desktop Only"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:560
+msgid "Select All (3)"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:561
+msgid "Hide the admin bar in the screenshot"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:562
+msgid "Quality"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:563
+msgid "Height"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:567
+msgid "Same pixels as the screen. Smallest files."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:568
+msgid "Sharp on high-density displays. Recommended."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:569
+msgid "Maximum detail. Large files; very long pages may be reduced."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:570
+msgid "First screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:571
+msgid "Full Page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:572
+msgid "Only the first screen (above the fold)."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:573
+msgid "The entire page, top to bottom."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:574
+msgid "Capture 3 devices"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:577
+msgid "Mobile"
+msgstr ""
+
+#. translators: 1: rows shown, 2: rows matched.
+#: includes/class-stillframe-asset-loader.php:579
+#, php-format
+msgid "Showing %1$d of %2$d. Keep typing to narrow the list."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:580
+msgid "Choose a page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:582
+msgid "Choose at least one device to capture."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:583
+msgid "Use this URL"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:584
+msgid "Pixel-perfect capture"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:585
+msgid "Area, Window, and Full screen on this tab in Chrome or Edge. The browser asks to share the tab, and nothing is uploaded. Other browsers, Direct Page, and Tools redraw the page."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:586
+msgid "This browser cannot share the tab, so this shot was redrawn from the page."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:587
+msgid "Sharing was cancelled, so this shot was redrawn from the page. The next capture will ask to share the tab again."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:588
+msgid "That share was not this browser tab, so this shot was redrawn from the page. The next capture will ask again."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:589
+msgid "The tab capture did not match this window, so this shot was redrawn from the page. The next capture will ask again."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:590
+msgid "Pixel-perfect capture did not finish, so this shot was redrawn from the page. The next capture will ask again."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:591
+msgid "This capture has unsaved marks. Opening another screenshot will discard them. Continue?"
+msgstr ""
+
+#. translators: %d: number of devices.
+#: includes/class-stillframe-asset-loader.php:593
+#, php-format
+msgid "Capture %d devices"
+msgstr ""
+
+#. translators: %s: device name.
+#: includes/class-stillframe-asset-loader.php:595
+#, php-format
+msgid "Capture %s"
+msgstr ""
+
+#: includes/class-stillframe-media.php:35
+msgid "You cannot save this capture."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:33
+#: includes/class-stillframe-tools-page.php:34
+#: includes/class-stillframe-tools-page.php:53
+#: includes/class-stillframe-tools-page.php:57
+msgid "Stillframe"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:48
+msgid "You cannot capture this screen."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:64
+msgid "Target Page"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:65
+msgid "Select a site page or enter a custom URL to capture."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:75
+msgid "Device Viewports"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:76
+msgid "Select viewports to capture simultaneously."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:115
+msgid "iPad / Tablet"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:135
+msgid "Mobile Phone"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:145
+msgid "Capture Preferences"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:146
+msgid "These shots redraw the page. Pixel-perfect capture is Area, Window, and Full screen from the admin bar."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:151
+msgid "Resolution Quality"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:170
+msgid "Capture Height"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:185
+msgid "Clean Presentation"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:189
+msgid "Hide WordPress Admin Bar"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:202
+msgid "Capture Selected Devices"
+msgstr ""

stillframe/tags/0.2.5/readme.txt

@@ -4 +4 @@
 Requires at least: 6.4
 Tested up to: 7.1
-Stable tag: 0.2.0
+Stable tag: 0.2.5
 Requires PHP: 7.4
 License: GPL-2.0-or-later
@@ -58 +58 @@
 == Screenshots ==
 
-1. Clean floating capture toolbar with Area selection mode and tooltip on the WordPress dashboard.
-2. Window & element capture mode with live pixel dimensions and instant capture button.
-3. Devices dropdown: frame and capture standard Desktop (1440px), iPad (834px), and Mobile (390px) viewports on screen.
-4. Direct Page capture dropdown: choose target pages, select viewports, toggle clean presentation mode, and select Retina resolution.
-5. Annotation Editor Suite: full canvas markup tools including shapes, arrows, text, numbered steps, blur redaction, and instant export.
+1. Clean floating capture toolbar with Area selection and the drag hint on the WordPress dashboard.
+2. Window capture: hover any section, see its size, then capture it.
+3. Window mode device bar: frame Desktop (1440px), iPad (834px), or Mobile (390px) on screen.
+4. Direct Page: pick a page, choose devices, set quality and height, hide the admin bar, and capture.
+5. Annotation editor: shapes, arrows, text, numbered steps, blur, and download or save to the Media Library.
 
 == Frequently Asked Questions ==
@@ -86 +86 @@
 Stillframe bundles modern-screenshot 4.7.0 (MIT license) as assets/js/vendor/modern-screenshot.js. Source: https://github.com/qq15725/modern-screenshot. The license text is in assets/js/vendor/LICENSE-modern-screenshot.txt.
 
+Stillframe also bundles Fabric.js 6.7.1 (MIT license) as assets/js/vendor/fabric.min.js. Source: https://github.com/fabricjs/fabric.js (npm package "fabric"). The license text is in assets/js/vendor/LICENSE-fabric.txt.
+
 == Changelog ==
+
+= 0.2.5 =
+* fix the editor failing to open a capture when no text size was set
+* keep the current admin screen when capturing it, including the post editor, and still drop links that would delete or change data
+* ask before another screenshot replaces one that still has unsaved marks
+* keep one-line rows, such as pagination and the admin bar, on a single line in redrawn screenshots
+* load dashboard icons before a redraw so they stay visible in the screenshot
+* change text boxes so the side handles set the line width, the corners scale the letters, and the height follows the text
+* shrink selection handles on small marks so they no longer cover the shape
+* let marks and their handles sit in the grey area around the picture without being cut off
+* show Desktop, iPad, and Mobile on a solid bar under the capture toolbar in Window mode
+* wait until the pointer is idle before redrawing the page, so selecting and drawing stay responsive
+* start a full-screen redraw as soon as the area is selected, so Capture does not wait for the page to be built
+* load the annotation editor from the admin bar using the current file version, so an update is not served from an old cached copy
+* explain that pixel-perfect capture is Area, Window, and Full screen in Chrome or Edge, and that Direct Page and Tools redraw the page
+* say when tab sharing is cancelled or does not match this window, then redraw the page instead
+
+= 0.2.1 =
+* Text marks stretch freely: the corner handles scale the text evenly, the side handles stretch it wider or narrower, and the top and bottom handles make it taller or shorter. The Size control keeps showing the real letter height.
+* Marks can now be dragged and resized out over the grey area around the picture. The part outside the picture is shown faded, and only the picture itself is saved.
+* Every handle of a mark stays visible and reachable: a mark can no longer be pushed or resized past the edge of the working area.
+* Smaller, lighter transform handles and a closer rotate knob on every mark; a thinner white outline on large text.
+* Device frame: Desktop, iPad and Mobile frames keep their proportions on small screens, no longer sit under the top bar, and the device buttons stay available so the size can be switched after framing.
+* The device buttons in Window mode now hang directly under the top bar, centred on it.
+* Scripts and styles are versioned by file date, so an updated plugin never serves a stale cached copy.
 
 = 0.2.0 =

stillframe/tags/0.2.5/stillframe.php

@@ -4 +4 @@
  * Plugin URI: https://grafucci.com/stillframe/
  * Description: Capture multi-device screenshots (Desktop, Tablet, Mobile) or custom regions, mark them up with rich annotation tools, and export to PNG or Media Library.
- * Version: 0.2.0
+ * Version: 0.2.5
  * Requires at least: 6.4
  * Requires PHP: 7.4
@@ -21 +21 @@
 }
 
-define( 'STILLFRAME_VERSION', '0.2.0' );
+define( 'STILLFRAME_VERSION', '0.2.5' );
 define( 'STILLFRAME_FILE', __FILE__ );
 define( 'STILLFRAME_DIR', plugin_dir_path( __FILE__ ) );
+// Asset query string follows the newest file, so updated scripts and styles are never served from a stale browser cache.
+define( 'STILLFRAME_ASSET_VER', STILLFRAME_VERSION . '.' . max( (int) filemtime( STILLFRAME_DIR . 'assets/js/stillframe-capture-panel.js' ), (int) filemtime( STILLFRAME_DIR . 'assets/js/stillframe-annotation-editor-v2.js' ), (int) filemtime( STILLFRAME_DIR . 'assets/js/stillframe-annotation-editor.js' ), (int) filemtime( STILLFRAME_DIR . 'assets/js/stillframe-admin-bar.js' ), (int) filemtime( STILLFRAME_DIR . 'assets/css/stillframe-capture-panel.css' ) ) );
 
 require_once STILLFRAME_DIR . 'includes/class-stillframe-capability-check.php';

stillframe/tags/0.2.5/uninstall.php

@@ -19 +19 @@
 
 delete_transient( 'stillframe_site_pages' );
+delete_transient( 'stillframe_site_pages_v2' );

stillframe/trunk/assets/css/stillframe-capture-panel.css

@@ -1595 +1595 @@
         align-items: center;
         gap: 10px;
-        width: max-content;
-        max-width: calc(100% - 32px);
+        width: fit-content;
+        max-width: min(520px, calc(100% - 32px));
+        white-space: normal;
         margin: 0 auto;
         padding: 8px 14px;
@@ -1717 +1718 @@
 }
 
-/* Neutral accents ------------------------------------------------------- */
-/* The brand colour is reserved for primary buttons (Capture, Download, Save).
-   Selected and active states use plain greys so nothing else competes. */
+/* Brand accents --------------------------------------------------------- */
+/* Selected and active states use the Stillframe petrol colour. */
 
 .stillframe-snip,
 .stillframe-result {
-        --sf-ink: #1f2937;
-        --sf-pick-bg: #f3f4f6;
-        --sf-pick-line: #9ca3af;
+        --sf-ink: #005976;
+        --sf-pick-bg: #e6f4f8;
+        --sf-pick-line: #7fb9cc;
 }
 
@@ -1851 +1851 @@
 .stillframe-snip,
 .stillframe-result {
-        --sf-pick-line: #6b7280;
+        --sf-pick-line: #7fb9cc;
         --sf-edge: #b4bac4;
 }
@@ -2070 +2070 @@
 }
 .stillframe-snip__bar .stillframe-hub-sec { margin-bottom: 0; }
-.stillframe-snip__direct-menu { width: 480px; padding: 12px; gap: 8px; }
+.stillframe-snip__direct-menu { width: 480px; min-width: 360px; padding: 12px; gap: 8px; max-height: min(80vh, 640px); overflow-y: auto; }
+.stillframe-snip__recent-menu { max-height: min(80vh, 640px); overflow-y: auto; }
+
+.stillframe-hub-help {
+        font-size: 11.5px;
+        line-height: 1.4;
+        color: var(--sf-muted, #6b7280);
+}
+
+/* Recent screenshots: two-column card grid */
+.stillframe-snip__recent-menu {
+        width: 520px;
+}
+
+.stillframe-snip .stillframe-recent-list {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 10px;
+        max-height: none;
+        overflow: visible;
+}
+
+.stillframe-snip .stillframe-recent-card {
+        flex-direction: column;
+        gap: 8px;
+        padding: 8px;
+        background: var(--sf-surface);
+        border: 1px solid var(--sf-line);
+        border-radius: 10px;
+}
+
+.stillframe-snip .stillframe-recent-card:last-child {
+        border-bottom: 1px solid var(--sf-line);
+}
+
+.stillframe-snip .stillframe-recent-card:hover {
+        background: var(--sf-brand-muted);
+        border-color: var(--sf-brand);
+}
+
+.stillframe-snip .stillframe-recent-thumbwrap {
+        flex: 0 0 auto;
+        width: 100%;
+        height: auto;
+        aspect-ratio: 16 / 10;
+}
+
+.stillframe-snip .stillframe-recent-info {
+        gap: 4px;
+}
+
+.stillframe-snip .stillframe-recent-actions {
+        margin-top: 2px;
+}
+
+@media (max-width: 560px) {
+        .stillframe-snip .stillframe-recent-list {
+                grid-template-columns: minmax(0, 1fr);
+        }
+}
+
+.stillframe-result .stillframe-format-select {
+        height: 36px;
+        margin: 0 4px 0 0;
+        padding: 0 24px 0 10px;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151);
+        background-color: var(--sf-surface, #ffffff);
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 8px;
+        box-shadow: none;
+        cursor: pointer;
+}
+
+.stillframe-result .stillframe-format-select:hover,
+.stillframe-result .stillframe-format-select:focus {
+        color: var(--sf-brand, #005976);
+        border-color: var(--sf-brand, #005976);
+        outline: none;
+}
+
+/* Device preview frames */
+.stillframe-dev-card__frame {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 8px;
+        background: var(--sf-well);
+        border: 1.5px solid var(--sf-line-strong);
+        border-radius: 5px;
+        box-sizing: border-box;
+        color: var(--sf-muted);
+}
+
+.stillframe-dev-card.is-selected .stillframe-dev-card__frame {
+        background: var(--sf-surface);
+        border-color: var(--sf-brand);
+        color: var(--sf-brand);
+}
+
+.stillframe-dev-card__frame .stillframe-dev-card__icon {
+        margin: 0;
+        color: inherit;
+}
+
+.stillframe-hub-size {
+        font-size: 11.5px;
+        line-height: 1.4;
+        color: var(--sf-text-2);
+}
+
+/* Sticky capture button */
+.stillframe-hub-footer {
+        position: sticky;
+        bottom: -12px;
+        z-index: 2;
+        margin: 4px -12px -12px;
+        padding: 10px 12px 12px;
+        background: var(--sf-surface);
+        border-top: 1px solid var(--sf-line);
+        border-radius: 0 0 10px 10px;
+}
+
+@media (max-width: 560px) {
+        .stillframe-snip__direct-menu {
+                width: calc(100vw - 24px);
+                min-width: 0;
+        }
+}
+
+/* Fabric annotation layer sits exactly over the captured image */
+.stillframe-result .stillframe-annotation-wrapper {
+        z-index: 2;
+}
+
+.stillframe-result .stillframe-annotation-wrapper canvas {
+        touch-action: none;
+}
+
+/* ==========================================================================
+   Stillframe interface layer
+   Flat, compact controls in the Stillframe petrol colour. These rules sit last
+   and use !important on colours so a site theme's button styles cannot recolour them.
+   ========================================================================== */
+
+.stillframe-snip,
+.stillframe-result {
+        --sf-brand: #005976;
+        --sf-brand-hover: #004a61;
+        --sf-brand-muted: #f1f6f8;
+        --sf-brand-border: #c3d3da;
+}
+
+.stillframe-snip button,
+.stillframe-result button,
+.sfp button {
+        appearance: none;
+        margin: 0;
+        font-family: inherit;
+        letter-spacing: normal;
+        text-transform: none;
+        text-shadow: none;
+}
+
+/* ---- Top selection bar ---- */
+.stillframe-snip .stillframe-snip__bar button {
+        height: 32px;
+        gap: 6px;
+        padding: 0 10px;
+        font-size: 12.5px;
+        font-weight: 600;
+        border-radius: 6px;
+}
+
+.stillframe-snip .stillframe-snip__bar svg {
+        width: 16px;
+        height: 16px;
+}
+
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__chevron {
+        width: 10px;
+        height: 10px;
+}
+
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__mode:hover,
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__close:hover {
+        color: var(--sf-brand) !important;
+        background: #f3f5f6 !important;
+}
+
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__mode[aria-pressed="true"],
+.stillframe-snip.has-menu-open .stillframe-snip__bar .stillframe-snip__mode[aria-expanded="true"] {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+.stillframe-snip .stillframe-snip__go,
+.stillframe-snip .stillframe-snip__go:focus {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border: 0 !important;
+        box-shadow: none !important;
+}
+
+.stillframe-snip .stillframe-snip__go:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand-hover) !important;
+}
+
+/* ---- Menus that open from the bar ---- */
+.stillframe-snip .stillframe-snip__direct-menu {
+        width: 400px;
+        max-width: calc(100vw - 24px);
+        padding: 12px 14px 14px;
+        gap: 10px;
+        max-height: none;
+        overflow: visible;
+}
+
+@media (max-height: 640px) {
+        .stillframe-snip .stillframe-snip__direct-menu {
+                max-height: calc(100vh - 110px);
+                overflow-y: auto;
+        }
+}
+
+.stillframe-snip .stillframe-hub-sec-title {
+        margin: 0;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--sf-muted);
+}
+
+.sfd-row {
+        display: grid;
+        grid-template-columns: 64px minmax(0, 1fr);
+        align-items: center;
+        gap: 8px;
+}
+
+.sfd-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151);
+}
+
+.sfd-chips {
+        display: flex;
+        gap: 6px;
+        min-width: 0;
+}
+
+.stillframe-snip .sfd-chip {
+        flex: 1 1 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        min-width: 0;
+        height: 30px;
+        padding: 0 6px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+        cursor: pointer;
+}
+
+.stillframe-snip .sfd-chip em {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 11px;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-snip .sfd-chip:hover {
+        color: var(--sf-brand) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+.stillframe-snip .sfd-chip.is-selected {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-snip .sfd-chip.is-selected em {
+        color: var(--sf-brand);
+}
+
+.sfd-seg {
+        display: inline-flex;
+        width: fit-content;
+        overflow: hidden;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 6px;
+}
+
+.stillframe-snip .sfd-seg__btn {
+        height: 28px;
+        padding: 0 14px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 0 !important;
+        border-right: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 0;
+        box-shadow: none !important;
+        cursor: pointer;
+}
+
+.stillframe-snip .sfd-seg__btn:last-child {
+        border-right: 0 !important;
+}
+
+.stillframe-snip .sfd-seg__btn:hover {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+}
+
+.stillframe-snip .sfd-seg__btn.is-active,
+.stillframe-snip .sfd-seg__btn.is-active:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+}
+
+.sfd-help {
+        margin: -4px 0 0;
+        padding-left: 72px;
+        font-size: 11.5px;
+        line-height: 1.4;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-snip .stillframe-hub-toggle {
+        gap: 8px;
+        font-size: 12.5px;
+        color: var(--sf-text-2, #374151);
+}
+
+.stillframe-snip .stillframe-hub-toggle__track {
+        width: 30px;
+        height: 17px;
+        background: #cbd5e1;
+}
+
+.stillframe-snip .stillframe-hub-toggle__track::before {
+        top: 2px;
+        left: 2px;
+        width: 13px;
+        height: 13px;
+}
+
+.stillframe-snip .stillframe-hub-toggle__input:checked + .stillframe-hub-toggle__track {
+        background: var(--sf-brand) !important;
+}
+
+.stillframe-snip .stillframe-hub-toggle__input:checked + .stillframe-hub-toggle__track::before {
+        transform: translateX(13px);
+}
+
+.stillframe-snip .stillframe-hub-toggle__input:focus-visible + .stillframe-hub-toggle__track {
+        outline: 2px solid var(--sf-brand);
+}
+
+.sfd-engine {
+        align-items: flex-start;
+        padding-top: 10px;
+        margin-top: 4px;
+        border-top: 1px solid var(--sf-line, #e5e7eb);
+}
+
+.sfd-engine .stillframe-hub-toggle__track {
+        margin-top: 2px;
+}
+
+.sfd-engine__text {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+}
+
+.sfd-engine__text b {
+        font-size: 12.5px;
+        font-weight: 600;
+        color: var(--sf-text, #111827);
+}
+
+.sfd-engine__text small {
+        font-size: 11.5px;
+        line-height: 1.4;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-snip .sfd-submit {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        width: 100%;
+        height: 34px;
+        padding: 0 12px;
+        font-size: 13px;
+        font-weight: 600;
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border: 1px solid var(--sf-brand) !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+        cursor: pointer;
+}
+
+.stillframe-snip .sfd-submit:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand-hover) !important;
+        border-color: var(--sf-brand-hover) !important;
+}
+
+/* ---- Page dropdown ---- */
+.sfp {
+        position: relative;
+        min-width: 0;
+        width: 100%;
+        font-size: 12.5px;
+}
+
+.sfp *,
+.sfp *::before,
+.sfp *::after {
+        box-sizing: border-box;
+}
+
+.sfp .sfp__trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        width: 100%;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12.5px;
+        font-weight: 500;
+        line-height: 1;
+        text-align: left;
+        color: var(--sf-text, #111827) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+        cursor: pointer;
+}
+
+.sfp .sfp__trigger:hover,
+.sfp.is-open .sfp__trigger {
+        border-color: var(--sf-brand) !important;
+}
+
+.sfp .sfp__trigger:focus-visible {
+        outline: 2px solid var(--sf-brand);
+        outline-offset: 1px;
+}
+
+.sfp .sfp__summary {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+}
+
+.sfp .sfp__trigger svg {
+        flex: 0 0 auto;
+        color: var(--sf-muted, #6b7280);
+}
+
+.sfp.is-open .sfp__trigger svg {
+        transform: rotate(180deg);
+}
+
+.sfp .sfp__drop {
+        position: absolute;
+        z-index: 40;
+        top: calc(100% + 4px);
+        left: 0;
+        right: 0;
+        padding: 6px;
+        background: #ffffff;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 8px;
+        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
+}
+
+.sfp .sfp__drop[hidden] {
+        display: none !important;
+}
+
+.sfp .sfp__search {
+        display: block;
+        width: 100%;
+        height: 30px;
+        margin: 0 0 6px;
+        padding: 0 10px;
+        font-family: inherit;
+        font-size: 12.5px;
+        color: var(--sf-text, #111827);
+        background: #ffffff;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 6px;
+        box-shadow: none;
+}
+
+.sfp .sfp__search:focus {
+        border-color: var(--sf-brand);
+        box-shadow: 0 0 0 1px var(--sf-brand);
+        outline: none;
+}
+
+.sfp .sfp__list {
+        max-height: 220px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+}
+
+.sfp .sfp__group {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        padding: 6px 8px 4px;
+        font-size: 10.5px;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: var(--sf-muted, #6b7280);
+        background: #ffffff;
+}
+
+.sfp .sfp__row {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        column-gap: 8px;
+        align-items: center;
+        padding: 5px 8px;
+        border-radius: 5px;
+        cursor: pointer;
+}
+
+.sfp .sfp__row:hover,
+.sfp .sfp__row.is-active {
+        background: var(--sf-well, #f3f4f6);
+}
+
+.sfp .sfp__row.is-selected {
+        background: var(--sf-brand-muted, #e6f4f8);
+}
+
+.sfp .sfp__row.is-selected .sfp__title {
+        color: var(--sf-brand);
+}
+
+.sfp .sfp__title {
+        grid-column: 1;
+        overflow: hidden;
+        font-weight: 600;
+        color: var(--sf-text, #111827);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+}
+
+.sfp .sfp__path {
+        grid-column: 1;
+        overflow: hidden;
+        font-size: 11.5px;
+        color: var(--sf-muted, #6b7280);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+}
+
+.sfp .sfp__chip {
+        grid-column: 2;
+        grid-row: 1 / span 2;
+        padding: 1px 6px;
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--sf-muted, #6b7280);
+        background: var(--sf-well, #f3f4f6);
+        border-radius: 999px;
+}
+
+.sfp .sfp__note {
+        padding: 10px 8px;
+        font-size: 12px;
+        color: var(--sf-muted, #6b7280);
+}
+
+/* ---- Editor top bar ---- */
+.stillframe-result .stillframe-result__toolbar {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-areas: "brand tools actions";
+        align-items: center;
+        gap: 8px 16px;
+        padding: 8px 12px;
+}
+
+.stillframe-result .stillframe-result__brand {
+        grid-area: brand;
+}
+
+.stillframe-result .stillframe-result__editing {
+        grid-area: tools;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: 6px 12px;
+}
+
+.stillframe-result .stillframe-result__actions {
+        grid-area: actions;
+        justify-self: end;
+        flex-shrink: 0;
+        gap: 6px;
+        margin-left: 0;
+}
+
+@media (max-width: 1180px) {
+        .stillframe-result .stillframe-result__toolbar {
+                grid-template-columns: minmax(0, 1fr) auto;
+                grid-template-areas: "brand actions" "tools tools";
+        }
+}
+
+.stillframe-result .stillframe-result__tools,
+.stillframe-result .stillframe-result__history,
+.stillframe-result .stillframe-result__sizes,
+.stillframe-result .stillframe-result__swatches {
+        gap: 2px;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+}
+
+.stillframe-result .stillframe-result__editing > * + * {
+        padding-left: 12px;
+        border-left: 1px solid var(--sf-line, #e5e7eb);
+}
+
+.stillframe-result .stillframe-result__swatches {
+        gap: 7px;
+}
+
+.stillframe-result .stillframe-tool,
+.stillframe-result .stillframe-icon-btn,
+.stillframe-result .stillframe-size {
+        width: 30px;
+        height: 30px;
+        color: var(--sf-text-2, #374151) !important;
+        background: transparent !important;
+        border: 1px solid transparent !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+}
+
+.stillframe-result .stillframe-tool svg,
+.stillframe-result .stillframe-icon-btn svg {
+        width: 16px;
+        height: 16px;
+}
+
+.stillframe-result .stillframe-tool:hover,
+.stillframe-result .stillframe-icon-btn:hover,
+.stillframe-result .stillframe-size:hover {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+}
+
+.stillframe-result .stillframe-tool[aria-pressed="true"],
+.stillframe-result .stillframe-size[aria-pressed="true"] {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+.stillframe-result .stillframe-swatch {
+        width: 16px;
+        height: 16px;
+}
+
+.stillframe-result .stillframe-btn {
+        height: 32px;
+        gap: 6px;
+        padding: 0 11px;
+        font-size: 12.5px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px;
+        box-shadow: none !important;
+}
+
+.stillframe-result .stillframe-btn svg {
+        width: 16px;
+        height: 16px;
+}
+
+.stillframe-result .stillframe-btn:hover {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+.stillframe-result .stillframe-btn.stillframe-btn-primary,
+.stillframe-result .stillframe-btn.stillframe-btn-primary:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-result .stillframe-btn.stillframe-btn-primary:hover {
+        background: var(--sf-brand-hover) !important;
+}
+
+.stillframe-result .stillframe-btn.stillframe-result__close {
+        width: 32px;
+        padding: 0;
+        color: var(--sf-muted, #6b7280) !important;
+}
+
+.stillframe-result .stillframe-format-select {
+        height: 32px;
+        margin: 0;
+        border-radius: 6px;
+}
+
+/* ---- Recent cards ---- */
+.stillframe-snip .stillframe-recent-btn:hover,
+.stillframe-result .stillframe-recent-btn:hover {
+        color: var(--sf-brand) !important;
+        background: var(--sf-brand-muted) !important;
+        border-color: var(--sf-brand-border) !important;
+}
+
+/* Download keeps its label at every width */
+.stillframe-result .stillframe-btn.stillframe-btn-primary {
+        width: auto;
+        min-width: 0;
+        padding: 0 14px;
+}
+
+.stillframe-result .stillframe-btn.stillframe-btn-primary .stillframe-btn__label {
+        display: inline !important;
+}
+
+/* ---- Direct Page tweaks ---- */
+.stillframe-snip .stillframe-snip__direct-menu {
+        width: 420px;
+        gap: 12px;
+}
+
+.stillframe-snip .sfd-chip {
+        height: 32px;
+}
+
+.stillframe-snip .sfd-chip svg {
+        width: 17px;
+        height: 17px;
+}
+
+.sfd-error {
+        margin: -6px 0 0;
+        padding-left: 72px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #b42318;
+}
+
+.sfd-error:empty {
+        display: none;
+}
+
+.stillframe-snip .sfd-row + .stillframe-hub-toggle,
+.stillframe-snip .stillframe-snip__direct-menu > .stillframe-hub-toggle {
+        margin: 6px 0 4px;
+}
+
+/* Page list opens across the full width of the menu and nothing in it is sticky */
+.sfd-row .sfp .sfp__drop {
+        left: -72px;
+}
+
+.sfp .sfp__search {
+        height: 26px;
+        margin-bottom: 4px;
+        font-size: 12px;
+}
+
+.sfp .sfp__group {
+        position: static;
+}
+
+.sfp .sfp__list {
+        max-height: 260px;
+}
+
+/* ---- Recent cards: quiet hover, smaller buttons ---- */
+.stillframe-snip .stillframe-recent-card:hover,
+.stillframe-result .stillframe-recent-card:hover {
+        background: #ffffff;
+        border-color: var(--sf-line-strong, #d1d5db);
+        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+
+.stillframe-snip .stillframe-recent-actions,
+.stillframe-result .stillframe-recent-actions {
+        flex-wrap: nowrap;
+        gap: 6px;
+}
+
+.stillframe-snip .stillframe-recent-btn,
+.stillframe-result .stillframe-recent-btn {
+        height: 26px !important;
+        gap: 5px !important;
+        padding: 0 9px !important;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        border-radius: 6px !important;
+}
+
+.stillframe-snip .stillframe-recent-btn svg,
+.stillframe-result .stillframe-recent-btn svg {
+        width: 13px;
+        height: 13px;
+}
+
+.stillframe-snip .stillframe-recent-btn:hover,
+.stillframe-result .stillframe-recent-btn:hover {
+        color: var(--sf-text, #111827) !important;
+        background: #f3f4f6 !important;
+        border-color: #9ca3af !important;
+}
+
+.stillframe-snip .stillframe-recent-btn.stillframe-recent-btn--del,
+.stillframe-result .stillframe-recent-btn.stillframe-recent-btn--del {
+        width: 26px !important;
+        padding: 0 !important;
+}
+
+.stillframe-snip .stillframe-recent-btn.stillframe-recent-btn--del:hover,
+.stillframe-result .stillframe-recent-btn.stillframe-recent-btn--del:hover {
+        color: #b42318 !important;
+        background: #fef2f2 !important;
+        border-color: #f1b5b0 !important;
+}
+
+/* ---- Lighter states, calmer menus ---- */
+.stillframe-snip.has-menu-open .stillframe-snip__bar .stillframe-snip__mode[aria-pressed="true"]:not([aria-expanded="true"]) {
+        color: var(--sf-text-2) !important;
+        background: transparent !important;
+        border-color: transparent !important;
+}
+
+/* Both menus open centred under the bar */
+.stillframe-snip .stillframe-snip__devices-wrap,
+.stillframe-snip .stillframe-snip__direct-wrap,
+.stillframe-snip .stillframe-snip__recent-wrap {
+        position: static;
+}
+
+.stillframe-snip .stillframe-snip__direct-menu,
+.stillframe-snip .stillframe-snip__recent-menu {
+        top: calc(100% + 8px);
+        right: auto;
+        left: 50%;
+        transform: translateX(-50%);
+}
+
+.stillframe-snip .stillframe-snip__recent-menu {
+        width: 480px;
+        max-height: min(75vh, 600px);
+        padding: 14px;
+}
+
+.stillframe-snip .stillframe-snip__direct-menu {
+        gap: 14px;
+        padding: 14px 16px 16px;
+}
+
+.stillframe-snip .sfd-label {
+        display: block;
+        padding: 0;
+        margin: 0;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 1.2;
+        color: var(--sf-text-2, #374151);
+        background: none !important;
+        border: 0;
+        border-radius: 0;
+}
+
+.stillframe-snip .sfd-chips {
+        gap: 8px;
+}
+
+.stillframe-snip .sfd-chip:hover {
+        color: var(--sf-brand) !important;
+        background: #f6f8f9 !important;
+        border-color: #aebcc2 !important;
+}
+
+.stillframe-snip .sfd-chip.is-selected,
+.stillframe-snip .sfd-chip.is-selected:hover {
+        color: var(--sf-brand) !important;
+        background: #f4f8fa !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-snip .sfd-seg {
+        gap: 8px;
+        overflow: visible;
+        border: 0;
+        border-radius: 0;
+}
+
+.stillframe-snip .sfd-seg__btn {
+        height: 30px;
+        padding: 0 16px;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px;
+}
+
+.stillframe-snip .sfd-seg__btn:last-child {
+        border-right: 1px solid var(--sf-line-strong, #d1d5db) !important;
+}
+
+.stillframe-snip .sfd-seg__btn:hover {
+        color: var(--sf-brand) !important;
+        background: #f6f8f9 !important;
+        border-color: #aebcc2 !important;
+}
+
+.stillframe-snip .sfd-seg__btn.is-active,
+.stillframe-snip .sfd-seg__btn.is-active:hover {
+        color: var(--sf-brand) !important;
+        background: #f4f8fa !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-snip .sfd-submit,
+.stillframe-snip .sfd-submit:focus {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-snip .sfd-submit:hover {
+        background: var(--sf-brand-hover) !important;
+        border-color: var(--sf-brand-hover) !important;
+}
+
+.stillframe-snip .stillframe-snip__direct-menu > .stillframe-hub-toggle {
+        margin: 4px 0 2px;
+        padding: 4px 0;
+}
+
+/* Page list: lighter rows, no type badge */
+.sfp .sfp__chip {
+        display: none;
+}
+
+.sfp .sfp__list {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+}
+
+.sfp .sfp__row {
+        padding: 6px 10px;
+}
+
+.sfp .sfp__title {
+        font-size: 12.5px;
+        font-weight: 500;
+}
+
+.sfp .sfp__path {
+        font-size: 11px;
+}
+
+.sfp .sfp__group {
+        padding: 8px 10px 3px;
+        font-size: 10px;
+}
+
+.sfp .sfp__row:hover,
+.sfp .sfp__row.is-active {
+        background: #f5f6f7;
+}
+
+.sfp .sfp__row.is-selected {
+        background: #f4f8fa;
+}
+
+.sfp .sfp__trigger:hover,
+.sfp.is-open .sfp__trigger {
+        background: #ffffff !important;
+}
+
+/* ---- Editor: one toolbar row, compact side panel ---- */
+.stillframe-result .stillframe-result__tools { order: 1; }
+.stillframe-result .stillframe-result__history { order: 2; }
+.stillframe-result .stillframe-result__shape-opts { order: 3; display: inline-flex; align-items: center; gap: 6px; }
+.stillframe-result .stillframe-result__swatches { order: 4; }
+.stillframe-result .stillframe-result__sizes { order: 5; }
+
+.stillframe-result .stillframe-result__editing {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 8px 10px;
+}
+
+.stillframe-result .stillframe-result__editing > * + * {
+        padding-left: 10px;
+}
+
+.stillframe-result .stillframe-result__shape-opts[style*="display: none"] {
+        display: none !important;
+        padding-left: 0 !important;
+        border-left: none !important;
+}
+
+.stillframe-result .stillframe-tool,
+.stillframe-result .stillframe-icon-btn,
+.stillframe-result .stillframe-size {
+        width: 28px;
+        height: 28px;
+}
+
+.stillframe-result .stillframe-tool:hover,
+.stillframe-result .stillframe-icon-btn:hover,
+.stillframe-result .stillframe-size:hover,
+.stillframe-result .stillframe-btn:hover {
+        color: var(--sf-brand) !important;
+        background: #f3f5f6 !important;
+}
+
+.stillframe-result .stillframe-tool[aria-pressed="true"],
+.stillframe-result .stillframe-size[aria-pressed="true"] {
+        background: #eef3f5 !important;
+        border-color: transparent !important;
+}
+
+@media (max-width: 1500px) {
+        .stillframe-result .stillframe-result__actions .stillframe-btn:not(.stillframe-btn-primary):not(.stillframe-result__close) .stillframe-btn__label {
+                display: none !important;
+        }
+
+        .stillframe-result .stillframe-result__actions .stillframe-btn:not(.stillframe-btn-primary):not(.stillframe-result__close) {
+                width: 32px;
+                padding: 0;
+        }
+}
+
+@media (max-width: 1180px) {
+        .stillframe-result .stillframe-result__editing {
+                flex-wrap: wrap;
+        }
+}
+
+.stillframe-result .stillframe-result__sidebar {
+        width: 184px;
+}
+
+.stillframe-result .stillframe-result__sidebar-head {
+        font-size: 10.5px !important;
+        padding: 12px 12px 6px;
+}
+
+.stillframe-result .stillframe-device-tab__name {
+        font-size: 12.5px !important;
+        font-weight: 600 !important;
+        line-height: 1.3;
+}
+
+.stillframe-result .stillframe-device-tab__res {
+        font-size: 11px !important;
+}
+
+.stillframe-result .stillframe-sidebar-action-btn {
+        height: 30px;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        box-shadow: none !important;
+}
+
+.stillframe-result .stillframe-sidebar-action-btn:not(.stillframe-sidebar-action-btn--primary):hover {
+        color: var(--sf-brand) !important;
+        background: #f3f5f6 !important;
+        border-color: #aebcc2 !important;
+}
+
+.stillframe-result .stillframe-sidebar-action-btn--primary,
+.stillframe-result .stillframe-sidebar-action-btn--primary:hover {
+        color: #ffffff !important;
+        background: var(--sf-brand) !important;
+        border-color: var(--sf-brand) !important;
+}
+
+.stillframe-result .stillframe-sidebar-action-btn--primary:hover {
+        background: var(--sf-brand-hover) !important;
+}
+
+.stillframe-result .stillframe-device-tab.is-active {
+        background: #f4f8fa;
+        border-color: var(--sf-brand);
+}
+
+/* ---- Round close buttons everywhere ---- */
+.stillframe-result .stillframe-btn.stillframe-result__close,
+.stillframe-result .stillframe-result__drawer-close,
+.stillframe-snip .stillframe-snip__reset,
+.stillframe-snip .stillframe-snip__bar .stillframe-snip__close {
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        border-radius: 50% !important;
+}
+
+.stillframe-result .stillframe-result__drawer-close {
+        width: 28px;
+        height: 28px;
+}
+
+/* ---- Editor top bar: every control on the right shares one height and corner ---- */
+.stillframe-result .stillframe-result__actions {
+        align-items: center;
+        gap: 8px;
+}
+
+.stillframe-result .stillframe-result__actions .stillframe-btn,
+.stillframe-result .stillframe-result__actions .stillframe-format-select {
+        height: 34px;
+        margin: 0;
+        border-radius: 8px;
+}
+
+.stillframe-result .stillframe-result__actions .stillframe-btn:not(.stillframe-btn-primary):not(.stillframe-result__close) {
+        min-width: 34px;
+}
+
+.stillframe-result .stillframe-result__actions .stillframe-format-select {
+        appearance: none;
+        -webkit-appearance: none;
+        padding: 0 28px 0 12px;
+        font-size: 12.5px;
+        font-weight: 600;
+        line-height: 32px;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
+        background-repeat: no-repeat;
+        background-position: right 9px center;
+}
+
+/* ---- Page list: the search box scrolls away with the list ---- */
+.sfp .sfp__drop {
+        max-height: 300px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+}
+
+.sfp .sfp__list {
+        max-height: none;
+        overflow: visible;
+}
+
+/* ---- Hover help next to Quality and Height ---- */
+.sfd-label {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+}
+
+.sfd-info {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--sf-muted, #6b7280);
+        cursor: help;
+        border-radius: 50%;
+}
+
+.sfd-info:hover,
+.sfd-info:focus-visible {
+        color: var(--sf-brand, #005976);
+        outline: none;
+}
+
+.sfd-info__tip {
+        position: absolute;
+        z-index: 50;
+        left: -6px;
+        bottom: calc(100% + 8px);
+        display: none;
+        width: max-content;
+        max-width: 230px;
+        padding: 8px 10px;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 1.45;
+        color: #ffffff;
+        background: #14313c;
+        border-radius: 8px;
+        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
+        pointer-events: none;
+}
+
+.sfd-info__tip::after {
+        content: "";
+        position: absolute;
+        left: 10px;
+        top: 100%;
+        border: 5px solid transparent;
+        border-top-color: #14313c;
+}
+
+.sfd-info:hover .sfd-info__tip,
+.sfd-info:focus-visible .sfd-info__tip {
+        display: block;
+}
+
+.sfd-info__line {
+        display: block;
+}
+
+.sfd-info__line b {
+        font-weight: 700;
+}
+
+/* ---- Toast ---- */
+.stillframe-toast {
+        position: fixed;
+        z-index: 1000001;
+        left: 50%;
+        bottom: 24px;
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        max-width: min(520px, calc(100vw - 32px));
+        padding: 10px 16px 10px 11px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 1.35;
+        color: #1f2937;
+        background: #ffffff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
+        opacity: 0;
+        transform: translate(-50%, 10px);
+        pointer-events: none;
+        transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.stillframe-toast.is-visible {
+        opacity: 1;
+        transform: translate(-50%, 0);
+        pointer-events: auto;
+}
+
+.stillframe-toast__icon {
+        flex: none;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: #e6f4f8;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 14px 14px;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005976' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8v.01M12 12v5'/></svg>");
+}
+
+.stillframe-toast[data-tone="success"] .stillframe-toast__icon {
+        background-color: #005976;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
+}
+
+.stillframe-toast[data-tone="error"] .stillframe-toast__icon {
+        background-color: #fdecea;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v7M12 18v.01'/></svg>");
+}
+
+.stillframe-toast[data-tone="busy"] .stillframe-toast__icon {
+        background-image: none;
+        background-color: transparent;
+        border: 2.5px solid #cfe5ec;
+        border-top-color: #005976;
+        animation: stillframe-toast-spin 0.8s linear infinite;
+}
+
+.stillframe-toast__link {
+        padding-left: 12px;
+        font-weight: 600;
+        color: #005976;
+        text-decoration: none;
+        white-space: nowrap;
+        border-left: 1px solid #e5e7eb;
+}
+
+.stillframe-toast__link:hover {
+        text-decoration: underline;
+}
+
+@keyframes stillframe-toast-spin {
+        to {
+                transform: rotate(360deg);
+        }
+}
+
+/* ---- Options for the selected mark ---- */
+.stillframe-result .stillframe-result__props {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px 18px;
+        padding: 6px 16px;
+        background: #f9fafb;
+        border-bottom: 1px solid var(--sf-line, #e5e7eb);
+}
+
+.stillframe-result .stillframe-result__props[hidden] {
+        display: none;
+}
+
+.stillframe-result .stillframe-prop {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+}
+
+.stillframe-result .stillframe-prop__label {
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-result .stillframe-prop__select {
+        box-sizing: border-box !important;
+        height: 28px !important;
+        max-height: 28px !important;
+        line-height: 26px !important;
+        padding: 0 8px !important;
+        font-size: 12px !important;
+        font-weight: 500 !important;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px !important;
+        cursor: pointer;
+        outline: none;
+}
+
+.stillframe-result .stillframe-prop__select:hover {
+        border-color: var(--sf-brand, #005976) !important;
+}
+
+.stillframe-result .stillframe-prop__color {
+        width: 28px;
+        height: 28px;
+        padding: 2px;
+        background: #ffffff;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 50%;
+        cursor: pointer;
+}
+
+.stillframe-result .stillframe-prop__toggle,
+.stillframe-result .stillframe-prop__seg-btn {
+        box-sizing: border-box !important;
+        height: 28px !important;
+        max-height: 28px !important;
+        min-width: 28px !important;
+        line-height: 26px !important;
+        padding: 0 8px !important;
+        font-size: 12px !important;
+        font-weight: 700 !important;
+        color: var(--sf-text-2, #374151) !important;
+        background: #ffffff !important;
+        border: 1px solid var(--sf-line-strong, #d1d5db) !important;
+        border-radius: 6px !important;
+        cursor: pointer;
+        transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.stillframe-result .stillframe-prop__seg {
+        display: inline-flex;
+}
+
+.stillframe-result .stillframe-prop__seg-btn:first-child {
+        border-radius: 6px 0 0 6px;
+}
+
+.stillframe-result .stillframe-prop__seg-btn:last-child {
+        margin-left: -1px;
+        border-radius: 0 6px 6px 0;
+}
+
+.stillframe-result .stillframe-prop__toggle[aria-pressed="true"],
+.stillframe-result .stillframe-prop__seg-btn[aria-pressed="true"] {
+        color: #ffffff;
+        background: var(--sf-brand, #005976);
+        border-color: var(--sf-brand, #005976);
+}
+
+/* ---- Custom colour and thickness slider ---- */
+.stillframe-result .stillframe-swatch-custom {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 18px;
+        height: 18px;
+        padding: 0;
+        cursor: pointer;
+        background: conic-gradient(#ef4444, #facc15, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
+        border: 0;
+        border-radius: 50%;
+        box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.18);
+}
+
+.stillframe-result .stillframe-swatch-custom::-webkit-color-swatch-wrapper {
+        padding: 0;
+        opacity: 0;
+}
+
+.stillframe-result .stillframe-swatch-custom::-moz-color-swatch {
+        opacity: 0;
+}
+
+.stillframe-result .stillframe-size-slider {
+        width: 92px;
+        height: 4px;
+        margin: 0 4px;
+        cursor: pointer;
+        accent-color: var(--sf-brand, #005976);
+}
+
+/* ---- Text size control ---- */
+.stillframe-result .stillframe-prop__size {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+}
+
+.stillframe-result .stillframe-prop__range {
+        width: 140px;
+        accent-color: var(--sf-brand, #005976);
+}
+
+.stillframe-result .stillframe-prop__number {
+        width: 58px;
+        height: 28px;
+        padding: 0 6px;
+        font-size: 12.5px;
+        color: var(--sf-text-2, #374151);
+        background: #ffffff;
+        border: 1px solid var(--sf-line-strong, #d1d5db);
+        border-radius: 6px;
+}
+
+/* ---- Top bar controls: exactly one height, whatever WordPress does to selects ---- */
+.stillframe-result .stillframe-result__actions > .stillframe-btn,
+.stillframe-result .stillframe-result__actions > .stillframe-format-select {
+        box-sizing: border-box !important;
+        height: 36px !important;
+        min-height: 36px !important;
+        max-height: 36px !important;
+        margin: 0 !important;
+        line-height: 1 !important;
+        border-radius: 8px;
+}
+
+.stillframe-result .stillframe-result__actions > .stillframe-format-select {
+        padding: 0 28px 0 12px !important;
+        line-height: 34px !important;
+}
+
+.stillframe-result .stillframe-result__actions > .stillframe-btn.stillframe-result__close {
+        width: 36px !important;
+        border-radius: 50% !important;
+}
+
+.stillframe-result .stillframe-result__actions > .stillframe-btn:not(.stillframe-btn-primary):not(.stillframe-result__close) {
+        min-width: 36px;
+}
+
+/* Marks may hang past the picture, so the wrapper must not clip them */
+.stillframe-result .stillframe-capture-panel__canvas-wrap:has(img) {
+        overflow: visible;
+}
+
+.stillframe-result .stillframe-capture-panel__canvas-wrap > img {
+        border-radius: 4px;
+}
+
+/* ---- Device sizes shown in Window mode ---- */
+.stillframe-snip__devstrip {
+        position: fixed;
+        z-index: 7;
+        top: 74px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: max-content;
+        max-width: calc(100vw - 16px);
+        margin: 0;
+        padding: 5px 12px;
+        background: var(--sf-surface, #ffffff);
+        border: 1px solid var(--sf-line, #e5e7eb);
+        border-radius: 10px;
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.08);
+        pointer-events: auto;
+}
+
+.stillframe-snip__devstrip[hidden] {
+        display: none;
+}
+
+.stillframe-snip__devstrip-label {
+        margin-right: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--sf-muted, #6b7280);
+        white-space: nowrap;
+}
+
+.stillframe-snip .stillframe-snip__devstrip-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12.5px;
+        font-weight: 600;
+        color: var(--sf-text-2, #374151);
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        box-shadow: none;
+}
+
+.stillframe-snip .stillframe-snip__devstrip-btn small {
+        font-size: 11px;
+        font-weight: 500;
+        color: var(--sf-muted, #6b7280);
+}
+
+.stillframe-snip .stillframe-snip__devstrip-btn:hover,
+.stillframe-snip .stillframe-snip__devstrip-btn[aria-pressed="true"] {
+        color: var(--sf-brand, #005976);
+        background: var(--sf-brand-muted, #e6f4f8);
+}

stillframe/trunk/assets/css/stillframe-tools.css

@@ -473 +473 @@
 }
 
-/* Neutral accents: the brand colour is only for the primary Capture button. */
-:root {
-        --sf-ink: #1d2327;
-}
-
-.stillframe-select:focus,
-.stillframe-input:focus {
-        border-color: var(--sf-ink) !important;
-        box-shadow: none !important;
-}
-
-.stillframe-device-tile.is-active {
-        border-color: var(--sf-ink);
-        background: var(--sf-well);
-}
-
-.stillframe-device-tile.is-active .stillframe-device-tile__icon {
-        color: var(--sf-ink);
-}
-
-.stillframe-device-tile.is-active .stillframe-device-tile__check {
-        background: var(--sf-ink);
-        border-color: var(--sf-ink);
-}
-
-.stillframe-device-tile.is-active .stillframe-device-tile__res {
-        color: var(--sf-muted);
-        font-weight: 400;
-}
-
-.stillframe-pill.is-active,
-.stillframe-pill.is-active:hover {
-        background: #f0f0f1;
-        border-color: var(--sf-ink);
-        color: var(--sf-ink);
-        font-weight: 600;
-}
-
-.stillframe-switch-wrap input.stillframe-switch-input:checked + .stillframe-switch-slider {
-        background: var(--sf-ink);
-}
-
-/* Softer, button-like choices */
-.stillframe-pill {
-        background: #fafafa;
-        border-color: #b4bac4;
-}
-
-.stillframe-pill:hover {
-        background: #f0f0f1;
-        border-color: #6b7280;
-}
-
-.stillframe-pill.is-active,
-.stillframe-pill.is-active:hover {
-        background: #eceef1;
-        border-color: #6b7280;
-        color: var(--sf-ink);
-}
-
-.stillframe-device-tile {
-        border-width: 1px;
-        border-color: #b4bac4;
-}
-
-.stillframe-device-tile.is-active {
-        background: #f3f4f6;
-        border-color: #6b7280;
-        box-shadow: inset 0 0 0 1px #6b7280;
-}
-
-.stillframe-device-tile.is-active .stillframe-device-tile__check {
-        background: #6b7280;
-        border-color: #6b7280;
-}
-
-.stillframe-switch-wrap input.stillframe-switch-input:checked + .stillframe-switch-slider {
-        background: #6b7280;
-}
-
 .stillframe-box__header {
         padding: 18px 28px;

stillframe/trunk/assets/js/stillframe-admin-bar.js

@@ -35 +35 @@
                         throw new Error('origin');
                 }
-                if (config.version) {
-                        parsed.searchParams.set('ver', String(config.version));
+                var ver = config.assetVer || config.version;
+                if (ver) {
+                        parsed.searchParams.set('ver', String(ver));
                 }
                 return parsed.toString();
@@ -93 +94 @@
                         return loading;
                 }
+                var useFabric = config.useFabric !== false;
                 loading = Promise.resolve().then(function () {
-                        return Promise.all([
+                        var initial = [
                                 loadStylesheet(assetUrl('assets/css/stillframe-capture-panel.css'), 'stillframe-capture-panel-css'),
-                                loadScript(assetUrl('assets/js/stillframe-annotation-editor.js'), 'stillframe-annotation-editor-js'),
                                 loadScript(assetUrl('assets/js/vendor/modern-screenshot.js'), 'stillframe-modern-screenshot-js')
-                        ]);
+                        ];
+                        if (useFabric) {
+                                initial.push(loadScript(assetUrl('assets/js/vendor/fabric.min.js'), 'stillframe-fabric-js'));
+                        }
+                        return Promise.all(initial);
+                }).then(function () {
+                        var editorScript = useFabric ? 'assets/js/stillframe-annotation-editor-v2.js' : 'assets/js/stillframe-annotation-editor.js';
+                        return loadScript(assetUrl(editorScript), 'stillframe-annotation-editor-js');
                 }).then(function () {
                         return loadScript(assetUrl('assets/js/stillframe-capture-panel.js'), 'stillframe-capture-panel-js');

stillframe/trunk/assets/js/stillframe-annotation-editor.js

@@ -11 +11 @@
         var BOX_TYPES = { circle: 1, rect: 1, highlight: 1, blur: 1 };
         var NO_ROTATE = { arrow: 1, blur: 1, step: 1 };
-        var UNIFORM = { text: 1, step: 1 };
+        var UNIFORM = { step: 1 };
         var MAX_MARKS = 400;
         var MAX_PEN_POINTS = 3000;
-        var HANDLE_PX = 9;
-        var ROTATE_OFFSET = 26;
+        var HANDLE_PX = 6;
+        var ROTATE_OFFSET = 16;
         var measureCtx = null;
 
@@ -580 +580 @@
                                                         return;
                                                 }
+                                                var wShape = b.r - b.l;
+                                                var hShape = b.b - b.t;
+                                                var minShape = Math.min(wShape, hShape);
+                                                var hRad = minShape < 35 ? 2.5 : (minShape < 70 ? 3 : 3.5);
                                                 ctx.fillStyle = '#ffffff';
-                                                ctx.strokeStyle = '#374151';
+                                                ctx.strokeStyle = '#005976';
+                                                ctx.lineWidth = 1.5;
                                                 ctx.beginPath();
                                                 if (hd.id === 'rot') {
@@ -588 +593 @@
                                                         ctx.stroke();
                                                         ctx.beginPath();
-                                                        ctx.arc(hd.x, hd.y, 5, 0, Math.PI * 2);
+                                                        ctx.arc(hd.x, hd.y, hRad, 0, Math.PI * 2);
                                                 } else {
-                                                        ctx.rect(hd.x - 4, hd.y - 4, 8, 8);
+                                                        ctx.arc(hd.x, hd.y, hRad, 0, Math.PI * 2);
                                                 }
                                                 ctx.fill();
@@ -970 +975 @@
                                         m.x1 = cw.x / d.w;
                                         m.y1 = cw.y / d.h;
+                                }
+                        } else if (o.type === 'text') {
+                                var isSide = h === 'w' || h === 'e' || h === 'ml' || h === 'mr';
+                                if (isSide) {
+                                        var rawW = (h.indexOf('w') > -1 || h === 'ml') ? b.r - local.x : local.x - b.l;
+                                        m.w = Math.max(0.04, Math.min(1.5, rawW / d.w));
                                 } else {
-                                        m.fs = Math.max(8, Math.min(240, fontSize(o) * s));
+                                        var rawW = h.indexOf('w') > -1 ? b.r - local.x : local.x - b.l;
+                                        var rawH = h.indexOf('n') > -1 ? b.b - local.y : local.y - b.t;
+                                        var s = Math.max(rawW / ow, rawH / oh, min / Math.min(ow, oh));
+                                        m.fs = Math.max(8, Math.min(240, Math.round(fontSize(o) * s)));
                                         if (o.w) {
-                                                m.w = Math.min(1, o.w * s);
+                                                m.w = Math.min(1.5, o.w * s);
                                         }
-                                        var lay = textLayout(m, d.w);
-                                        m.x1 = (cw.x - lay.width / 2) / d.w;
-                                        m.y1 = (cw.y - lay.height / 2) / d.h;
                                 }
                                 return;

stillframe/trunk/assets/js/stillframe-capture-panel.js

@@ -14 +14 @@
         var returnFocus = null;
         var captured = null;
+        var resultDevices = null;
         var statusNode = null;
         var propsNode = null;
@@ -56 +57 @@
         };
 
-        // Above this many elements, or after a render slower than SLOW_RENDER_MS,
-        // the page is rendered only after the selection is released. A background
-        // render freezes the main thread and would make the drag stutter.
-        var HEAVY_PAGE_NODES = 1500;
+        // A background render freezes the main thread, so it waits until the pointer
+        // has been idle. Full screen starts it immediately.
         var SLOW_RENDER_MS = 700;
         var IDLE_BEFORE_RENDER_MS = 1500;
 
         function canPrerender() {
-                // Do not prerender in the background during active capture — it freezes the main thread
-                // on pages with many DOM nodes, causing dropped clicks and sluggish interaction.
-                return false;
+                // The redraw is heavy, so it starts only after the pointer has been idle.
+                // That way a full-screen shot can already be underway before Capture is clicked.
+                return true;
         }
 
@@ -305 +304 @@
         }
 
+        // Read-only actions such as "edit" stay. These values change data if replayed.
+        var MUTATING_ACTIONS = [
+                'trash', 'untrash', 'delete', 'delete-all', 'editpost', 'postajaxpost', 'post-quickdraft-save',
+                'deletecomment', 'trashcomment', 'untrashcomment', 'spamcomment', 'unspamcomment', 'approvecomment', 'unapprovecomment',
+                'approve', 'unapprove', 'spam', 'unspam', 'dim-comment',
+                'activate', 'deactivate', 'activate-selected', 'deactivate-selected', 'update-selected', 'delete-selected',
+                'enable-auto-update', 'disable-auto-update', 'error_scrape', 'resume',
+                'upgrade-plugin', 'upgrade-theme', 'do-plugin-upgrade', 'do-theme-upgrade', 'do-core-upgrade', 'do-translation-upgrade',
+                'install-plugin', 'install-theme', 'upload-plugin', 'upload-theme',
+                'logout', 'remove', 'deleteblog', 'spamblog'
+        ];
+
+        function mutatingActions() {
+                return Array.isArray(config.mutatingActions) && config.mutatingActions.length
+                        ? config.mutatingActions
+                        : MUTATING_ACTIONS;
+        }
+
+        function actionIsMutating(value) {
+                var list = mutatingActions();
+                if (Array.isArray(value)) {
+                        return value.some(actionIsMutating);
+                }
+                var name = String(value || '').toLowerCase();
+                if (!name) {
+                        return false;
+                }
+                return list.indexOf(name) !== -1;
+        }
+
+        // Drop nonces and state-changing actions from any URL the capture iframe will open.
+        // Read-only actions such as edit stay, so a pasted editor link still opens the editor.
+        function scrubCaptureUrl(urlString) {
+                var current = new URL(window.location.href);
+                var target;
+                try {
+                        target = new URL(String(urlString || current.href), current.href);
+                } catch (error) {
+                        target = new URL(current.href);
+                }
+                var strip = Array.isArray(config.stripArgs) && config.stripArgs.length
+                        ? config.stripArgs
+                        : ['_wpnonce', 'nonce', '_wp_http_referer', 'wp_customize'];
+                strip.forEach(function (key) {
+                        if (String(key) === 'action') {
+                                return;
+                        }
+                        target.searchParams.delete(String(key));
+                });
+                var actions = target.searchParams.getAll('action');
+                if (actions.some(actionIsMutating)) {
+                        target.searchParams.delete('action');
+                }
+                target.hash = '';
+                return target.toString();
+        }
+
         function captureTargetUrl() {
                 var current = new URL(window.location.href);
@@ -316 +372 @@
                         target = new URL(current.href);
                 }
-                var strip = Array.isArray(config.stripArgs) && config.stripArgs.length
-                        ? config.stripArgs
-                        : ['action', '_wpnonce', 'nonce', '_wp_http_referer', 'wp_customize'];
-                strip.forEach(function (key) {
-                        target.searchParams.delete(String(key));
-                });
-                target.hash = '';
-                return target.toString();
+                return scrubCaptureUrl(target.toString());
         }
 
@@ -1478 +1527 @@
         }
 
+        // The redraw keeps each box at its on-screen width but can draw text a
+        // fraction wider, so a row that fit on one line (pagination, the admin bar
+        // avatar) wraps in the shot. Rows that sit on one line now are marked so the
+        // copy cannot wrap them; multi-line boxes inside them keep wrapping.
+        var ATOMIC_TAGS = { IMG: true, INPUT: true, SELECT: true, TEXTAREA: true, BUTTON: true, SVG: true, svg: true, CANVAS: true, VIDEO: true, IFRAME: true, OBJECT: true, EMBED: true };
+
+        // Boxes that sit on the lines of el. Text and inline boxes count; block
+        // children count as one box each. Out-of-flow content such as WordPress's
+        // screen-reader-text labels (absolute, clipped to 1px) is ignored.
+        function lineRects(el, win, range) {
+                var rects = [];
+                var stack = [el];
+                while (stack.length) {
+                        var node = stack.pop();
+                        var child;
+                        for (child = node.lastChild; child; child = child.previousSibling) {
+                                if (child.nodeType === 3) {
+                                        if (/\S/.test(child.data)) {
+                                                range.selectNodeContents(child);
+                                                Array.prototype.push.apply(rects, range.getClientRects());
+                                        }
+                                        continue;
+                                }
+                                if (child.nodeType !== 1) {
+                                        continue;
+                                }
+                                var cs = win.getComputedStyle(child);
+                                if (cs.display === 'none' || cs.position === 'absolute' || cs.position === 'fixed') {
+                                        continue;
+                                }
+                                if (cs.display === 'contents' || (cs.display === 'inline' && !ATOMIC_TAGS[child.tagName])) {
+                                        stack.push(child);
+                                        continue;
+                                }
+                                rects.push(child.getBoundingClientRect());
+                        }
+                }
+                return rects;
+        }
+
+        function markSingleLines(doc, crop) {
+                var marked = [];
+                var win = doc.defaultView;
+                var all = doc.body ? doc.body.getElementsByTagName('*') : [];
+                var range = doc.createRange();
+                var i;
+                for (i = 0; i < all.length; i++) {
+                        var el = all[i];
+                        var box = el.getBoundingClientRect();
+                        if (!box.width || !box.height || box.height > 160) {
+                                continue;
+                        }
+                        if (crop && (box.bottom < crop.y || box.top > crop.y + crop.height || box.right < crop.x || box.left > crop.x + crop.width)) {
+                                continue;
+                        }
+                        var style;
+                        try {
+                                style = win.getComputedStyle(el);
+                        } catch (error) {
+                                continue;
+                        }
+                        if (style.whiteSpace !== 'normal' || style.display === 'inline' || style.display === 'contents' || style.display === 'none') {
+                                continue;
+                        }
+                        var rects = lineRects(el, win, range);
+                        var top = -Infinity;
+                        var bottom = Infinity;
+                        var count = 0;
+                        var r;
+                        for (r = 0; r < rects.length; r++) {
+                                if (!rects[r].width || !rects[r].height) {
+                                        continue;
+                                }
+                                top = Math.max(top, rects[r].top);
+                                bottom = Math.min(bottom, rects[r].bottom);
+                                count++;
+                        }
+                        if (!count) {
+                                continue;
+                        }
+                        var name = top < bottom ? 'data-stillframe-line' : 'data-stillframe-wrap';
+                        if (name === 'data-stillframe-wrap' && !(el.parentElement && el.parentElement.closest('[data-stillframe-line]'))) {
+                                continue;
+                        }
+                        el.setAttribute(name, '1');
+                        marked.push([el, name]);
+                }
+                if (range.detach) {
+                        range.detach();
+                }
+                return function () {
+                        marked.forEach(function (item) {
+                                item[0].removeAttribute(item[1]);
+                        });
+                };
+        }
+
         function prepareClone(root, view, crop) {
                 if (!root || root.nodeType !== 1) {
@@ -1483 +1629 @@
                 }
                 var doc = view.document;
+                // The copy writes text-wrap onto every element, so a one-line row is
+                // held on one line by setting it on each element inside it, except
+                // inside boxes that wrap on screen. text-wrap-mode leaves spacing alone.
+                var wrapProp = view.CSS && view.CSS.supports && view.CSS.supports('text-wrap-mode', 'nowrap') ? 'text-wrap-mode' : 'white-space';
+                Array.prototype.forEach.call(root.querySelectorAll('[data-stillframe-line], [data-stillframe-line] *'), function (node) {
+                        var owner = node.closest('[data-stillframe-line], [data-stillframe-wrap]');
+                        if (owner && owner.hasAttribute('data-stillframe-line') && node.style) {
+                                node.style.setProperty(wrapProp, 'nowrap', 'important');
+                        }
+                });
                 Array.prototype.forEach.call(root.querySelectorAll('[data-stillframe-off]'), function (node) {
                         if (node.tagName === 'IMG') {
@@ -1550 +1706 @@
         }
 
+        function fontNames(value) {
+                return String(value || '').toLowerCase().split(',').map(function (part) {
+                        return part.trim().replace(/^["']|["']$/g, '');
+                }).filter(Boolean);
+        }
+
+        // Drop the CSS alt-text separator in values such as "\f148" / "".
+        function stripContentAlt(text) {
+                var quote = '';
+                var i;
+                for (i = 0; i < text.length; i++) {
+                        var ch = text.charAt(i);
+                        if (quote) {
+                                if (ch === '\\') {
+                                        i++;
+                                        continue;
+                                }
+                                if (ch === quote) {
+                                        quote = '';
+                                }
+                                continue;
+                        }
+                        if (ch === '"' || ch === "'") {
+                                quote = ch;
+                                continue;
+                        }
+                        if (ch === '/' && i > 0 && text.charAt(i - 1) === ' ' && text.charAt(i + 1) === ' ') {
+                                return text.slice(0, i - 1).trim();
+                        }
+                }
+                return text;
+        }
+
+        function quotedStrings(text) {
+                var out = [];
+                var i = 0;
+                while (i < text.length) {
+                        var ch = text.charAt(i);
+                        if (ch !== '"' && ch !== "'") {
+                                i++;
+                                continue;
+                        }
+                        var quote = ch;
+                        var buf = '';
+                        i++;
+                        while (i < text.length) {
+                                var c = text.charAt(i);
+                                if (c === '\\') {
+                                        i++;
+                                        if (i < text.length) {
+                                                buf += text.charAt(i);
+                                        }
+                                        i++;
+                                        continue;
+                                }
+                                if (c === quote) {
+                                        i++;
+                                        break;
+                                }
+                                buf += c;
+                                i++;
+                        }
+                        out.push(buf);
+                }
+                return out;
+        }
+
+        // getComputedStyle returns a quoted string for content, or the keyword none.
+        function pseudoText(content) {
+                if (!content || content === 'none' || content === 'normal') {
+                        return '';
+                }
+                var text = stripContentAlt(String(content).trim());
+                if (/^(?:url|attr|counter|counters|image-set|-webkit-image-set|[a-z-]*gradient)\(/i.test(text)) {
+                        return '';
+                }
+                var parts = quotedStrings(text);
+                if (parts.length) {
+                        text = parts.join('');
+                }
+                if (!text || text === 'none' || text === 'normal') {
+                        return '';
+                }
+                return text;
+        }
+
+        function usesIconFont(fontFamily) {
+                return /dashicons|fontawesome|font-awesome|font awesome|material-icons|material icons|glyphicons|icomoon|ionicons|bootstrap-icons|feather|remixicon|tabler/i.test(fontFamily || '');
+        }
+
+        // A slash in the shot is a private-use icon character written into a CSS ::before.
+        // Real text in that same font draws; the pseudo's character does not.
+        function needsRealGlyph(text, fontFamily) {
+                var i;
+                if (!text || /^\s+$/.test(text)) {
+                        return false;
+                }
+                if (usesIconFont(fontFamily)) {
+                        return true;
+                }
+                for (i = 0; i < text.length; i++) {
+                        if (text.charCodeAt(i) > 126) {
+                                return true;
+                        }
+                }
+                return false;
+        }
+
+        function iconContentSelectors(doc) {
+                var list = [];
+                var seen = {};
+                function add(selectorText) {
+                        if (!selectorText) {
+                                return;
+                        }
+                        selectorText.split(',').forEach(function (raw) {
+                                var sel = raw.replace(/::(?:before|after)/gi, '').replace(/:(?:before|after)/gi, '').trim();
+                                if (!sel || seen[sel]) {
+                                        return;
+                                }
+                                seen[sel] = true;
+                                list.push(sel);
+                        });
+                }
+                function walk(rules) {
+                        var i;
+                        for (i = 0; i < rules.length; i++) {
+                                var rule = rules[i];
+                                if (rule.cssRules && rule.cssRules.length) {
+                                        try {
+                                                walk(rule.cssRules);
+                                        } catch (error) {}
+                                }
+                                if (!rule.style || !rule.selectorText) {
+                                        continue;
+                                }
+                                if (rule.selectorText.indexOf('before') === -1 && rule.selectorText.indexOf('after') === -1) {
+                                        continue;
+                                }
+                                var content = rule.style.getPropertyValue('content');
+                                if (!content || content === 'none' || content === 'normal' || content === '""' || content === "''") {
+                                        continue;
+                                }
+                                if (/counter\(|url\(|attr\(|gradient|image-set|open-quote|close-quote/i.test(content)) {
+                                        continue;
+                                }
+                                if (!needsRealGlyph(pseudoText(content), rule.style.getPropertyValue('font-family'))) {
+                                        continue;
+                                }
+                                add(rule.selectorText);
+                        }
+                }
+                var sheets = doc.styleSheets;
+                var s;
+                for (s = 0; s < sheets.length; s++) {
+                        var rules;
+                        try {
+                                rules = sheets[s].cssRules;
+                        } catch (error2) {
+                                continue;
+                        }
+                        if (rules) {
+                                walk(rules);
+                        }
+                }
+                return list;
+        }
+
+        function iconCandidates(root) {
+                var doc = root.ownerDocument || document;
+                var found = [];
+                var seen = typeof WeakSet === 'function' ? new WeakSet() : null;
+                function add(el) {
+                        if (!el || el.nodeType !== 1) {
+                                return;
+                        }
+                        if (seen) {
+                                if (seen.has(el)) {
+                                        return;
+                                }
+                                seen.add(el);
+                        }
+                        found.push(el);
+                }
+                function take(list) {
+                        var i;
+                        for (i = 0; i < list.length; i++) {
+                                add(list[i]);
+                        }
+                }
+                try {
+                        take(root.querySelectorAll('[class*="dashicons"], .wp-menu-image, .ab-icon, .view-switch a, .collapse-button-icon'));
+                } catch (error) {
+                        return found;
+                }
+                var selectors = iconContentSelectors(doc);
+                var batch = [];
+                function flush() {
+                        if (!batch.length) {
+                                return;
+                        }
+                        var query = batch.join(',');
+                        batch = [];
+                        try {
+                                take(root.querySelectorAll(query));
+                        } catch (error2) {
+                                query.split(',').forEach(function (sel) {
+                                        try {
+                                                take(root.querySelectorAll(sel));
+                                        } catch (error3) {
+                                                return;
+                                        }
+                                });
+                        }
+                }
+                var i;
+                for (i = 0; i < selectors.length; i++) {
+                        batch.push(selectors[i]);
+                        if (batch.length === 20) {
+                                flush();
+                        }
+                }
+                flush();
+                return found;
+        }
+
+        // Icon fonts such as dashicons live on ::before / ::after. The redraw turns
+        // those characters into slashes, so the glyph is painted as real text instead.
+        // The live page is only marked. The glyphs go into the redraw's copy, where
+        // no page stylesheet applies, so nothing on screen moves while the shot is
+        // taken and no theme rule (span, :first-child, :empty) can restyle them.
+        var GLYPH_ATTR = 'data-stillframe-glyph';
+
+        function pinIconFonts(root) {
+                var marked = [];
+                var glyphs = {};
+                var families = [];
+                var seenFamily = {};
+                var doc = root && root.ownerDocument;
+                var none = {
+                        undo: function () {},
+                        apply: function () {},
+                        families: families
+                };
+                if (!root || root.nodeType !== 1 || !root.querySelectorAll || !doc) {
+                        return none;
+                }
+                var view = doc.defaultView || window;
+                var skip = {
+                        IMG: true,
+                        INPUT: true,
+                        TEXTAREA: true,
+                        SELECT: true,
+                        OPTION: true,
+                        BR: true,
+                        HR: true,
+                        SVG: true,
+                        CANVAS: true,
+                        VIDEO: true,
+                        IFRAME: true,
+                        SCRIPT: true,
+                        STYLE: true
+                };
+                var nodes = iconCandidates(root);
+                var i;
+                for (i = 0; i < nodes.length; i++) {
+                        var el = nodes[i];
+                        if (!el || skip[el.tagName]) {
+                                continue;
+                        }
+                        if (el.namespaceURI && el.namespaceURI !== 'http://www.w3.org/1999/xhtml') {
+                                continue;
+                        }
+                        if (el.closest && el.closest('.stillframe-snip, .stillframe-result, .stillframe-capture-panel, .stillframe-capture-frame')) {
+                                continue;
+                        }
+                        var elStyle;
+                        try {
+                                elStyle = view.getComputedStyle(el);
+                        } catch (error) {
+                                continue;
+                        }
+                        if (elStyle.display === 'none' || elStyle.visibility === 'hidden') {
+                                continue;
+                        }
+                        var pseudos = ['::before', '::after'];
+                        var p;
+                        for (p = 0; p < pseudos.length; p++) {
+                                var pseudo = pseudos[p];
+                                var cs;
+                                try {
+                                        cs = view.getComputedStyle(el, pseudo);
+                                } catch (error2) {
+                                        continue;
+                                }
+                                var text = pseudoText(cs.content);
+                                if (!needsRealGlyph(text, cs.fontFamily)) {
+                                        continue;
+                                }
+                                // Every computed property, so borders, min-width, flex and float
+                                // match the pseudo-element exactly.
+                                var style = [];
+                                var c;
+                                for (c = 0; c < cs.length; c++) {
+                                        var prop = cs.item(c);
+                                        if (prop !== 'content') {
+                                                style.push([prop, cs.getPropertyValue(prop)]);
+                                        }
+                                }
+                                var id = el.getAttribute(GLYPH_ATTR);
+                                if (!id) {
+                                        id = String(marked.length);
+                                        el.setAttribute(GLYPH_ATTR, id);
+                                        marked.push(el);
+                                        glyphs[id] = {};
+                                }
+                                glyphs[id][pseudo] = { text: text, style: style };
+                                var fam = cs.fontFamily;
+                                if (fam && !seenFamily[fam]) {
+                                        seenFamily[fam] = true;
+                                        families.push(fam);
+                                }
+                        }
+                }
+                if (!marked.length) {
+                        return none;
+                }
+
+                function makeGlyph(cloneDoc, entry) {
+                        var span = cloneDoc.createElement('span');
+                        span.setAttribute('aria-hidden', 'true');
+                        entry.style.forEach(function (pair) {
+                                span.style.setProperty(pair[0], pair[1]);
+                        });
+                        span.textContent = entry.text;
+                        return span;
+                }
+
+                return {
+                        // Swap the pseudo-elements for real glyphs inside the cloned tree.
+                        apply: function (cloned) {
+                                if (!cloned || cloned.nodeType !== 1 || !cloned.querySelectorAll) {
+                                        return;
+                                }
+                                var cloneDoc = cloned.ownerDocument || doc;
+                                var nodes = Array.prototype.slice.call(cloned.querySelectorAll('[' + GLYPH_ATTR + ']'));
+                                if (cloned.hasAttribute(GLYPH_ATTR)) {
+                                        nodes.unshift(cloned);
+                                }
+                                if (!nodes.length) {
+                                        return;
+                                }
+                                nodes.forEach(function (host) {
+                                        var entry = glyphs[host.getAttribute(GLYPH_ATTR)];
+                                        host.removeAttribute(GLYPH_ATTR);
+                                        if (!entry) {
+                                                return;
+                                        }
+                                        if (entry['::before']) {
+                                                host.insertBefore(makeGlyph(cloneDoc, entry['::before']), host.firstChild);
+                                                host.classList.add('stillframe-icon-before');
+                                        }
+                                        if (entry['::after']) {
+                                                host.appendChild(makeGlyph(cloneDoc, entry['::after']));
+                                                host.classList.add('stillframe-icon-after');
+                                        }
+                                });
+                                var styleTag = cloneDoc.createElement('style');
+                                styleTag.textContent = '.stillframe-icon-before::before{content:none!important;}.stillframe-icon-after::after{content:none!important;}';
+                                (cloned.querySelector('body') || cloned).appendChild(styleTag);
+                        },
+                        undo: function () {
+                                marked.forEach(function (el) {
+                                        el.removeAttribute(GLYPH_ATTR);
+                                });
+                        },
+                        families: families
+                };
+        }
+
+        function loadIconFonts(view, families) {
+                var fonts = view && view.document && view.document.fonts;
+                if (!fonts || typeof fonts.load !== 'function' || !families || !families.length) {
+                        return Promise.resolve();
+                }
+                return Promise.all(families.map(function (family) {
+                        return fonts.load('20px ' + family).catch(function () {
+                                return null;
+                        });
+                })).then(function () {
+                        return fonts.ready;
+                }).catch(function () {
+                        return null;
+                });
+        }
+
         function renderCanvas(node, scale, bounds, view) {
                 view = view || window;
@@ -1558 +2110 @@
                 }
                 var crop = bounds && bounds.crop ? bounds.crop : null;
-                var unmark = crop ? markElements(view.document, crop) : function () {};
+                var unmarkCrop = crop ? markElements(view.document, crop) : function () {};
+                var unmarkLines = function () {};
+                try {
+                        unmarkLines = markSingleLines(view.document, crop);
+                } catch (lineError) {
+                        unmarkLines = function () {};
+                }
+                var unmark = function () {
+                        unmarkCrop();
+                        unmarkLines();
+                };
+                var pinned = { undo: function () {}, apply: function () {}, families: [] };
+                try {
+                        pinned = pinIconFonts(node);
+                } catch (pinError) {
+                        pinned = { undo: function () {}, apply: function () {}, families: [] };
+                }
                 try {
                         var options = {
@@ -1573 +2141 @@
                                 onCloneNode: function (cloned) {
                                         try {
+                                                pinned.apply(cloned);
+                                        } catch (glyphError) {
+                                                // The shot still renders; icons may show as slashes.
+                                        }
+                                        try {
                                                 prepareClone(cloned, view, crop);
                                         } catch (cloneError) {
@@ -1583 +2156 @@
                                 options.height = bounds.height;
                         }
-                        return window.modernScreenshot.domToCanvas(node, options).then(function (canvas) {
+                        var nodeView = (node.ownerDocument && node.ownerDocument.defaultView) || view;
+                        return loadIconFonts(nodeView, pinned.families).then(function () {
+                                return window.modernScreenshot.domToCanvas(node, options);
+                        }).then(function (canvas) {
+                                pinned.undo();
                                 unmark();
                                 return canvas;
                         }, function (error) {
+                                pinned.undo();
                                 unmark();
                                 throw error;
                         });
                 } catch (error) {
+                        pinned.undo();
                         unmark();
                         if (error && !error.code) {
@@ -1749 +2328 @@
                 var token = session;
 
-                function compatCapture() {
+                function compatNote(error) {
+                        var name = error && error.name ? String(error.name) : '';
+                        var message = error && error.message ? String(error.message) : '';
+                        if (name === 'NotAllowedError' || name === 'AbortError') {
+                                return tr('exactCancelled', 'Sharing was cancelled, so this shot was redrawn from the page. The next capture will ask to share the tab again.');
+                        }
+                        if (message === 'surface') {
+                                return tr('exactSurface', 'That share was not this browser tab, so this shot was redrawn from the page. The next capture will ask again.');
+                        }
+                        if (message === 'mismatch') {
+                                return tr('exactMismatch', 'The tab capture did not match this window, so this shot was redrawn from the page. The next capture will ask again.');
+                        }
+                        return tr('exactFallback', 'Pixel-perfect capture did not finish, so this shot was redrawn from the page. The next capture will ask again.');
+                }
+
+                function compatCapture(note) {
                         var work = getViewCanvas().then(function (canvas) {
                                 return cropCanvasToBlob(canvas, rect, viewShot.scale);
                         });
+                        if (note) {
+                                rect.compatNote = note;
+                        }
                         openResult(rect, work, token);
                         destroySnip();
@@ -1768 +2365 @@
                                 openResult(rect, Promise.resolve(result.blob), token);
                                 destroySnip();
-                        }).catch(function () {
+                        }).catch(function (error) {
                                 if (hideEl) {
                                         hideEl.style.visibility = '';
@@ -1776 +2373 @@
                                         return;
                                 }
-                                // Denied or unsupported: use the compatible DOM render for the rest of this page view.
-                                exact.failed = true;
+                                // One failure does not turn pixel-perfect off. The next capture asks again.
                                 stopExact();
-                                compatCapture();
-                        });
+                                compatCapture(compatNote(error));
+                        });
+                        return;
+                }
+                if (exactPref()) {
+                        compatCapture(tr('exactUnsupported', 'This browser cannot share the tab, so this shot was redrawn from the page.'));
                         return;
                 }
@@ -2116 +2716 @@
         }
 
-        // Drop originals that are no longer in the list, and the oldest ones past the size cap.
-        function recentPrune(list) {
+        // A blob can land in IndexedDB before its card is in the list. Don't delete it in that window.
+        var RECENT_GRACE_MS = 120000;
+
+        function commitRecentList(build) {
+                var next = [];
+                var pass;
+                for (pass = 0; pass < 3; pass++) {
+                        next = build(getRecentCaptures().slice());
+                        if (!Array.isArray(next)) {
+                                next = [];
+                        }
+                        if (next.length > RECENT_MAX) {
+                                next = next.slice(0, RECENT_MAX);
+                        }
+                        while (next.length) {
+                                try {
+                                        window.localStorage.setItem(RECENT_KEY, JSON.stringify(next));
+                                        break;
+                                } catch (error) {
+                                        next.pop();
+                                }
+                        }
+                        if (!next.length) {
+                                try {
+                                        window.localStorage.removeItem(RECENT_KEY);
+                                } catch (removeError) {
+                                        return [];
+                                }
+                        }
+                }
+                return getRecentCaptures();
+        }
+
+        function bitmapScale(cssWidth, pixelWidth, fallback) {
+                var css = Number(cssWidth);
+                var pixels = Number(pixelWidth);
+                if (pixels > 0 && css > 0) {
+                        var ratio = pixels / css;
+                        if (ratio >= 0.5 && ratio <= 6) {
+                                return Math.round(ratio * 100) / 100;
+                        }
+                }
+                var scale = Number(fallback);
+                if (isFinite(scale) && scale > 0) {
+                        return Math.round(scale * 100) / 100;
+                }
+                return 1;
+        }
+
+        function recentScaleOf(item) {
+                return bitmapScale(item && item.width, item && item.pixelWidth, item && item.scale);
+        }
+
+        function cleanRecentTitle(title, url) {
+                var cleanTitle = title || '';
+                if (!cleanTitle || cleanTitle.indexOf('http') === 0) {
+                        try {
+                                cleanTitle = new URL(url || window.location.href).pathname || 'Screenshot';
+                                if (cleanTitle === '/') {
+                                        cleanTitle = 'Home Page';
+                                }
+                        } catch (error) {
+                                cleanTitle = 'Screenshot';
+                        }
+                }
+                return cleanTitle;
+        }
+
+        // Drop originals that fell off the list, and the oldest ones past the size cap.
+        // Re-reads the list inside IndexedDB so a second capture is not deleted first.
+        function recentPrune() {
                 return idbRun('readwrite', function (store) {
                         var all = store.getAll();
@@ -2123 +2792 @@
                                 var byId = {};
                                 (all.result || []).forEach(function (row) {
-                                        byId[row.id] = row;
-                                });
-                                var total = 0;
-                                var keep = {};
-                                list.forEach(function (item) {
-                                        var row = byId[item.id];
-                                        if (row && total + (row.size || 0) <= RECENT_BYTES) {
-                                                total += row.size || 0;
-                                                keep[item.id] = true;
+                                        if (row && row.id) {
+                                                byId[row.id] = row;
                                         }
                                 });
+                                var list = getRecentCaptures();
+                                var now = Date.now();
+                                var total = 0;
+                                var over = false;
+                                var keep = {};
+                                var evict = {};
+                                list.forEach(function (item) {
+                                        if (!item || !item.id) {
+                                                return;
+                                        }
+                                        var row = byId[item.id];
+                                        var size = row && row.size ? row.size : (item.size || 0);
+                                        if (!over && total + size <= RECENT_BYTES) {
+                                                total += size;
+                                                keep[item.id] = true;
+                                                return;
+                                        }
+                                        over = true;
+                                        evict[item.id] = true;
+                                });
                                 Object.keys(byId).forEach(function (id) {
-                                        if (!keep[id]) {
+                                        if (keep[id]) {
+                                                return;
+                                        }
+                                        if (evict[id]) {
                                                 store.delete(id);
+                                                return;
                                         }
+                                        var row = byId[id];
+                                        if (row && row.timestamp && (now - row.timestamp) < RECENT_GRACE_MS) {
+                                                return;
+                                        }
+                                        store.delete(id);
                                 });
+                                if (over) {
+                                        commitRecentList(function (latest) {
+                                                return latest.filter(function (item) {
+                                                        return item && !evict[item.id];
+                                                });
+                                        });
+                                }
                         };
                         return all;
@@ -2200 +2898 @@
         }
 
-        function saveCaptureToRecent(blob, width, height, title, url) {
+        function saveCaptureToRecent(blob, width, height, title, url, scale) {
                 if (!blob || !width || !height) return;
                 var id = 'sf_' + Date.now() + '_' + Math.random().toString(36).substr(2, 5);
+                var storedScale = Number(scale);
+                if (!isFinite(storedScale) || storedScale <= 0) {
+                        storedScale = 1;
+                }
+                storedScale = Math.round(storedScale * 100) / 100;
+                var item = {
+                        id: id,
+                        title: cleanRecentTitle(title, url),
+                        url: url || window.location.href,
+                        width: width,
+                        height: height,
+                        scale: storedScale,
+                        timestamp: Date.now(),
+                        size: blob.size,
+                        thumb: ''
+                };
                 recentBlobs[id] = blob;
+                // The card is in the list before the thumbnail or the prune, so a second capture cannot be deleted first.
+                commitRecentList(function (list) {
+                        var next = list.filter(function (entry) {
+                                return entry && entry.id !== id;
+                        });
+                        next.unshift(item);
+                        return next;
+                });
                 idbRun('readwrite', function (store) {
-                        return store.put({ id: id, blob: blob, size: blob.size, timestamp: Date.now() });
+                        return store.put({ id: id, blob: blob, size: blob.size, timestamp: item.timestamp });
                 }).catch(function () {
                         return null;
@@ -2222 +2944 @@
                                 ctx.drawImage(img, 0, 0, thumbCanvas.width, thumbCanvas.height);
                                 var thumbData = thumbCanvas.toDataURL('image/jpeg', 0.85);
-
-                                var cleanTitle = title || '';
-                                if (!cleanTitle || cleanTitle.indexOf('http') === 0) {
-                                        try {
-                                                cleanTitle = new URL(url || window.location.href).pathname || 'Screenshot';
-                                                if (cleanTitle === '/') cleanTitle = 'Home Page';
-                                        } catch (e) {
-                                                cleanTitle = 'Screenshot';
-                                        }
-                                }
-
-                                var item = {
-                                        id: id,
-                                        title: cleanTitle,
-                                        url: url || window.location.href,
-                                        width: width,
-                                        height: height,
-                                        timestamp: Date.now(),
-                                        size: blob.size,
-                                        pixelWidth: img.naturalWidth || width,
-                                        thumb: thumbData
-                                };
-
-                                var list = getRecentCaptures();
-                                list.unshift(item);
-                                if (list.length > RECENT_MAX) list = list.slice(0, RECENT_MAX);
-                                saveRecentList(list);
-                                recentPrune(list);
+                                var pixelWidth = img.naturalWidth || width;
+                                var pixelHeight = img.naturalHeight || height;
+                                var usedScale = bitmapScale(width, pixelWidth, storedScale);
+                                commitRecentList(function (list) {
+                                        list.forEach(function (entry) {
+                                                if (!entry || entry.id !== id) {
+                                                        return;
+                                                }
+                                                entry.thumb = thumbData;
+                                                entry.pixelWidth = pixelWidth;
+                                                entry.pixelHeight = pixelHeight;
+                                                entry.scale = usedScale;
+                                                entry.height = Math.max(1, Math.round(pixelHeight / usedScale));
+                                                entry.size = blob.size;
+                                        });
+                                        // A missing card was removed or pruned. Do not put it back onto a deleted file.
+                                        return list;
+                                });
+                                showRecentThumb(id, thumbData);
+                                recentPrune();
                         } catch (err) {
                                 console.warn('Stillframe recent save error', err);
@@ -2258 +2972 @@
                 img.onerror = function () {
                         URL.revokeObjectURL(objUrl);
+                        recentPrune();
                 };
                 img.src = objUrl;
         }
 
+        function unsavedMarks() {
+                if (editor && typeof editor.hasMarks === 'function' && editor.hasMarks()) {
+                        return true;
+                }
+                if (!resultDevices) {
+                        return false;
+                }
+                var i;
+                for (i = 0; i < resultDevices.length; i++) {
+                        var marks = resultDevices[i] && resultDevices[i].marks;
+                        if (marks && marks.length) {
+                                return true;
+                        }
+                }
+                return false;
+        }
+
         function openRecentCaptureInEditor(item) {
+                if (!item) {
+                        return;
+                }
+                if (unsavedMarks()) {
+                        var proceed = window.confirm(tr('discardMarks', 'This capture has unsaved marks. Opening another screenshot will discard them. Continue?'));
+                        if (!proceed) {
+                                return;
+                        }
+                }
                 var token = ++session;
                 var rect = {
@@ -2269 +3010 @@
                         width: item.width || 1440,
                         height: item.height || 900,
-                        scale: 1,
+                        scale: recentScaleOf(item),
                         url: item.url || window.location.href,
                         fromRecent: true
@@ -2325 +3066 @@
         }
 
+        function showRecentThumb(id, thumbData) {
+                if (!id || !thumbData) {
+                        return;
+                }
+                var cards = document.querySelectorAll('.stillframe-recent-card[data-id="' + id + '"]');
+                Array.prototype.forEach.call(cards, function (card) {
+                        var wrap = card.querySelector('.stillframe-recent-thumbwrap');
+                        if (!wrap) {
+                                return;
+                        }
+                        var img = wrap.querySelector('img');
+                        if (img) {
+                                img.src = thumbData;
+                                return;
+                        }
+                        wrap.appendChild(element('img', {
+                                className: 'stillframe-recent-thumb',
+                                alt: '',
+                                src: thumbData
+                        }));
+                });
+        }
+
         function renderRecentList(container, onSelect, onAction) {
                 while (container.firstChild) {
@@ -2340 +3104 @@
                 var listWrap = element('div', { className: 'stillframe-recent-list' });
                 list.forEach(function (item) {
-                        var card = element('div', { className: 'stillframe-recent-card' });
+                        var card = element('div', { className: 'stillframe-recent-card', 'data-id': item.id || '' });
                         var thumbWrap = element('div', { className: 'stillframe-recent-thumbwrap' });
                         if (item.thumb) {
@@ -2588 +3352 @@
                 sizeGroup.appendChild(sizeSlider);
 
-                var textOptGroup = element('div', {
-                        className: 'stillframe-result__text-opts',
-                        role: 'group',
-                        'aria-label': 'Text options'
-                });
-                textOptGroup.style.display = 'none';
-
-                var fontSelect = element('select', { className: 'stillframe-prop__select', 'aria-label': 'Font family', title: 'Font family' });
-                FONT_CHOICES.forEach(function (choice) {
-                        fontSelect.appendChild(element('option', { value: choice[0], text: choice[1] }));
-                });
-                fontSelect.value = currentFont || 'sans';
-                fontSelect.addEventListener('change', function () {
-                        currentFont = fontSelect.value;
-                        if (editor && editor.setFont) {
-                                editor.setFont(currentFont);
-                        }
-                });
-                textOptGroup.appendChild(fontSelect);
-
-                var boldBtn = element('button', {
-                        type: 'button',
-                        className: 'stillframe-prop__toggle',
-                        'aria-pressed': currentBold ? 'true' : 'false',
-                        text: 'B',
-                        title: 'Bold (toggle)'
-                });
-                boldBtn.addEventListener('click', function () {
-                        currentBold = boldBtn.getAttribute('aria-pressed') !== 'true';
-                        boldBtn.setAttribute('aria-pressed', currentBold ? 'true' : 'false');
-                        if (editor && editor.setBold) {
-                                editor.setBold(currentBold);
-                        }
-                });
-                textOptGroup.appendChild(boldBtn);
-
                 var shapeOptGroup = element('div', {
                         className: 'stillframe-result__shape-opts',
@@ -2687 +3415 @@
                         if (isText) {
                                 currentSliderMode = 'text';
-                                textOptGroup.style.display = 'inline-flex';
                                 shapeOptGroup.style.display = 'none';
                                 sizeSlider.min = '12';
@@ -2698 +3425 @@
                                 sizeSlider.title = 'Text size (' + sizeSlider.value + 'px)';
                                 sizeSlider.setAttribute('aria-label', 'Text size');
-                                if (info && info.font) {
-                                        currentFont = info.font;
-                                        fontSelect.value = currentFont;
-                                }
-                                if (info && typeof info.bold === 'boolean') {
-                                        currentBold = info.bold;
-                                        boldBtn.setAttribute('aria-pressed', currentBold ? 'true' : 'false');
-                                }
                         } else if (isShape) {
                                 currentSliderMode = 'stroke';
-                                textOptGroup.style.display = 'none';
                                 shapeOptGroup.style.display = 'inline-flex';
                                 sizeSlider.min = '1';
@@ -2726 +3444 @@
                         } else {
                                 currentSliderMode = 'stroke';
-                                textOptGroup.style.display = 'none';
                                 shapeOptGroup.style.display = 'none';
                                 sizeSlider.min = '1';
@@ -2768 +3485 @@
                 var toolsWrap = element('div', { className: 'stillframe-result__editing' });
                 toolsWrap.appendChild(markGroup);
+                toolsWrap.appendChild(historyGroup);
+                toolsWrap.appendChild(shapeOptGroup);
                 toolsWrap.appendChild(colorGroup);
                 toolsWrap.appendChild(sizeGroup);
-                toolsWrap.appendChild(textOptGroup);
-                toolsWrap.appendChild(shapeOptGroup);
-                toolsWrap.appendChild(historyGroup);
 
                 var saveGroup = element('div', { className: 'stillframe-result__actions' });
@@ -2859 +3575 @@
                 var hasMulti = multiOptions && Array.isArray(multiOptions.devices) && multiOptions.devices.length > 1;
                 var devicesList = (multiOptions && multiOptions.devices) || [];
+                resultDevices = devicesList.length ? devicesList : null;
                 var currentDeviceId = multiOptions && multiOptions.activeDeviceId ? multiOptions.activeDeviceId : (devicesList[0] ? devicesList[0].id : '');
                 var currentDevice = devicesList.find(function (d) { return d.id === currentDeviceId; }) || devicesList[0] || null;
@@ -3256 +3973 @@
                                 setStatus('');
                                 flushPending();
+                                if (rect && rect.compatNote) {
+                                        setStatus(rect.compatNote);
+                                }
                                 if (captured.blob && !(rect && rect.fromRecent)) {
-                                        saveCaptureToRecent(captured.blob, captured.width, captured.height, document.title, captured.url);
+                                        saveCaptureToRecent(captured.blob, captured.width, captured.height, document.title, captured.url, captured.scale);
                                 }
                         }).catch(function (error) {
@@ -3271 +3991 @@
                                         text: error && error.code === 'library' ? text('libraryMissing') : text('captureFailed')
                                 }));
-                                setStatus('');
+                                setStatus(rect && rect.compatNote ? rect.compatNote : '');
                                 if (dialog) {
                                         dialog.setAttribute('aria-busy', 'false');
@@ -3286 +4006 @@
                                 if (dev.id === currentDeviceId) {
                                         captured.blob = blob;
+                                        captured.scale = dev.scale || captured.scale || 1;
                                         captured.width = dev.width;
                                         captured.height = dev.height;
@@ -3342 +4063 @@
 
         function openMultiDirectCapture(sourceUrl, selectedDevices, scale, hideAdminBar, isFullPage) {
+                sourceUrl = scrubCaptureUrl(sourceUrl);
                 var token = ++session;
                 var scaleVal = scale || 1;
@@ -3406 +4128 @@
                                                 dev.image = img;
                                                 dev.status = 'ready';
-                                                dev.height = Math.round(img.naturalHeight / scaleVal);
+                                                dev.scale = bitmapScale(dev.width, img.naturalWidth, scaleVal);
+                                                dev.height = Math.max(1, Math.round((img.naturalHeight || 1) / dev.scale));
                                                 controller.onDeviceReady(dev, blob, img);
-                                                saveCaptureToRecent(blob, dev.width, dev.height, document.title + ' (' + dev.label + ')', sourceUrl);
+                                                saveCaptureToRecent(blob, dev.width, dev.height, document.title + ' (' + dev.label + ')', sourceUrl, dev.scale);
                                         });
                                 }).catch(function (err) {
@@ -3563 +4286 @@
                         sel = { x: 0, y: 0, width: sizeNow.width, height: sizeNow.height };
                         showSelection(sel);
-                        scheduleShot(IDLE_BEFORE_RENDER_MS);
+                        // Start the redraw now, while the selection is on screen, so Capture
+                        // does not wait for the whole page to be built from scratch.
+                        if (!viewShot.canvas && !viewShot.work) {
+                                startViewShot().catch(function () {
+                                        return null;
+                                });
+                        }
                 });
 
@@ -3710 +4439 @@
                 var engineText = element('span', { className: 'sfd-engine__text' });
                 engineText.appendChild(element('b', { text: tr('engineTitle', 'Pixel-perfect capture') }));
-                engineText.appendChild(element('small', { text: tr('engineHelp', 'Your browser asks to share this tab, so the screenshot matches the screen exactly. Nothing is uploaded.') }));
+                engineText.appendChild(element('small', { text: tr('engineHelp', 'Area, Window, and Full screen on this tab in Chrome or Edge. The browser asks to share the tab, and nothing is uploaded. Other browsers, Direct Page, and Tools redraw the page.') }));
                 engineLabel.appendChild(engineCb);
                 engineLabel.appendChild(element('span', { className: 'stillframe-hub-toggle__track' }));
@@ -4015 +4744 @@
                 bar.appendChild(windowModeButton);
                 bar.appendChild(fullButton);
+                bar.appendChild(devWrap);
                 bar.appendChild(directWrap);
                 bar.appendChild(recentWrap);
@@ -4434 +5164 @@
 
         function captureInFrame(url, width, scale, isCancelled, options) {
+                url = scrubCaptureUrl(url);
                 options = options || {};
                 return new Promise(function (resolve, reject) {
@@ -5032 +5763 @@
                 }
                 captured = null;
+                resultDevices = null;
                 compactPanel = false;
                 resultReady = false;

stillframe/trunk/assets/js/stillframe-tools.js

@@ -2 +2 @@
         'use strict';
 
-        var pageSelect = document.getElementById('stillframe-target-page');
-        var customUrlWrap = document.getElementById('stillframe-custom-url-wrap');
-        var customUrlInput = document.getElementById('stillframe-custom-url');
+        var pickerMount = document.getElementById('stillframe-target-page');
+        var toolsData = window.StillframeToolsData || {};
+        var pagePicker = null;
         var startBtn = document.getElementById('stillframe-start-multicapture');
 
@@ -41 +41 @@
         });
 
-        if (pageSelect) {
-                pageSelect.addEventListener('change', function () {
-                        var isCustom = pageSelect.value === '__custom__';
-                        if (customUrlWrap) {
-                                customUrlWrap.hidden = !isCustom;
-                                customUrlWrap.style.display = isCustom ? 'block' : 'none';
-                        }
-                        if (isCustom && customUrlInput) {
-                                customUrlInput.focus();
-                        }
+        if (pickerMount && window.StillframeCapture && typeof window.StillframeCapture.createPagePicker === 'function') {
+                pagePicker = window.StillframeCapture.createPagePicker({
+                        pages: toolsData.pages,
+                        homeUrl: toolsData.homeUrl || ''
                 });
+                pickerMount.appendChild(pagePicker.root);
         }
 
         function getTargetUrl() {
-                if (!pageSelect) {
-                        return '';
-                }
-                if (pageSelect.value === '__custom__') {
-                        return customUrlInput ? customUrlInput.value.trim() : '';
-                }
-                return pageSelect.value.trim();
+                return pagePicker ? pagePicker.getValue() : '';
         }
 
@@ -86 +75 @@
         // The capture opens the same pop-up editor as the top-bar capture,
         // with every chosen device ready to switch between.
+        // Tools always redraws the page in an iframe. Pixel-perfect tab capture
+        // is the admin-bar Area, Window, and Full screen control, not this screen.
+        var errorNode = null;
+
+        function showError(message) {
+                if (!errorNode) {
+                        errorNode = document.createElement('p');
+                        errorNode.className = 'stillframe-tools-error';
+                        errorNode.setAttribute('role', 'alert');
+                        errorNode.style.cssText = 'margin:8px 0 0;color:#b42318;font-size:13px;font-weight:600';
+                        if (startBtn && startBtn.parentNode) {
+                                startBtn.parentNode.insertBefore(errorNode, startBtn);
+                        }
+                }
+                errorNode.textContent = message;
+                errorNode.hidden = !message;
+        }
+
         function startCapture() {
+                showError('');
                 var url = getTargetUrl();
                 if (!url) {
-                        window.alert('Please select a target page or enter a URL to capture.');
-                        if (customUrlInput && pageSelect && pageSelect.value === '__custom__') {
-                                customUrlInput.focus();
+                        showError('Please select a target page or enter a URL to capture.');
+                        if (pagePicker) {
+                                pagePicker.focusCustom();
                         }
                         return;
@@ -98 +106 @@
                 var devices = getSelectedDevices();
                 if (!devices.length) {
-                        window.alert('Please select at least one device to capture.');
+                        showError('Please select at least one device to capture.');
                         return;
                 }
@@ -104 +112 @@
                 var engine = window.StillframeCapture || {};
                 if (typeof engine.openMultiCapture !== 'function') {
-                        window.alert('Stillframe is still loading. Please try again in a moment.');
+                        showError('Stillframe is still loading. Please try again in a moment.');
                         return;
                 }

stillframe/trunk/includes/class-stillframe-asset-loader.php

@@ -20 +20 @@
          * @var string
          */
-        public const PAGES_TRANSIENT = 'stillframe_site_pages';
+        public const PAGES_TRANSIENT = 'stillframe_site_pages_v2';
 
         /**
          * Query arguments that must not be replayed inside the capture frame.
          *
+         * `action` is not in this list. Screens such as post.php?action=edit need it
+         * to stay on the same screen. Mutating values are removed separately.
+         *
          * @var string[]
          */
         public const STRIPPED_QUERY_ARGS = array(
-                'action',
                 '_wpnonce',
                 'nonce',
@@ -36 +38 @@
 
         /**
+         * Admin `action` values that change data when loaded with GET.
+         *
+         * Read-only values such as `edit` are kept so the capture iframe opens the
+         * screen the user was on.
+         *
+         * @var string[]
+         */
+        public const MUTATING_ACTIONS = array(
+                'trash',
+                'untrash',
+                'delete',
+                'delete-all',
+                'editpost',
+                'postajaxpost',
+                'post-quickdraft-save',
+                'deletecomment',
+                'trashcomment',
+                'untrashcomment',
+                'spamcomment',
+                'unspamcomment',
+                'approvecomment',
+                'unapprovecomment',
+                'approve',
+                'unapprove',
+                'spam',
+                'unspam',
+                'dim-comment',
+                'activate',
+                'deactivate',
+                'activate-selected',
+                'deactivate-selected',
+                'update-selected',
+                'delete-selected',
+                'enable-auto-update',
+                'disable-auto-update',
+                'error_scrape',
+                'resume',
+                'upgrade-plugin',
+                'upgrade-theme',
+                'do-plugin-upgrade',
+                'do-theme-upgrade',
+                'do-core-upgrade',
+                'do-translation-upgrade',
+                'install-plugin',
+                'install-theme',
+                'upload-plugin',
+                'upload-theme',
+                'logout',
+                'remove',
+                'deleteblog',
+                'spamblog',
+        );
+
+        /**
          * Enqueue the admin bar script and its small style, for administrators only.
          *
@@ -46 +102 @@
 
                 $style_url = false;
-                wp_register_style( 'stillframe-admin-bar', $style_url, array(), STILLFRAME_VERSION );
+                wp_register_style( 'stillframe-admin-bar', $style_url, array(), STILLFRAME_ASSET_VER );
                 wp_enqueue_style( 'stillframe-admin-bar' );
                 wp_add_inline_style( 'stillframe-admin-bar', $this->admin_bar_css() );
@@ -56 +112 @@
                         $base . 'assets/css/stillframe-capture-panel.css',
                         array(),
-                        STILLFRAME_VERSION
-                );
-
-                wp_register_script(
-                        'stillframe-annotation-editor',
-                        $base . 'assets/js/stillframe-annotation-editor.js',
-                        array(),
-                        STILLFRAME_VERSION,
-                        true
-                );
+                        STILLFRAME_ASSET_VER
+                );
+
+                /**
+                 * Filters whether the Fabric.js annotation editor is used. Return false for the legacy editor.
+                 *
+                 * @param bool $use_fabric Whether to use the Fabric.js editor.
+                 */
+                if ( apply_filters( 'stillframe_use_fabric_editor', true ) ) {
+                        wp_register_script(
+                                'stillframe-fabric',
+                                $base . 'assets/js/vendor/fabric.min.js',
+                                array(),
+                                '6.7.1',
+                                true
+                        );
+                        wp_register_script(
+                                'stillframe-annotation-editor',
+                                $base . 'assets/js/stillframe-annotation-editor-v2.js',
+                                array( 'stillframe-fabric' ),
+                                STILLFRAME_ASSET_VER,
+                                true
+                        );
+                } else {
+                        wp_register_script(
+                                'stillframe-annotation-editor',
+                                $base . 'assets/js/stillframe-annotation-editor.js',
+                                array(),
+                                STILLFRAME_ASSET_VER,
+                                true
+                        );
+                }
 
                 wp_register_script(
@@ -71 +149 @@
                         $base . 'assets/js/stillframe-capture-panel.js',
                         array( 'stillframe-annotation-editor' ),
-                        STILLFRAME_VERSION,
+                        STILLFRAME_ASSET_VER,
                         true
                 );
@@ -79 +157 @@
                         $base . 'assets/js/stillframe-admin-bar.js',
                         array(),
-                        STILLFRAME_VERSION,
+                        STILLFRAME_ASSET_VER,
                         true
                 );
@@ -86 +164 @@
                         'pluginUrl'    => $base,
                         'version'      => STILLFRAME_VERSION,
+                        'assetVer'     => STILLFRAME_ASSET_VER,
+                        'useFabric'    => apply_filters( 'stillframe_use_fabric_editor', true ),
                         'currentUrl'   => $this->current_screen_url(),
                         'presets'      => $this->device_width_presets(),
@@ -97 +177 @@
                         'maxWidth'     => 2560,
                         'homeUrl'      => home_url( '/' ),
-                        'sitePages'    => $this->site_pages(),
+                        'sitePages'    => self::site_pages(),
                         'toolsUrl'     => admin_url( 'tools.php?page=stillframe' ),
-                        'stripArgs'    => self::STRIPPED_QUERY_ARGS,
-                        'i18n'         => $this->script_strings(),
+                        'stripArgs'       => self::STRIPPED_QUERY_ARGS,
+                        'mutatingActions' => self::MUTATING_ACTIONS,
+                        'i18n'            => $this->script_strings(),
                 );
 
@@ -115 +196 @@
                                 $base . 'assets/css/stillframe-tools.css',
                                 array(),
-                                STILLFRAME_VERSION
+                                STILLFRAME_ASSET_VER
                         );
                         wp_enqueue_style( 'stillframe-tools' );
@@ -123 +204 @@
                                 $base . 'assets/js/vendor/modern-screenshot.js',
                                 array(),
-                                STILLFRAME_VERSION,
+                                STILLFRAME_ASSET_VER,
                                 true
                         );
@@ -134 +215 @@
                                 $base . 'assets/js/stillframe-tools.js',
                                 array( 'stillframe-capture-panel', 'stillframe-modern-screenshot' ),
-                                STILLFRAME_VERSION,
+                                STILLFRAME_ASSET_VER,
                                 true
                         );
@@ -145 +226 @@
                                 'mediaNonce' => wp_create_nonce( 'stillframe_save_media' ),
                                 'canUpload'  => current_user_can( 'upload_files' ),
-                                'pages'      => $this->site_pages(),
+                                'pages'      => self::site_pages(),
                         );
                         wp_add_inline_script(
@@ -164 +245 @@
 
         /**
-         * Retrieve a list of published pages and posts for quick selection.
-         *
-         * @return array<int, array{id: int, title: string, type: string, url: string}>
-         */
-        private function site_pages() {
+         * Retrieve published content from every public post type, for the page picker.
+         *
+         * Shared by the capture panel and the Tools screen.
+         *
+         * @return array<int, array{id: int, title: string, type: string, url: string, path: string, parent: string, status: string, home: bool}>
+         */
+        public static function site_pages() {
                 $cached = get_transient( self::PAGES_TRANSIENT );
                 if ( is_array( $cached ) ) {
@@ -174 +257 @@
                 }
 
-                $items = array();
+                $types = array_values( array_diff( get_post_types( array( 'public' => true ) ), array( 'attachment' ) ) );
+
+                /**
+                 * Filters the maximum number of items listed in the page picker.
+                 *
+                 * @param int $max Maximum number of items.
+                 */
+                $max = (int) apply_filters( 'stillframe_max_pages', 500 );
+                if ( $max < 1 ) {
+                        $max = 500;
+                }
+
                 $pages = get_posts(
                         array(
-                                'post_type'      => array( 'page', 'post' ),
+                                'post_type'      => $types,
                                 'post_status'    => 'publish',
-                                'posts_per_page' => 25,
-                                'orderby'        => 'title',
-                                'order'          => 'ASC',
+                                'posts_per_page' => $max,
+                                'no_found_rows'  => true,
+                                'orderby'        => array(
+                                        'type'       => 'ASC',
+                                        'menu_order' => 'ASC',
+                                        'title'      => 'ASC',
+                                ),
                         )
                 );
+
+                $home_ids = array_values(
+                        array_filter(
+                                array(
+                                        (int) get_option( 'page_on_front' ),
+                                        (int) get_option( 'page_for_posts' ),
+                                )
+                        )
+                );
+
+                foreach ( array_reverse( $home_ids ) as $home_id ) {
+                        $home_post = get_post( $home_id );
+                        if ( $home_post && 'publish' === $home_post->post_status ) {
+                                array_unshift( $pages, $home_post );
+                        }
+                }
+
+                $items = array();
+                $seen  = array();
                 foreach ( $pages as $p ) {
+                        if ( isset( $seen[ $p->ID ] ) ) {
+                                continue;
+                        }
+                        $seen[ $p->ID ] = true;
+
                         $permalink = get_permalink( $p );
-                        if ( $permalink ) {
-                                $items[] = array(
-                                        'id'    => (int) $p->ID,
-                                        'title' => $p->post_title ? $p->post_title : __( '(No title)', 'stillframe' ),
-                                        'type'  => $p->post_type,
-                                        'url'   => $permalink,
-                                );
-                        }
-                }
+                        if ( ! $permalink ) {
+                                continue;
+                        }
+
+                        $path    = wp_parse_url( $permalink, PHP_URL_PATH );
+                        $items[] = array(
+                                'id'     => (int) $p->ID,
+                                'title'  => $p->post_title ? $p->post_title : __( '(No title)', 'stillframe' ),
+                                'type'   => $p->post_type,
+                                'url'    => $permalink,
+                                'path'   => is_string( $path ) && '' !== $path ? $path : '/',
+                                'parent' => $p->post_parent ? get_the_title( $p->post_parent ) : '',
+                                'status' => $p->post_status,
+                                'home'   => in_array( (int) $p->ID, $home_ids, true ),
+                        );
+                }
+
                 set_transient( self::PAGES_TRANSIENT, $items, 12 * HOUR_IN_SECONDS );
                 return $items;
@@ -411 +541 @@
                         'recent'          => __( 'Recent', 'stillframe' ),
                         'devices'         => __( 'Devices', 'stillframe' ),
+                        'pickCurrent'           => __( 'Current screen', 'stillframe' ),
+                        'pickHome'              => __( 'Home', 'stillframe' ),
+                        'pickPages'             => __( 'Pages', 'stillframe' ),
+                        'pickPosts'             => __( 'Posts', 'stillframe' ),
+                        'pickCustomPlaceholder' => __( 'Custom URL: paste any address...', 'stillframe' ),
+                        'pickCustom'            => __( 'Custom URL', 'stillframe' ),
+                        'pickUse'               => __( 'Use', 'stillframe' ),
+                        'pickSearchPlaceholder' => __( 'Search pages or paste a URL from this site', 'stillframe' ),
+                        'pickSearch'            => __( 'Search pages', 'stillframe' ),
+                        'pickEnterUrl'          => __( 'Enter a URL below', 'stillframe' ),
+                        'pickNoMatch'           => __( 'No matching pages. Paste a full URL to use it.', 'stillframe' ),
+                        'directTitle'           => __( 'Capture a page', 'stillframe' ),
+                        'targetPage'            => __( 'Page', 'stillframe' ),
+                        'currentAdmin'          => __( 'Current Admin Screen', 'stillframe' ),
+                        'currentScreen'         => __( 'Current Screen', 'stillframe' ),
+                        'selectDevices'         => __( 'Devices', 'stillframe' ),
+                        'desktopOnly'           => __( 'Desktop Only', 'stillframe' ),
+                        'selectAll'             => __( 'Select All (3)', 'stillframe' ),
+                        'hideAdminBar'          => __( 'Hide the admin bar in the screenshot', 'stillframe' ),
+                        'resQuality'            => __( 'Quality', 'stillframe' ),
+                        'captureHeight'         => __( 'Height', 'stillframe' ),
+                        'res1'                  => __( '1x', 'stillframe' ),
+                        'res2'                  => __( '2x', 'stillframe' ),
+                        'res3'                  => __( '3x', 'stillframe' ),
+                        'res1Help'              => __( 'Same pixels as the screen. Smallest files.', 'stillframe' ),
+                        'res2Help'              => __( 'Sharp on high-density displays. Recommended.', 'stillframe' ),
+                        'res3Help'              => __( 'Maximum detail. Large files; very long pages may be reduced.', 'stillframe' ),
+                        'heightViewport'        => __( 'First screen', 'stillframe' ),
+                        'heightFull'            => __( 'Full Page', 'stillframe' ),
+                        'heightViewportHelp'    => __( 'Only the first screen (above the fold).', 'stillframe' ),
+                        'heightFullHelp'        => __( 'The entire page, top to bottom.', 'stillframe' ),
+                        'captureAll'            => __( 'Capture 3 devices', 'stillframe' ),
+                        'dev_desktop'           => __( 'Desktop', 'stillframe' ),
+                        'dev_tablet'            => __( 'iPad', 'stillframe' ),
+                        'dev_mobile'            => __( 'Mobile', 'stillframe' ),
+                        /* translators: 1: rows shown, 2: rows matched. */
+                        'pickShowing'          => __( 'Showing %1$d of %2$d. Keep typing to narrow the list.', 'stillframe' ),
+                        'pickChoose'           => __( 'Choose a page', 'stillframe' ),
+                        'captureNone'          => __( 'Capture', 'stillframe' ),
+                        'chooseDevice'         => __( 'Choose at least one device to capture.', 'stillframe' ),
+                        'pickUseUrl'           => __( 'Use this URL', 'stillframe' ),
+                        'engineTitle'          => __( 'Pixel-perfect capture', 'stillframe' ),
+                        'engineHelp'           => __( 'Area, Window, and Full screen on this tab in Chrome or Edge. The browser asks to share the tab, and nothing is uploaded. Other browsers, Direct Page, and Tools redraw the page.', 'stillframe' ),
+                        'exactUnsupported'     => __( 'This browser cannot share the tab, so this shot was redrawn from the page.', 'stillframe' ),
+                        'exactCancelled'       => __( 'Sharing was cancelled, so this shot was redrawn from the page. The next capture will ask to share the tab again.', 'stillframe' ),
+                        'exactSurface'         => __( 'That share was not this browser tab, so this shot was redrawn from the page. The next capture will ask again.', 'stillframe' ),
+                        'exactMismatch'        => __( 'The tab capture did not match this window, so this shot was redrawn from the page. The next capture will ask again.', 'stillframe' ),
+                        'exactFallback'        => __( 'Pixel-perfect capture did not finish, so this shot was redrawn from the page. The next capture will ask again.', 'stillframe' ),
+                        'discardMarks'         => __( 'This capture has unsaved marks. Opening another screenshot will discard them. Continue?', 'stillframe' ),
+                        /* translators: %d: number of devices. */
+                        'captureN'             => __( 'Capture %d devices', 'stillframe' ),
+                        /* translators: %s: device name. */
+                        'captureOne'           => __( 'Capture %s', 'stillframe' ),
                 );
         }
@@ -424 +607 @@
 
         /**
+         * Whether an admin `action` value changes data when the URL is opened.
+         *
+         * Empty and read-only values, including `edit`, are safe to keep.
+         *
+         * @param mixed $action Action value from the query string.
+         * @return bool
+         */
+        public static function action_is_mutating( $action ) {
+                if ( is_array( $action ) ) {
+                        foreach ( $action as $item ) {
+                                if ( self::action_is_mutating( $item ) ) {
+                                        return true;
+                                }
+                        }
+                        return false;
+                }
+
+                if ( ! is_string( $action ) || '' === $action ) {
+                        return false;
+                }
+
+                return in_array( strtolower( $action ), self::MUTATING_ACTIONS, true );
+        }
+
+        /**
+         * Remove nonces and state-changing actions from a capture URL.
+         *
+         * @param string $url Absolute or root-relative URL.
+         * @return string
+         */
+        public static function scrub_capture_url( $url ) {
+                $clean  = remove_query_arg( self::STRIPPED_QUERY_ARGS, $url );
+                $action = null;
+                $parts  = wp_parse_url( $clean );
+
+                if ( is_array( $parts ) && isset( $parts['query'] ) && is_string( $parts['query'] ) ) {
+                        $query = array();
+                        parse_str( $parts['query'], $query );
+                        if ( isset( $query['action'] ) ) {
+                                $action = $query['action'];
+                        }
+                }
+
+                if ( self::action_is_mutating( $action ) ) {
+                        $clean = remove_query_arg( 'action', $clean );
+                }
+
+                return $clean;
+        }
+
+        /**
          * URL of the screen being viewed, safe to load with a same-origin GET.
          *
-         * The host comes from home_url(). Query arguments that can replay a
-         * state-changing request are removed before the value ever reaches JavaScript.
+         * The host comes from home_url(). Nonces and state-changing actions are
+         * removed before the value ever reaches JavaScript. Read-only actions such
+         * as edit stay, so post.php?action=edit reloads the editor.
          *
          * @return string
@@ -434 +669 @@
                 $target = $this->request_path_and_query();
                 $origin = $this->home_origin();
-                $url    = remove_query_arg( self::STRIPPED_QUERY_ARGS, $origin . $target );
+                $url    = self::scrub_capture_url( $origin . $target );
                 $clean  = esc_url_raw( $url );
 

stillframe/trunk/includes/class-stillframe-media.php

@@ -11 +11 @@
 
 /**
- * Accepts one PNG from an administrator and stores it as an attachment.
+ * Accepts one PNG, JPEG or WebP image from an administrator and stores it as an attachment.
  */
 class Stillframe_Media {
@@ -25 +25 @@
 
         /**
-         * Store the uploaded PNG and return its attachment URL.
+         * Store the uploaded image and return its attachment URL.
          *
          * @return void
@@ -66 +66 @@
                 }
 
-                $name = $this->png_filename( wp_unslash( $file['name'] ) );
+                $name = $this->image_filename( wp_unslash( $file['name'] ) );
 
                 require_once ABSPATH . 'wp-admin/includes/file.php';
@@ -76 +76 @@
                         $name,
                         array(
-                                'png' => 'image/png',
+                                'png'      => 'image/png',
+                                'jpg|jpeg' => 'image/jpeg',
+                                'webp'     => 'image/webp',
                         )
                 );
 
-                if ( empty( $checked['ext'] ) || 'png' !== $checked['ext'] || 'image/png' !== $checked['type'] ) {
+                if ( empty( $checked['ext'] ) || empty( $checked['type'] ) || ! in_array( $checked['type'], array( 'image/png', 'image/jpeg', 'image/webp' ), true ) ) {
                         $this->fail();
                 }
@@ -91 +93 @@
                                 'test_form' => false,
                                 'mimes'     => array(
-                                        'png' => 'image/png',
+                                        'png'      => 'image/png',
+                                        'jpg|jpeg' => 'image/jpeg',
+                                        'webp'     => 'image/webp',
                                 ),
                         )
@@ -104 +108 @@
                 $attachment_id = wp_insert_attachment(
                         array(
-                                'post_mime_type' => 'image/png',
+                                'post_mime_type' => $checked['type'],
                                 'post_title'     => sanitize_text_field( pathinfo( $name, PATHINFO_FILENAME ) ),
                                 'post_content'   => '',
@@ -141 +145 @@
 
         /**
-         * Keep a safe PNG filename, or fall back to a generated one.
+         * Keep a safe image filename, or fall back to a generated one.
          *
          * @param mixed $raw Original upload name.
          * @return string
          */
-        private function png_filename( $raw ) {
+        private function image_filename( $raw ) {
                 $name = is_string( $raw ) ? sanitize_file_name( $raw ) : '';
                 $name = strtolower( $name );
 
-                if ( ! preg_match( '/^[a-z0-9][a-z0-9._-]*\.png$/', $name ) ) {
+                if ( ! preg_match( '/^[a-z0-9][a-z0-9._-]*\.(png|jpe?g|webp)$/', $name ) ) {
                         $name = 'stillframe-' . gmdate( 'Ymd-His' ) . '.png';
                 }

stillframe/trunk/includes/class-stillframe-plugin.php

@@ -66 +66 @@
                 add_action( 'save_post', array( 'Stillframe_Asset_Loader', 'flush_pages_cache' ) );
                 add_action( 'deleted_post', array( 'Stillframe_Asset_Loader', 'flush_pages_cache' ) );
+                add_action( 'trashed_post', array( 'Stillframe_Asset_Loader', 'flush_pages_cache' ) );
+                add_action( 'transition_post_status', array( 'Stillframe_Asset_Loader', 'flush_pages_cache' ) );
         }
 }

stillframe/trunk/includes/class-stillframe-tools-page.php

@@ -49 +49 @@
                 }
 
-                $home_url   = home_url( '/' );
-                $site_pages = get_posts(
-                        array(
-                                'post_type'      => array( 'page', 'post' ),
-                                'post_status'    => 'publish',
-                                'posts_per_page' => 30,
-                                'orderby'        => 'title',
-                                'order'          => 'ASC',
-                        )
-                );
                 ?>
                 <div class="wrap stillframe-tools-wrap">
@@ -72 +62 @@
                                         <div class="stillframe-field-group">
                                                 <div class="stillframe-field-group__header">
-                                                        <label class="stillframe-field-group__title" for="stillframe-target-page"><?php esc_html_e( 'Target Page', 'stillframe' ); ?></label>
+                                                        <span class="stillframe-field-group__title"><?php esc_html_e( 'Target Page', 'stillframe' ); ?></span>
                                                         <span class="stillframe-field-group__hint"><?php esc_html_e( 'Select a site page or enter a custom URL to capture.', 'stillframe' ); ?></span>
                                                 </div>
                                                 <div class="stillframe-page-picker">
-                                                        <select id="stillframe-target-page" class="stillframe-select">
-                                                                <option value="<?php echo esc_url( $home_url ); ?>">
-                                                                        <?php echo esc_html__( 'Home Page', 'stillframe' ) . ' (' . esc_html( $home_url ) . ')'; ?>
-                                                                </option>
-                                                                <?php foreach ( $site_pages as $page ) : ?>
-                                                                        <?php
-                                                                        $page_url = get_permalink( $page );
-                                                                        if ( ! $page_url || $page_url === $home_url ) {
-                                                                                continue;
-                                                                        }
-                                                                        $title = $page->post_title ? $page->post_title : __( '(No title)', 'stillframe' );
-                                                                        ?>
-                                                                        <option value="<?php echo esc_url( $page_url ); ?>">
-                                                                                <?php echo esc_html( $title . ' (' . ucfirst( $page->post_type ) . ')' ); ?>
-                                                                        </option>
-                                                                <?php endforeach; ?>
-                                                                <option value="__custom__"><?php esc_html_e( 'Custom URL...', 'stillframe' ); ?></option>
-                                                        </select>
-                                                        <div id="stillframe-custom-url-wrap" class="stillframe-custom-url-wrap" hidden style="display: none;">
-                                                                <input type="url" id="stillframe-custom-url" class="stillframe-input" placeholder="https://example.com/" />
-                                                        </div>
+                                                        <div id="stillframe-target-page"></div>
                                                 </div>
                                         </div>
@@ -174 +144 @@
                                                 <div class="stillframe-field-group__header">
                                                         <span class="stillframe-field-group__title"><?php esc_html_e( 'Capture Preferences', 'stillframe' ); ?></span>
-                                                        <span class="stillframe-field-group__hint"><?php esc_html_e( 'Configure resolution quality and display settings.', 'stillframe' ); ?></span>
+                                                        <span class="stillframe-field-group__hint"><?php esc_html_e( 'These shots redraw the page. Pixel-perfect capture is Area, Window, and Full screen from the admin bar.', 'stillframe' ); ?></span>
                                                 </div>
                                                 <div class="stillframe-settings-grid">

stillframe/trunk/languages/stillframe.pot

@@ -1 @@
-# Copyright (C) 2026 Stillframe
+# Copyright (C) 2026 Grafucci
 # This file is distributed under the GPL-2.0-or-later.
 msgid ""
 msgstr ""
-"Project-Id-Version: Stillframe 0.2.0\n"
-"Report-Msgid-Bugs-To: \n"
+"Project-Id-Version: Stillframe – Screenshot Capture & Markup 0.2.5\n"
+"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/stillframe\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -10 +10 @@
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2026-09-29T08:26:04+00:00\n"
+"POT-Creation-Date: 2026-10-09T14:33:09+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.12.0\n"
 "X-Domain: stillframe\n"
- 
+
 #. Plugin Name of the plugin
 #: stillframe.php
-#: includes/class-stillframe-admin-bar-menu.php:32
-msgid "Stillframe"
+msgid "Stillframe – Screenshot Capture & Markup"
+msgstr ""
+
+#. Plugin URI of the plugin
+#: stillframe.php
+msgid "https://grafucci.com/stillframe/"
 msgstr ""
 
 #. Description of the plugin
 #: stillframe.php
-msgid "Capture a plugin screen, a theme, or any page at phone, tablet, or a custom width, mark it up, and download a PNG."
+msgid "Capture multi-device screenshots (Desktop, Tablet, Mobile) or custom regions, mark them up with rich annotation tools, and export to PNG or Media Library."
 msgstr ""
 
@@ -31 +35 @@
 msgstr ""
 
+#. Author URI of the plugin
+#: stillframe.php
+msgid "https://grafucci.com/"
+msgstr ""
+
+#: includes/class-stillframe-admin-bar-menu.php:32
 #: includes/class-stillframe-admin-bar-menu.php:36
-#: includes/class-stillframe-asset-loader.php:233
+#: includes/class-stillframe-asset-loader.php:487
 msgid "Capture this screen"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:125
-#: includes/class-stillframe-asset-loader.php:185
+#: includes/class-stillframe-asset-loader.php:317
+msgid "(No title)"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:379
+#: includes/class-stillframe-asset-loader.php:439
 msgid "Phone"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:130
-#: includes/class-stillframe-asset-loader.php:190
+#: includes/class-stillframe-asset-loader.php:384
+#: includes/class-stillframe-asset-loader.php:444
+#: includes/class-stillframe-asset-loader.php:576
 msgid "iPad"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:135
-#: includes/class-stillframe-asset-loader.php:195
+#: includes/class-stillframe-asset-loader.php:389
+#: includes/class-stillframe-asset-loader.php:449
+#: includes/class-stillframe-asset-loader.php:575
+#: includes/class-stillframe-tools-page.php:95
 msgid "Desktop"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:213
+#: includes/class-stillframe-asset-loader.php:467
+#: includes/class-stillframe-asset-loader.php:564
 msgid "1x"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:217
+#: includes/class-stillframe-asset-loader.php:471
+#: includes/class-stillframe-asset-loader.php:565
 msgid "2x"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:221
+#: includes/class-stillframe-asset-loader.php:475
+#: includes/class-stillframe-asset-loader.php:566
 msgid "3x"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:234
+#: includes/class-stillframe-asset-loader.php:488
 msgid "Close"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:235
+#: includes/class-stillframe-asset-loader.php:489
+msgid "This screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:490
 msgid "Width"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:236
+#: includes/class-stillframe-asset-loader.php:491
 msgid "Custom"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:237
+#: includes/class-stillframe-asset-loader.php:492
 msgid "Custom width"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:238
+#: includes/class-stillframe-asset-loader.php:493
 msgid "Export scale"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:239
+#: includes/class-stillframe-asset-loader.php:494
+#: includes/class-stillframe-asset-loader.php:581
 msgid "Capture"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:240
+#: includes/class-stillframe-asset-loader.php:495
 msgid "Capture current window"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:241
-msgid "Download PNG"
-msgstr ""
-
-#: includes/class-stillframe-asset-loader.php:242
+#: includes/class-stillframe-asset-loader.php:496
+msgid "Reloading this page at the chosen width."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:497
+msgid "Download"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:498
+msgid "Save to Media"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:499
+msgid "Saving to the Media Library."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:500
+msgid "Saved to Media"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:501
+msgid "View in Media"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:502
+#: includes/class-stillframe-media.php:171
+msgid "The media save failed. The page was not changed."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:503
 msgid "Pen"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:243
+#: includes/class-stillframe-asset-loader.php:504
 msgid "Circle"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:244
+#: includes/class-stillframe-asset-loader.php:505
 msgid "Arrow"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:245
+#: includes/class-stillframe-asset-loader.php:506
 msgid "Undo"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:246
+#: includes/class-stillframe-asset-loader.php:507
 msgid "Clear"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:247
+#: includes/class-stillframe-asset-loader.php:508
 msgid "Annotation tools"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:248
+#: includes/class-stillframe-asset-loader.php:509
 msgid "Captured screen"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:249
+#: includes/class-stillframe-asset-loader.php:510
 msgid "Stillframe capture frame"
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:250
+#: includes/class-stillframe-asset-loader.php:511
 msgid "Capturing this screen."
 msgstr ""
 
 #. translators: 1: width in CSS pixels, 2: export scale.
-#: includes/class-stillframe-asset-loader.php:252
+#: includes/class-stillframe-asset-loader.php:513
 #, php-format
 msgid "Captured at %1$d pixels wide and %2$dx. Draw on the picture, then download the PNG."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:253
+#: includes/class-stillframe-asset-loader.php:514
 msgid "Preparing the PNG."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:254
+#: includes/class-stillframe-asset-loader.php:515
 msgid "Stillframe could not load the capture tools. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:255
+#: includes/class-stillframe-asset-loader.php:516
 msgid "The capture failed. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:256
+#: includes/class-stillframe-asset-loader.php:517
 msgid "The capture timed out. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:257
+#: includes/class-stillframe-asset-loader.php:518
 msgid "The frame was blocked, so only the current window can be captured. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:258
+#: includes/class-stillframe-asset-loader.php:519
 msgid "Enter a whole number from 320 to 2560. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:259
+#: includes/class-stillframe-asset-loader.php:520
 msgid "The download failed. The page was not changed."
 msgstr ""
 
-#: includes/class-stillframe-asset-loader.php:260
+#: includes/class-stillframe-asset-loader.php:521
 msgid "The capture tool did not load. The page was not changed."
 msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:522
+msgid "Drag to select an area"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:523
+msgid "Click a section of the page to capture it"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:524
+msgid "Area"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:525
+msgid "Window"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:526
+msgid "Full screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:527
+msgid "Capturing…"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:528
+msgid "Almost there. This will finish as soon as the capture is ready."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:529
+msgid "Downloaded."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:530
+msgid "Color"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:531
+msgid "Line thickness"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:532
+msgid "Top bar"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:533
+msgid "Side menu"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:534
+msgid "Hide other plugins"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:535
+msgid "Admin notices"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:536
+msgid "Cancel"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:537
+msgid "More"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:538
+msgid "Include the top bar"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:539
+msgid "Include the side menu"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:540
+msgid "Direct Page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:541
+msgid "Recent"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:542
+#: includes/class-stillframe-asset-loader.php:558
+msgid "Devices"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:543
+msgid "Current screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:544
+msgid "Home"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:545
+msgid "Pages"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:546
+msgid "Posts"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:547
+msgid "Custom URL: paste any address..."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:548
+msgid "Custom URL"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:549
+msgid "Use"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:550
+msgid "Search pages or paste a URL from this site"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:551
+msgid "Search pages"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:552
+msgid "Enter a URL below"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:553
+msgid "No matching pages. Paste a full URL to use it."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:554
+msgid "Capture a page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:555
+msgid "Page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:556
+msgid "Current Admin Screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:557
+msgid "Current Screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:559
+msgid "Desktop Only"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:560
+msgid "Select All (3)"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:561
+msgid "Hide the admin bar in the screenshot"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:562
+msgid "Quality"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:563
+msgid "Height"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:567
+msgid "Same pixels as the screen. Smallest files."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:568
+msgid "Sharp on high-density displays. Recommended."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:569
+msgid "Maximum detail. Large files; very long pages may be reduced."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:570
+msgid "First screen"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:571
+msgid "Full Page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:572
+msgid "Only the first screen (above the fold)."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:573
+msgid "The entire page, top to bottom."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:574
+msgid "Capture 3 devices"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:577
+msgid "Mobile"
+msgstr ""
+
+#. translators: 1: rows shown, 2: rows matched.
+#: includes/class-stillframe-asset-loader.php:579
+#, php-format
+msgid "Showing %1$d of %2$d. Keep typing to narrow the list."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:580
+msgid "Choose a page"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:582
+msgid "Choose at least one device to capture."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:583
+msgid "Use this URL"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:584
+msgid "Pixel-perfect capture"
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:585
+msgid "Area, Window, and Full screen on this tab in Chrome or Edge. The browser asks to share the tab, and nothing is uploaded. Other browsers, Direct Page, and Tools redraw the page."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:586
+msgid "This browser cannot share the tab, so this shot was redrawn from the page."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:587
+msgid "Sharing was cancelled, so this shot was redrawn from the page. The next capture will ask to share the tab again."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:588
+msgid "That share was not this browser tab, so this shot was redrawn from the page. The next capture will ask again."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:589
+msgid "The tab capture did not match this window, so this shot was redrawn from the page. The next capture will ask again."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:590
+msgid "Pixel-perfect capture did not finish, so this shot was redrawn from the page. The next capture will ask again."
+msgstr ""
+
+#: includes/class-stillframe-asset-loader.php:591
+msgid "This capture has unsaved marks. Opening another screenshot will discard them. Continue?"
+msgstr ""
+
+#. translators: %d: number of devices.
+#: includes/class-stillframe-asset-loader.php:593
+#, php-format
+msgid "Capture %d devices"
+msgstr ""
+
+#. translators: %s: device name.
+#: includes/class-stillframe-asset-loader.php:595
+#, php-format
+msgid "Capture %s"
+msgstr ""
+
+#: includes/class-stillframe-media.php:35
+msgid "You cannot save this capture."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:33
+#: includes/class-stillframe-tools-page.php:34
+#: includes/class-stillframe-tools-page.php:53
+#: includes/class-stillframe-tools-page.php:57
+msgid "Stillframe"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:48
+msgid "You cannot capture this screen."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:64
+msgid "Target Page"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:65
+msgid "Select a site page or enter a custom URL to capture."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:75
+msgid "Device Viewports"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:76
+msgid "Select viewports to capture simultaneously."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:115
+msgid "iPad / Tablet"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:135
+msgid "Mobile Phone"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:145
+msgid "Capture Preferences"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:146
+msgid "These shots redraw the page. Pixel-perfect capture is Area, Window, and Full screen from the admin bar."
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:151
+msgid "Resolution Quality"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:170
+msgid "Capture Height"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:185
+msgid "Clean Presentation"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:189
+msgid "Hide WordPress Admin Bar"
+msgstr ""
+
+#: includes/class-stillframe-tools-page.php:202
+msgid "Capture Selected Devices"
+msgstr ""

stillframe/trunk/readme.txt

@@ -4 +4 @@
 Requires at least: 6.4
 Tested up to: 7.1
-Stable tag: 0.2.0
+Stable tag: 0.2.5
 Requires PHP: 7.4
 License: GPL-2.0-or-later
@@ -58 +58 @@
 == Screenshots ==
 
-1. Clean floating capture toolbar with Area selection mode and tooltip on the WordPress dashboard.
-2. Window & element capture mode with live pixel dimensions and instant capture button.
-3. Devices dropdown: frame and capture standard Desktop (1440px), iPad (834px), and Mobile (390px) viewports on screen.
-4. Direct Page capture dropdown: choose target pages, select viewports, toggle clean presentation mode, and select Retina resolution.
-5. Annotation Editor Suite: full canvas markup tools including shapes, arrows, text, numbered steps, blur redaction, and instant export.
+1. Clean floating capture toolbar with Area selection and the drag hint on the WordPress dashboard.
+2. Window capture: hover any section, see its size, then capture it.
+3. Window mode device bar: frame Desktop (1440px), iPad (834px), or Mobile (390px) on screen.
+4. Direct Page: pick a page, choose devices, set quality and height, hide the admin bar, and capture.
+5. Annotation editor: shapes, arrows, text, numbered steps, blur, and download or save to the Media Library.
 
 == Frequently Asked Questions ==
@@ -86 +86 @@
 Stillframe bundles modern-screenshot 4.7.0 (MIT license) as assets/js/vendor/modern-screenshot.js. Source: https://github.com/qq15725/modern-screenshot. The license text is in assets/js/vendor/LICENSE-modern-screenshot.txt.
 
+Stillframe also bundles Fabric.js 6.7.1 (MIT license) as assets/js/vendor/fabric.min.js. Source: https://github.com/fabricjs/fabric.js (npm package "fabric"). The license text is in assets/js/vendor/LICENSE-fabric.txt.
+
 == Changelog ==
+
+= 0.2.5 =
+* fix the editor failing to open a capture when no text size was set
+* keep the current admin screen when capturing it, including the post editor, and still drop links that would delete or change data
+* ask before another screenshot replaces one that still has unsaved marks
+* keep one-line rows, such as pagination and the admin bar, on a single line in redrawn screenshots
+* load dashboard icons before a redraw so they stay visible in the screenshot
+* change text boxes so the side handles set the line width, the corners scale the letters, and the height follows the text
+* shrink selection handles on small marks so they no longer cover the shape
+* let marks and their handles sit in the grey area around the picture without being cut off
+* show Desktop, iPad, and Mobile on a solid bar under the capture toolbar in Window mode
+* wait until the pointer is idle before redrawing the page, so selecting and drawing stay responsive
+* start a full-screen redraw as soon as the area is selected, so Capture does not wait for the page to be built
+* load the annotation editor from the admin bar using the current file version, so an update is not served from an old cached copy
+* explain that pixel-perfect capture is Area, Window, and Full screen in Chrome or Edge, and that Direct Page and Tools redraw the page
+* say when tab sharing is cancelled or does not match this window, then redraw the page instead
+
+= 0.2.1 =
+* Text marks stretch freely: the corner handles scale the text evenly, the side handles stretch it wider or narrower, and the top and bottom handles make it taller or shorter. The Size control keeps showing the real letter height.
+* Marks can now be dragged and resized out over the grey area around the picture. The part outside the picture is shown faded, and only the picture itself is saved.
+* Every handle of a mark stays visible and reachable: a mark can no longer be pushed or resized past the edge of the working area.
+* Smaller, lighter transform handles and a closer rotate knob on every mark; a thinner white outline on large text.
+* Device frame: Desktop, iPad and Mobile frames keep their proportions on small screens, no longer sit under the top bar, and the device buttons stay available so the size can be switched after framing.
+* The device buttons in Window mode now hang directly under the top bar, centred on it.
+* Scripts and styles are versioned by file date, so an updated plugin never serves a stale cached copy.
 
 = 0.2.0 =

stillframe/trunk/stillframe.php

@@ -4 +4 @@
  * Plugin URI: https://grafucci.com/stillframe/
  * Description: Capture multi-device screenshots (Desktop, Tablet, Mobile) or custom regions, mark them up with rich annotation tools, and export to PNG or Media Library.
- * Version: 0.2.0
+ * Version: 0.2.5
  * Requires at least: 6.4
  * Requires PHP: 7.4
@@ -21 +21 @@
 }
 
-define( 'STILLFRAME_VERSION', '0.2.0' );
+define( 'STILLFRAME_VERSION', '0.2.5' );
 define( 'STILLFRAME_FILE', __FILE__ );
 define( 'STILLFRAME_DIR', plugin_dir_path( __FILE__ ) );
+// Asset query string follows the newest file, so updated scripts and styles are never served from a stale browser cache.
+define( 'STILLFRAME_ASSET_VER', STILLFRAME_VERSION . '.' . max( (int) filemtime( STILLFRAME_DIR . 'assets/js/stillframe-capture-panel.js' ), (int) filemtime( STILLFRAME_DIR . 'assets/js/stillframe-annotation-editor-v2.js' ), (int) filemtime( STILLFRAME_DIR . 'assets/js/stillframe-annotation-editor.js' ), (int) filemtime( STILLFRAME_DIR . 'assets/js/stillframe-admin-bar.js' ), (int) filemtime( STILLFRAME_DIR . 'assets/css/stillframe-capture-panel.css' ) ) );
 
 require_once STILLFRAME_DIR . 'includes/class-stillframe-capability-check.php';

stillframe/trunk/uninstall.php

@@ -19 +19 @@
 
 delete_transient( 'stillframe_site_pages' );
+delete_transient( 'stillframe_site_pages_v2' );