@picked/svelte 0.0.1-dev.1793923852884 → 0.0.1-dev.1793933802654

package/dist/plugins/devtools/review/issues/capture-screenshot.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @file Takes a screenshot of the page for a report, through the browser's screen-share prompt.
+ *
+ * The panel hides BEFORE the prompt opens, so neither the panel nor the prompt is in the shot, and
+ * shows again however the capture ends.
+ */
+import type { IssueAttachment } from '../../derive/issue-report';
+/** The largest screenshot a report carries. */
+export declare const MAX_SCREENSHOT_BYTES: number;
+/** Why a screenshot was not taken. */
+export declare class ScreenshotError extends Error {
+    /** `unsupported`: the browser cannot share a screen. `cancelled`: the reviewer said no. */
+    readonly reason: 'unsupported' | 'cancelled' | 'failed';
+    /**
+     * A refused or failed screenshot.
+     *
+     * @param {'unsupported' | 'cancelled' | 'failed'} reason - Why.
+     * @param {string} message - What the reviewer reads.
+     * @example new ScreenshotError('cancelled', 'No screenshot was taken.')
+     */
+    constructor(reason: 'unsupported' | 'cancelled' | 'failed', message: string);
+}
+/** What a capture hides and shows around the prompt. */
+export interface CaptureHooks {
+    hide: () => void;
+    show: () => void;
+}
+/** The part of the browser's media devices a capture uses. */
+export type ScreenShare = Pick<MediaDevices, 'getDisplayMedia'>;
+/**
+ * Takes a screenshot of what the reviewer shares, as a JPEG attachment.
+ *
+ * @param {CaptureHooks} hooks - Hides the panel before the prompt, and shows it after.
+ * @param {ScreenShare | null} [media] - The screen sharing to use; `null` for none.
+ * @returns {Promise<IssueAttachment>} The screenshot.
+ * @example await captureScreenshot({ hide, show })
+ */
+export declare function captureScreenshot(hooks: CaptureHooks, media?: ScreenShare | null): Promise<IssueAttachment>;

package/dist/plugins/devtools/review/issues/capture-screenshot.js

@@ -0,0 +1 @@
+import{readAttachment as e}from"./read-attachment.js";var t=1572864,n=1920,r=[.85,.7,.55,.4],i=class extends Error{reason;constructor(e,t){super(t),this.name=`ScreenshotError`,this.reason=e}};function a(){return new Promise(e=>{requestAnimationFrame(()=>requestAnimationFrame(()=>e()))})}async function o(e){let t=document.createElement(`video`);t.muted=!0,t.playsInline=!0,t.srcObject=e,await t.play(),t.videoWidth===0&&await new Promise(e=>{t.addEventListener(`loadeddata`,e,{once:!0})});let r=Math.min(1,n/t.videoWidth),i=document.createElement(`canvas`);return i.width=Math.round(t.videoWidth*r),i.height=Math.round(t.videoHeight*r),i.getContext(`2d`)?.drawImage(t,0,0,i.width,i.height),t.srcObject=null,i}async function s(e){let t=null;for(let n of r){let r=await new Promise(t=>{e.toBlob(t,`image/jpeg`,n)});if(r===null)break;if(t=r,r.size<=1572864)return r}if(t===null||t.size>1572864)throw new i(`failed`,`The screenshot is too large to send. Attach a smaller one.`);return t}function c(){return typeof navigator<`u`&&`mediaDevices`in navigator?navigator.mediaDevices:null}async function l(t,n=c()){if(typeof n?.getDisplayMedia!=`function`)throw new i(`unsupported`,`This browser cannot take a screenshot. Attach one instead.`);t.hide();try{await a();let t={video:!0,audio:!1,preferCurrentTab:!0},r;try{r=await n.getDisplayMedia(t)}catch{throw new i(`cancelled`,`No screenshot was taken.`)}try{let t=await s(await o(r)),n=new Date().toISOString().replaceAll(/[:.]/g,`-`);return await e(t,`screenshot-${n}.jpg`)}finally{for(let e of r.getTracks())e.stop()}}finally{t.show()}}export{t as MAX_SCREENSHOT_BYTES,i as ScreenshotError,l as captureScreenshot};

package/dist/plugins/devtools/review/issues/read-attachment.d.ts

@@ -0,0 +1,27 @@
+/** @file Reads a file, or a captured image, into an attachment a report carries. */
+import type { IssueAttachment } from '../../derive/issue-report';
+/**
+ * A blob's bytes as base64, with no `data:` prefix.
+ *
+ * @param {Blob} blob - The bytes.
+ * @returns {Promise<string>} The base64 text.
+ * @example await readAsBase64(new Blob(['hi'])) // 'aGk='
+ */
+export declare function readAsBase64(blob: Blob): Promise<string>;
+/**
+ * A blob as an attachment.
+ *
+ * @param {Blob} blob - The bytes.
+ * @param {string} filename - The name it goes by.
+ * @returns {Promise<IssueAttachment>} The attachment.
+ * @example await readAttachment(file, file.name)
+ */
+export declare function readAttachment(blob: Blob, filename: string): Promise<IssueAttachment>;
+/**
+ * An image attachment as a `data:` URL an `<img>` can show.
+ *
+ * @param {IssueAttachment} attachment - The attachment.
+ * @returns {string | null} The URL, or `null` for a file that is not an image.
+ * @example previewUrl({ contentType: 'image/png', data: 'iVBO…', filename: 'a.png', size: 9 })
+ */
+export declare function previewUrl(attachment: IssueAttachment): string | null;

package/dist/plugins/devtools/review/issues/read-attachment.js

@@ -0,0 +1 @@
+function e(e){return new Promise((t,n)=>{let r=new FileReader;r.addEventListener(`load`,()=>{let{result:e}=r;t(typeof e==`string`?e.slice(e.indexOf(`,`)+1):``)}),r.addEventListener(`error`,()=>n(r.error??Error(`The file could not be read.`))),r.readAsDataURL(e)})}async function t(t,n){return{filename:n,contentType:t.type,data:await e(t),size:t.size}}function n(e){return e.contentType.startsWith(`image/`)?`data:${e.contentType};base64,${e.data}`:null}export{n as previewUrl,e as readAsBase64,t as readAttachment};

package/dist/plugins/devtools/review/issues/site-endpoint.d.ts

@@ -0,0 +1,17 @@
+/** @file A sink that posts each report to an endpoint on the site's own server. */
+import { type IssueSink } from '../../derive/issue-report';
+/** How {@link siteEndpoint} calls the endpoint. */
+export interface SiteEndpointOptions {
+    /** Headers sent with each report, over `content-type: application/json`. */
+    headers?: Readonly<Record<string, string>>;
+}
+/**
+ * A sink that posts each report as JSON to an endpoint the site runs, which files it in the site's
+ * tracker. The endpoint answers with the issue's `reference` (or `identifier`, or `id`) and `url`.
+ *
+ * @param {string} url - The endpoint, absolute or relative to the page.
+ * @param {SiteEndpointOptions} [options] - How to call it.
+ * @returns {IssueSink} The sink, for the devtools' `issues.sink` option.
+ * @example svelteDevtoolsPlugin({ issues: { sink: siteEndpoint('/api/report-issue') } })
+ */
+export declare function siteEndpoint(url: string, options?: SiteEndpointOptions): IssueSink;

package/dist/plugins/devtools/review/issues/site-endpoint.js

@@ -0,0 +1 @@
+import{readReceipt as e}from"../../derive/issue-report/issue-report.js";function t(t,n={}){return async r=>{let i=await fetch(t,{method:`POST`,headers:{"content-type":`application/json`,...n.headers},body:JSON.stringify(r)});if(!i.ok)throw Error(`The report was not sent: the server answered ${i.status}.`);let a=await i.json().catch(()=>null);return e(a)}}export{t as siteEndpoint};

package/dist/plugins/devtools/sidebar/nav.d.ts

@@ -3,9 +3,9 @@ import type { CustomToolIcon } from '../customTools';
 import type { StorageGetter } from '../launcher/launcher';
 /**
  * What a sidebar entry opens: a review tab, a custom tool, the Custom Tools page listed while no
- * unplaced tool is registered, or one of the SDK's own screens.
+ * unplaced tool is registered, one of the SDK's own screens, or Report an issue.
  */
-export type NavKind = 'review' | 'tool' | 'custom-tools' | 'screen';
+export type NavKind = 'review' | 'tool' | 'custom-tools' | 'screen' | 'report';
 /** One entry of the sidebar: a row, or an icon at its foot. */
 export interface NavItem {
     /** Unique across the whole sidebar. */
@@ -15,7 +15,10 @@ export interface NavItem {
     /** The glyph of an icon at the sidebar's foot. */
     icon?: CustomToolIcon;
 }
-/** The sidebar's entries: the top-level tabs, the Advanced group's screens, and the foot's icons. */
+/**
+ * The sidebar's entries: the top-level tabs, the Advanced group's screens, and the foot's icons,
+ * Report an issue's bug first.
+ */
 export interface NavModel {
     primary: readonly NavItem[];
     advanced: readonly NavItem[];

package/dist/plugins/devtools/sidebar/nav.js

@@ -1 +1 @@
-import{TAB_LABELS as e}from"../derive/plain-language/plain-language.js";var t=`picked-devtools-tab`,n=`picked-devtools-advanced-open`,r=`Custom Tools`,i=`guide`,a=`custom-tools`,o=[{id:`components`,label:`Components`},{id:`config`,label:`Config`},{id:`content`,label:`Content`},{id:`events`,label:`Events`},{id:`fields`,label:`Fields`},{id:`frameworks`,label:`Frameworks`},{id:`history`,label:`History`},{id:`identity`,label:`Identity`},{id:`predicates`,label:`Predicates`},{id:`project`,label:`Project`}];function s(e){return`tool:${e}`}function c(e){return`screen:${e}`}function l(t){let n=[{id:`guide`,label:e.guide,kind:`review`},{id:`session`,label:e.session,kind:`review`},{id:`answers`,label:e.answers,kind:`review`},{id:`journey`,label:e.journey,kind:`review`},{id:`personas`,label:e.personas,kind:`review`}];t.variations&&n.push({id:`variations`,label:e.variations,kind:`review`});let i=e=>({id:s(e.id),label:e.label,kind:`tool`}),l=t.tools.map(i),u=t.customTools.map(i),d=o.map(e=>({id:c(e.id),label:e.label,kind:`screen`})),f=u.length===0?[{id:a,label:r,kind:`custom-tools`}]:[],p=t.footerTools.map(e=>({id:s(e.id),label:e.label,kind:`tool`,icon:e.icon??`wrench`}));return{primary:[...n,...l,...u,...f],advanced:d,footer:p}}function u(e,t){return e===null?i:[...t.primary,...t.advanced,...t.footer].some(t=>t.id===e)?e:i}function d(e,t){return t.advanced.some(t=>t.id===e)}function f(e,t,n){let r=Math.max(0,n-1);switch(e){case`ArrowDown`:return Math.min(t+1,r);case`ArrowUp`:return Math.max(t-1,0);case`Home`:return 0;case`End`:return r;default:return null}}function p(e,t){try{return e().getItem(t)}catch{return null}}function m(e,t,n){try{e().setItem(t,n)}catch{}}export{n as ADVANCED_OPEN_STORAGE_KEY,r as CUSTOM_TOOLS_LABEL,a as CUSTOM_TOOLS_TAB,i as DEFAULT_TAB,o as SCREENS,t as TAB_STORAGE_KEY,l as buildNav,d as isInAdvanced,f as nextFocusIndex,p as readStored,u as resolveTab,c as screenTabId,s as toolTabId,m as writeStored};
+import{REPORT_ISSUE_LABEL as e,REPORT_ISSUE_TAB as t,TAB_LABELS as n}from"../derive/plain-language/plain-language.js";var r=`picked-devtools-tab`,i=`picked-devtools-advanced-open`,a=`Custom Tools`,o=`guide`,s=`custom-tools`,c=[{id:`components`,label:`Components`},{id:`config`,label:`Config`},{id:`content`,label:`Content`},{id:`events`,label:`Events`},{id:`fields`,label:`Fields`},{id:`frameworks`,label:`Frameworks`},{id:`history`,label:`History`},{id:`identity`,label:`Identity`},{id:`predicates`,label:`Predicates`},{id:`project`,label:`Project`}];function l(e){return`tool:${e}`}function u(e){return`screen:${e}`}function d(r){let i=[{id:`guide`,label:n.guide,kind:`review`},{id:`session`,label:n.session,kind:`review`},{id:`answers`,label:n.answers,kind:`review`},{id:`journey`,label:n.journey,kind:`review`},{id:`personas`,label:n.personas,kind:`review`}];r.variations&&i.push({id:`variations`,label:n.variations,kind:`review`});let o=e=>({id:l(e.id),label:e.label,kind:`tool`}),d=r.tools.map(o),f=r.customTools.map(o),p=c.map(e=>({id:u(e.id),label:e.label,kind:`screen`})),m=f.length===0?[{id:s,label:a,kind:`custom-tools`}]:[],h=[{id:t,label:e,kind:`report`,icon:`bug`},...r.footerTools.map(e=>({id:l(e.id),label:e.label,kind:`tool`,icon:e.icon??`wrench`}))];return{primary:[...i,...d,...f,...m],advanced:p,footer:h}}function f(e,t){return e===null?o:[...t.primary,...t.advanced,...t.footer].some(t=>t.id===e)?e:o}function p(e,t){return t.advanced.some(t=>t.id===e)}function m(e,t,n){let r=Math.max(0,n-1);switch(e){case`ArrowDown`:return Math.min(t+1,r);case`ArrowUp`:return Math.max(t-1,0);case`Home`:return 0;case`End`:return r;default:return null}}function h(e,t){try{return e().getItem(t)}catch{return null}}function g(e,t,n){try{e().setItem(t,n)}catch{}}export{i as ADVANCED_OPEN_STORAGE_KEY,a as CUSTOM_TOOLS_LABEL,s as CUSTOM_TOOLS_TAB,o as DEFAULT_TAB,c as SCREENS,r as TAB_STORAGE_KEY,d as buildNav,p as isInAdvanced,m as nextFocusIndex,h as readStored,f as resolveTab,u as screenTabId,l as toolTabId,g as writeStored};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1793923852884",
+  "version": "0.0.1-dev.1793933802654",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -113,7 +113,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1793923852884",
+    "@picked/client": "0.0.1-dev.1793933802654",
     "effector": "^23.4.4",
     "svelte": "^5.55.7"
   },