@fadenstack/ui-web 0.2.0-rc.2 → 0.3.0-rc.1

package/dist/dom.d.ts

@@ -13,11 +13,31 @@ export declare function dismissOnOutside(anchor: HTMLElement, close: () => void)
 export declare function fitToContent(box: HTMLTextAreaElement): void;
 /** Focuses a text box with the caret after its text (after "Edit", or the host attached something). */
 export declare function focusAtEnd(box: HTMLTextAreaElement): void;
+/** What a key in the composer does (`composerKey`). */
+export type ComposerAction = "send" | "stop" | "pick" | "next" | "previous" | "close";
 /**
  * What a key in the composer does: Enter sends (Shift+Enter is a new line, and an input method that is still
- * composing keeps its Enter), Escape stops the running answer.
+ * composing keeps its Enter), Escape stops the running answer. While the skill picker is open (`pickerOpen`), the
+ * arrows move in it, Enter and Tab pick, and Escape closes it.
  */
-export declare function composerKey(e: Pick<KeyboardEvent, "key" | "shiftKey" | "isComposing">, busy: boolean): "send" | "stop" | undefined;
+export declare function composerKey(e: Pick<KeyboardEvent, "key" | "shiftKey" | "isComposing">, busy: boolean, pickerOpen?: boolean): ComposerAction | undefined;
+/** The pictures among pasted or dropped files. */
+export declare function picturesIn(transfer: DataTransfer | null | undefined): File[];
+/** A picture made ready for a message: a `data:` URL, and its size in pixels. */
+export interface ReadPicture {
+    dataUrl: string;
+    width: number;
+    height: number;
+}
+/**
+ * A picture as a message takes it: at most `maxSide` pixels on its longer side (models scale larger ones down
+ * anyway, and the transcript keeps it), as JPEG on white (transparent parts of a screenshot stay readable).
+ * Throws when the browser cannot read it as a picture.
+ */
+export declare function readPicture(picture: Blob, options?: {
+    maxSide?: number;
+    quality?: number;
+}): Promise<ReadPicture>;
 /** How long a copy button shows its tick. */
 export declare const COPIED_MS = 1500;
 //# sourceMappingURL=dom.d.ts.map

package/dist/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,mGAAmG;AAEnG;;;GAGG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,WAAW,EAAE,SAAS,SAAK,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,IAAI,IAAI,CAAA;CAAE,CAoBzG;AAED,wGAAwG;AACxG,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAanF;AAED,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,GAAG,EAAE,mBAAmB,GAAG,IAAI,CAI3D;AAED,uGAAuG;AACvG,wBAAgB,UAAU,CAAC,GAAG,EAAE,mBAAmB,GAAG,IAAI,CAIzD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAIlI;AAED,6CAA6C;AAC7C,eAAO,MAAM,SAAS,OAAO,CAAC"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,mGAAmG;AAEnG;;;GAGG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,WAAW,EAAE,SAAS,SAAK,GAAG;IAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,IAAI,IAAI,CAAA;CAAE,CAoBzG;AAED,wGAAwG;AACxG,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAanF;AAED,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,GAAG,EAAE,mBAAmB,GAAG,IAAI,CAI3D;AAED,uGAAuG;AACvG,wBAAgB,UAAU,CAAC,GAAG,EAAE,mBAAmB,GAAG,IAAI,CAIzD;AAED,uDAAuD;AACvD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;AAEtF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,UAAQ,GAAG,cAAc,GAAG,SAAS,CAUrJ;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,EAAE,CAE5E;AAED,iFAAiF;AACjF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAsB,WAAW,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG,OAAO,CAAC,WAAW,CAAC,CAmB3H;AAED,6CAA6C;AAC7C,eAAO,MAAM,SAAS,OAAO,CAAC"}

package/dist/dom.js

@@ -57,15 +57,57 @@ export function focusAtEnd(box) {
 }
 /**
  * What a key in the composer does: Enter sends (Shift+Enter is a new line, and an input method that is still
- * composing keeps its Enter), Escape stops the running answer.
+ * composing keeps its Enter), Escape stops the running answer. While the skill picker is open (`pickerOpen`), the
+ * arrows move in it, Enter and Tab pick, and Escape closes it.
  */
-export function composerKey(e, busy) {
+export function composerKey(e, busy, pickerOpen = false) {
+    if (pickerOpen && !e.isComposing) {
+        if (e.key === "ArrowDown")
+            return "next";
+        if (e.key === "ArrowUp")
+            return "previous";
+        if ((e.key === "Enter" && !e.shiftKey) || e.key === "Tab")
+            return "pick";
+        if (e.key === "Escape")
+            return "close";
+    }
     if (e.key === "Enter" && !e.shiftKey && !e.isComposing)
         return "send";
     if (e.key === "Escape" && busy)
         return "stop";
     return undefined;
 }
+/** The pictures among pasted or dropped files. */
+export function picturesIn(transfer) {
+    return Array.from(transfer?.files ?? []).filter((f) => f.type.startsWith("image/"));
+}
+/**
+ * A picture as a message takes it: at most `maxSide` pixels on its longer side (models scale larger ones down
+ * anyway, and the transcript keeps it), as JPEG on white (transparent parts of a screenshot stay readable).
+ * Throws when the browser cannot read it as a picture.
+ */
+export async function readPicture(picture, options = {}) {
+    const maxSide = options.maxSide ?? 1600;
+    const bitmap = await createImageBitmap(picture);
+    try {
+        const scale = Math.min(1, maxSide / Math.max(bitmap.width, bitmap.height, 1));
+        const width = Math.max(1, Math.round(bitmap.width * scale));
+        const height = Math.max(1, Math.round(bitmap.height * scale));
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const context = canvas.getContext("2d");
+        if (!context)
+            throw new Error("No canvas to draw the picture on.");
+        context.fillStyle = "#fff";
+        context.fillRect(0, 0, width, height);
+        context.drawImage(bitmap, 0, 0, width, height);
+        return { dataUrl: canvas.toDataURL("image/jpeg", options.quality ?? 0.85), width, height };
+    }
+    finally {
+        bitmap.close();
+    }
+}
 /** How long a copy button shows its tick. */
 export const COPIED_MS = 1500;
 //# sourceMappingURL=dom.js.map

package/dist/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"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"}

package/dist/icons.d.ts

@@ -6,6 +6,9 @@
  */
 export declare const iconPaths: {
     readonly send: "M3.4 20.4 21 12 3.4 3.6l-.01 6.53L15 12 3.39 13.87z";
+    readonly image: "M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z";
+    readonly camera: "M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4zM9 2 7.17 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-3.17L15 2z";
+    readonly translate: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7 1.62-4.33L19.12 17z";
     readonly stop: "M7 7h10v10H7z";
     readonly plus: "M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z";
     readonly history: "M13 3a9 9 0 0 0-9 9H1l3.9 3.9.1.1L9 12H6a7 7 0 1 1 2.05 4.95l-1.42 1.42A9 9 0 1 0 13 3zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8z";
@@ -17,6 +20,8 @@ export declare const iconPaths: {
     readonly warning: "M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z";
     readonly shield: "M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11z";
     readonly info: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z";
+    /** After a link that opens in a new tab. */
+    readonly external: "M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z";
     readonly edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z";
     readonly retry: "M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z";
     readonly trash: "M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z";

package/dist/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAwBZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;IAgBpB,4CAA4C;;;;;;;;;;;;;CAapC,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}

package/dist/icons.js

@@ -6,6 +6,9 @@
  */
 export const iconPaths = {
     send: "M3.4 20.4 21 12 3.4 3.6l-.01 6.53L15 12 3.39 13.87z",
+    image: "M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z",
+    camera: "M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4zM9 2 7.17 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-3.17L15 2z",
+    translate: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7 1.62-4.33L19.12 17z",
     stop: "M7 7h10v10H7z",
     plus: "M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z",
     history: "M13 3a9 9 0 0 0-9 9H1l3.9 3.9.1.1L9 12H6a7 7 0 1 1 2.05 4.95l-1.42 1.42A9 9 0 1 0 13 3zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8z",
@@ -17,6 +20,8 @@ export const iconPaths = {
     warning: "M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z",
     shield: "M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11z",
     info: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z",
+    /** After a link that opens in a new tab. */
+    external: "M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z",
     edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z",
     retry: "M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z",
     trash: "M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z",

package/dist/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,qDAAqD;IAC3D,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,kCAAkC;IACxC,OAAO,EAAE,8HAA8H;IACvI,OAAO,EAAE,0CAA0C;IACnD,IAAI,EAAE,sHAAsH;IAC5H,KAAK,EAAE,6CAA6C;IACpD,KAAK,EAAE,2FAA2F;IAClG,IAAI,EAAE,0KAA0K;IAChL,OAAO,EAAE,2CAA2C;IACpD,MAAM,EAAE,mHAAmH;IAC3H,IAAI,EAAE,sJAAsJ;IAC5J,IAAI,EAAE,uHAAuH;IAC7H,KAAK,EAAE,6GAA6G;IACpH,KAAK,EAAE,yEAAyE;IAChF,OAAO,EAAE,2DAA2D;IACpE,IAAI,EAAE,4EAA4E;IAClF,KAAK,EAAE,mRAAmR;IAC1R,KAAK,EAAE,0CAA0C;IACjD,IAAI,EAAE,iGAAiG;IACvG,MAAM,EAAE,yIAAyI;IACjJ,IAAI,EAAE,2FAA2F;IACjG,QAAQ,EAAE,+nBAA+nB;CACjoB,CAAC"}
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,qDAAqD;IAC3D,KAAK,EAAE,8GAA8G;IACrH,MAAM,EAAE,4IAA4I;IACpJ,SAAS,EAAE,4QAA4Q;IACvR,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,kCAAkC;IACxC,OAAO,EAAE,8HAA8H;IACvI,OAAO,EAAE,0CAA0C;IACnD,IAAI,EAAE,sHAAsH;IAC5H,KAAK,EAAE,6CAA6C;IACpD,KAAK,EAAE,2FAA2F;IAClG,IAAI,EAAE,0KAA0K;IAChL,OAAO,EAAE,2CAA2C;IACpD,MAAM,EAAE,mHAAmH;IAC3H,IAAI,EAAE,sJAAsJ;IAC5J,4CAA4C;IAC5C,QAAQ,EAAE,6CAA6C;IACvD,IAAI,EAAE,uHAAuH;IAC7H,KAAK,EAAE,6GAA6G;IACpH,KAAK,EAAE,yEAAyE;IAChF,OAAO,EAAE,2DAA2D;IACpE,IAAI,EAAE,4EAA4E;IAClF,KAAK,EAAE,mRAAmR;IAC1R,KAAK,EAAE,0CAA0C;IACjD,IAAI,EAAE,iGAAiG;IACvG,MAAM,EAAE,yIAAyI;IACjJ,IAAI,EAAE,2FAA2F;IACjG,QAAQ,EAAE,+nBAA+nB;CACjoB,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { iconPaths, type IconName } from "./icons.js";
 export { agentAvatar, type AgentAvatarOptions, type SvgNode } from "./avatar.js";
-export { COPIED_MS, composerKey, dismissOnOutside, fitToContent, focusAtEnd, stickToBottom } from "./dom.js";
+export { COPIED_MS, composerKey, dismissOnOutside, fitToContent, focusAtEnd, picturesIn, readPicture, stickToBottom, type ComposerAction, type ReadPicture, } from "./dom.js";
 export { approvalIcon, diffMarker, headingTag, noticeIcon, noticeRole, toolBadges, toolClassName, toolStatusIcon, turnMeta, type Badge, } from "./presentation.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7G,OAAO,EACL,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,QAAQ,EACR,KAAK,KAAK,GACX,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,KAAK,OAAO,EAAE,MAAM,aAAa,CAAC;AACjF,OAAO,EACL,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,UAAU,EACV,WAAW,EACX,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,QAAQ,EACR,KAAK,KAAK,GACX,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
 export { iconPaths } from "./icons.js";
 export { agentAvatar } from "./avatar.js";
-export { COPIED_MS, composerKey, dismissOnOutside, fitToContent, focusAtEnd, stickToBottom } from "./dom.js";
+export { COPIED_MS, composerKey, dismissOnOutside, fitToContent, focusAtEnd, picturesIn, readPicture, stickToBottom, } from "./dom.js";
 export { approvalIcon, diffMarker, headingTag, noticeIcon, noticeRole, toolBadges, toolClassName, toolStatusIcon, turnMeta, } from "./presentation.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,WAAW,EAAyC,MAAM,aAAa,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7G,OAAO,EACL,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,QAAQ,GAET,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,WAAW,EAAyC,MAAM,aAAa,CAAC;AACjF,OAAO,EACL,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,UAAU,EACV,WAAW,EACX,aAAa,GAGd,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,QAAQ,GAET,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fadenstack/ui-web",
-  "version": "0.2.0-rc.2",
+  "version": "0.3.0-rc.1",
   "description": "The web look of the Fadenstack chat for any framework: the stylesheet, icons, the agent's avatar and the panel's browser behaviours",
   "license": "Apache-2.0",
   "author": "Emagin8 UG (haftungsbeschränkt)",
@@ -41,6 +41,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@fadenstack/ui": "0.2.0-rc.2"
+    "@fadenstack/ui": "0.3.0-rc.1"
   }
 }

package/src/dom.ts

@@ -56,15 +56,63 @@ export function focusAtEnd(box: HTMLTextAreaElement): void {
   box.setSelectionRange(end, end);
 }
 
+/** What a key in the composer does (`composerKey`). */
+export type ComposerAction = "send" | "stop" | "pick" | "next" | "previous" | "close";
+
 /**
  * What a key in the composer does: Enter sends (Shift+Enter is a new line, and an input method that is still
- * composing keeps its Enter), Escape stops the running answer.
+ * composing keeps its Enter), Escape stops the running answer. While the skill picker is open (`pickerOpen`), the
+ * arrows move in it, Enter and Tab pick, and Escape closes it.
  */
-export function composerKey(e: Pick<KeyboardEvent, "key" | "shiftKey" | "isComposing">, busy: boolean): "send" | "stop" | undefined {
+export function composerKey(e: Pick<KeyboardEvent, "key" | "shiftKey" | "isComposing">, busy: boolean, pickerOpen = false): ComposerAction | undefined {
+  if (pickerOpen && !e.isComposing) {
+    if (e.key === "ArrowDown") return "next";
+    if (e.key === "ArrowUp") return "previous";
+    if ((e.key === "Enter" && !e.shiftKey) || e.key === "Tab") return "pick";
+    if (e.key === "Escape") return "close";
+  }
   if (e.key === "Enter" && !e.shiftKey && !e.isComposing) return "send";
   if (e.key === "Escape" && busy) return "stop";
   return undefined;
 }
 
+/** The pictures among pasted or dropped files. */
+export function picturesIn(transfer: DataTransfer | null | undefined): File[] {
+  return Array.from(transfer?.files ?? []).filter((f) => f.type.startsWith("image/"));
+}
+
+/** A picture made ready for a message: a `data:` URL, and its size in pixels. */
+export interface ReadPicture {
+  dataUrl: string;
+  width: number;
+  height: number;
+}
+
+/**
+ * A picture as a message takes it: at most `maxSide` pixels on its longer side (models scale larger ones down
+ * anyway, and the transcript keeps it), as JPEG on white (transparent parts of a screenshot stay readable).
+ * Throws when the browser cannot read it as a picture.
+ */
+export async function readPicture(picture: Blob, options: { maxSide?: number; quality?: number } = {}): Promise<ReadPicture> {
+  const maxSide = options.maxSide ?? 1600;
+  const bitmap = await createImageBitmap(picture);
+  try {
+    const scale = Math.min(1, maxSide / Math.max(bitmap.width, bitmap.height, 1));
+    const width = Math.max(1, Math.round(bitmap.width * scale));
+    const height = Math.max(1, Math.round(bitmap.height * scale));
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (!context) throw new Error("No canvas to draw the picture on.");
+    context.fillStyle = "#fff";
+    context.fillRect(0, 0, width, height);
+    context.drawImage(bitmap, 0, 0, width, height);
+    return { dataUrl: canvas.toDataURL("image/jpeg", options.quality ?? 0.85), width, height };
+  } finally {
+    bitmap.close();
+  }
+}
+
 /** How long a copy button shows its tick. */
 export const COPIED_MS = 1500;

package/src/icons.ts

@@ -6,6 +6,9 @@
  */
 export const iconPaths = {
   send: "M3.4 20.4 21 12 3.4 3.6l-.01 6.53L15 12 3.39 13.87z",
+  image: "M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z",
+  camera: "M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4zM9 2 7.17 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-3.17L15 2z",
+  translate: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7 1.62-4.33L19.12 17z",
   stop: "M7 7h10v10H7z",
   plus: "M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z",
   history: "M13 3a9 9 0 0 0-9 9H1l3.9 3.9.1.1L9 12H6a7 7 0 1 1 2.05 4.95l-1.42 1.42A9 9 0 1 0 13 3zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8z",
@@ -17,6 +20,8 @@ export const iconPaths = {
   warning: "M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z",
   shield: "M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11z",
   info: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z",
+  /** After a link that opens in a new tab. */
+  external: "M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z",
   edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z",
   retry: "M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z",
   trash: "M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z",

package/src/index.ts

@@ -1,6 +1,17 @@
 export { iconPaths, type IconName } from "./icons.js";
 export { agentAvatar, type AgentAvatarOptions, type SvgNode } from "./avatar.js";
-export { COPIED_MS, composerKey, dismissOnOutside, fitToContent, focusAtEnd, stickToBottom } from "./dom.js";
+export {
+  COPIED_MS,
+  composerKey,
+  dismissOnOutside,
+  fitToContent,
+  focusAtEnd,
+  picturesIn,
+  readPicture,
+  stickToBottom,
+  type ComposerAction,
+  type ReadPicture,
+} from "./dom.js";
 export {
   approvalIcon,
   diffMarker,

package/styles.css

@@ -22,7 +22,9 @@
   --fdn-surface-hover: rgba(31, 31, 31, 0.06);
   --fdn-text: #1f1f1f;
   --fdn-text-muted: #474747;
-  --fdn-text-faint: #757775;
+  /* Quiet text on the panel's background: 5.2:1 on white, 4.7:1 on the surface (a chip's subtitle). Text in a menu,
+     an approval card, a notice or a code block is muted, which keeps 4.5:1 on their hover and soft colours too. */
+  --fdn-text-faint: #6b6d6b;
   --fdn-border: #c7c7c7;
   --fdn-hairline: #e3e3e3;
   --fdn-accent: #0b57d0;
@@ -221,6 +223,13 @@
   color: var(--fdn-text);
 }
 
+/* A button whose menu is open looks pressed; the gear also while About, which its menu opened, is open. */
+.fdn-icon-button[aria-expanded="true"],
+.fdn-icon-button.fdn-open {
+  background: var(--fdn-surface-hover);
+  color: var(--fdn-text);
+}
+
 .fdn-icon-button:disabled {
   opacity: 0.38;
   cursor: default;
@@ -299,7 +308,7 @@
 .fdn-menu-description,
 .fdn-menu-note {
   display: block;
-  color: var(--fdn-text-faint);
+  color: var(--fdn-text-muted);
   font-size: 12px;
 }
 
@@ -307,14 +316,19 @@
   padding: 6px 10px;
 }
 
-/* The settings: a heading over each group (the languages), the host's own items below a line. */
+/* The settings: a heading over each group (the languages), the host's own items below a line. A heading on a menu
+   (and About's title) is muted, as all text on a surface. */
+.fdn-menu-heading,
+.fdn-about-title {
+  color: var(--fdn-text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
 .fdn-menu-heading {
   display: block;
   padding-block: 6px 2px;
   padding-inline: 10px;
-  color: var(--fdn-text-faint);
-  font-size: 12px;
-  font-weight: 500;
 }
 
 .fdn-menu-extra {
@@ -328,6 +342,16 @@
   overflow-y: auto;
 }
 
+/* The settings name languages in their own scripts; the fonts for Chinese have no weight 500 and fall back to 400, so
+   every item here is 400 (as the host's own items are), and the picked one 600, which those fonts show as bold. */
+.fdn-settings .fdn-menu-label {
+  font-weight: 400;
+}
+
+.fdn-settings [aria-checked="true"] .fdn-menu-label {
+  font-weight: 600;
+}
+
 .fdn-history {
   max-height: min(420px, 70vh);
   overflow-y: auto;
@@ -366,7 +390,7 @@
 }
 
 .fdn-history-when {
-  color: var(--fdn-text-faint);
+  color: var(--fdn-text-muted);
   font-size: 12px;
   white-space: nowrap;
 }
@@ -477,8 +501,8 @@
   align-items: center;
   gap: 2px;
   margin-inline-start: -4px;
+  color: var(--fdn-text-muted); /* quiet icons; not by opacity, which took the meta's text under 4.5:1 */
   font-size: 12px;
-  opacity: 0.85;
 }
 
 .fdn-turn-actions .fdn-muted {
@@ -624,7 +648,7 @@
   min-height: 30px;
   padding-block: 2px 0;
   padding-inline: 12px 4px;
-  color: var(--fdn-text-faint);
+  color: var(--fdn-text-muted);
   font-size: 12px;
 }
 
@@ -786,7 +810,7 @@
 }
 
 .fdn-label {
-  color: var(--fdn-text-faint);
+  color: var(--fdn-text-muted);
   font-size: 11.5px;
   font-weight: 500;
 }
@@ -845,6 +869,12 @@
   color: var(--fdn-text-muted);
 }
 
+.fdn-approval-target {
+  margin: 8px 0 0;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
 .fdn-approval-args {
   margin-top: 8px;
   padding: 8px 10px;
@@ -852,16 +882,26 @@
   background: var(--fdn-bg);
 }
 
-.fdn-approval-actions {
+/* The answers in two pairs (Allow, Allow for this chat | Allow always, Deny): one row where they fit, else a pair a
+   row, never three and one. Narrower padding than other buttons, so all four fit in a 420 px task pane. */
+.fdn-approval-actions,
+.fdn-approval-pair {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
+}
+
+.fdn-approval-actions {
   margin-top: 10px;
 }
 
+.fdn-chat .fdn-approval-actions .fdn-button {
+  padding-inline: 10px;
+}
+
 .fdn-approval-state {
   margin-top: 8px;
-  color: var(--fdn-text-faint);
+  color: var(--fdn-text-muted);
   font-size: 12px;
 }
 
@@ -870,7 +910,9 @@
   color: var(--fdn-success);
 }
 
-.fdn-button {
+/* Text buttons (approval cards, About). Under `.fdn-chat`, so their colour and weight outrank the reset that has
+   every button in the panel inherit its font and colour (`.fdn-chat button`). */
+.fdn-chat .fdn-button {
   height: 32px;
   padding: 0 14px;
   border: 1px solid var(--fdn-border);
@@ -881,27 +923,27 @@
   cursor: pointer;
 }
 
-.fdn-button:hover:not(:disabled) {
+.fdn-chat .fdn-button:hover:not(:disabled) {
   background: var(--fdn-surface-hover);
 }
 
-.fdn-button.fdn-primary {
+.fdn-chat .fdn-button.fdn-primary {
   border-color: var(--fdn-accent);
   background: var(--fdn-accent);
   color: var(--fdn-on-accent);
 }
 
-.fdn-button.fdn-primary:hover:not(:disabled) {
+.fdn-chat .fdn-button.fdn-primary:hover:not(:disabled) {
   background: var(--fdn-accent);
   filter: brightness(1.08);
 }
 
-.fdn-button.fdn-quiet {
+.fdn-chat .fdn-button.fdn-quiet {
   border-color: transparent;
   color: var(--fdn-text-muted);
 }
 
-.fdn-button:disabled {
+.fdn-chat .fdn-button:disabled {
   opacity: 0.45;
   cursor: default;
 }
@@ -938,7 +980,7 @@
 }
 
 .fdn-notice-detail {
-  color: var(--fdn-text-faint);
+  color: var(--fdn-text-muted);
   font-size: 11.5px;
 }
 
@@ -1090,6 +1132,7 @@
 }
 
 .fdn-composer {
+  position: relative; /* the skill picker opens above it */
   margin: 0 10px 10px;
   padding-block: 8px 6px; /* the send button sits 6 in from the 12 corner */
   padding-inline: 12px 6px;
@@ -1098,6 +1141,117 @@
   background: var(--fdn-bg);
 }
 
+/* Under the composer: answers come from an AI and can be wrong. Quiet, but always there. Below it, on a line of
+   its own and as quiet, the Fadenstack link (`branding: false` hides it). */
+.fdn-footer {
+  margin: -4px 12px 8px;
+  color: var(--fdn-text-faint);
+  font-size: 11.5px;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.fdn-ai-notice,
+.fdn-footer-brand {
+  margin: 0;
+}
+
+/* A notice that wraps does so in even lines, never one word alone on the last; where balance is not supported,
+   pretty keeps the last line from being one word, and older engines wrap as usual. */
+.fdn-ai-notice {
+  text-wrap: pretty;
+  text-wrap: balance;
+}
+
+/* Just enough to tell the link's line from a notice that wraps. */
+.fdn-ai-notice + .fdn-footer-brand {
+  margin-block-start: 2px;
+}
+
+/* Muted like the notice, underlined so it is not told apart by colour alone; no arrow on so small a line. */
+.fdn-footer-link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  white-space: nowrap;
+}
+
+.fdn-footer-link:hover {
+  color: var(--fdn-text-muted);
+}
+
+/* A link that opens in a new tab: a small arrow after its text, pointing the way the text runs. */
+.fdn-external .fdn-icon {
+  display: inline-block;
+  margin-inline-start: 2px;
+  vertical-align: -1px;
+}
+
+.fdn-external .fdn-icon:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+/* About: an overlay below the settings' gear, like the menus. Its text starts where the menu items' labels start
+   (6 the menu + 6 the item + 16 the check + 8 the gap), so it opens in place of the item that opened it. */
+.fdn-about {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-block: 6px 12px;
+  padding-inline: 36px 6px;
+}
+
+.fdn-about-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.fdn-about-agent,
+.fdn-about-environment {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-inline-end: 6px;
+  overflow-wrap: anywhere;
+}
+
+.fdn-about-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.fdn-about-line {
+  color: var(--fdn-text-muted);
+  font-size: 12px;
+}
+
+/* One link per line: nothing wraps unevenly, whatever the language makes of their names. */
+.fdn-about-links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.fdn-about-link {
+  color: var(--fdn-accent);
+  text-decoration: none;
+}
+
+.fdn-about-link:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.fdn-about .fdn-button {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 6px;
+}
+
 .fdn-composer:focus-within {
   border-color: var(--fdn-accent);
   box-shadow: 0 0 0 1px var(--fdn-accent);
@@ -1225,8 +1379,14 @@
   white-space: nowrap;
 }
 
+/* Short by intent (a site, a page count); a longer one is cut to one line, never wrapped out of the chip. */
 .fdn-chip-sub {
+  min-width: 0;
+  max-width: 50%;
+  overflow: hidden;
   color: var(--fdn-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .fdn-chip-remove {
@@ -1244,3 +1404,37 @@
 .fdn-chip-remove:hover {
   background: var(--fdn-surface-hover);
 }
+
+/* A picture on its chip: small, cut to a square. */
+.fdn-chip-image {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  object-fit: cover;
+}
+
+.fdn-chip-skill .fdn-icon {
+  color: var(--fdn-accent);
+}
+
+/* The skills `$` lists: above the composer, as wide as it, the active one marked as the pointer marks one. */
+.fdn-skill-picker {
+  top: auto;
+  bottom: calc(100% + 4px);
+  inset-inline: 0;
+  min-width: 0;
+  max-width: none;
+}
+
+.fdn-skill-list {
+  max-height: min(320px, 50vh);
+  overflow-y: auto;
+}
+
+.fdn-skill-option[aria-selected="true"] {
+  background: var(--fdn-surface-hover);
+}
+
+.fdn-skill-hint {
+  padding-block-end: 2px;
+}