@ai-ecoverse/slicc-spectrum 2.3.0 → 2.3.1

package/README.md

@@ -354,7 +354,7 @@ Renders nothing without the port.
 The message box uses Spectrum Web Components 2.0.0-beta.6. Its explicit accessible names stay "Message" for the textarea, "Send" ("Steer" while busy) for send, "Add" for upload and "Stop" for stop, using `accessible-label`, `send-accessible-label`, `upload-accessible-label` and `stop-accessible-label`. Attachment navigation stays "Show previous attachments" / "Show more attachments", and the strip stays "Uploaded assets strip", through their `*-accessible-label` attributes.
 <kbd>Enter</kbd> sends, or steers a running reply: the message joins after the current tool round, without interrupting; <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>Enter</kbd> queues a follow-up that runs after the reply and can be withdrawn; <kbd>Shift</kbd>+<kbd>Enter</kbd> adds a line; <kbd>Tab</kbd> takes the suggested follow-up; <kbd>↑</kbd>/<kbd>↓</kbd> at the start or end walk this agent's history; <kbd>Esc</kbd> stops.
 `/` completes commands (`/clear`, `/compact`, `/model`, `/thinking`, `/scoop`, `/stop`, `/freeze` when the port can freeze, `/theme`) and their arguments, `@` mentions agents and files.
-Attach from the computer, from SLICC's files, a browser screenshot or a shared secret (with a `vault.put`, the popup takes the value too, checks it like Settings › Secrets, puts it in the vault and attaches the name, showing errors inline and clearing the field; an empty value shares a name the vault already has, and a new value for one asks before it replaces it; while the vault is away (`availability()` `connecting` or `waiting`) or locked, it takes no value and says so; without one, it attaches the name and says to add the value in Settings › Secrets), or paste and drop files (25 MB each; a dropped folder, told apart by its drag entry, becomes a “Folders can’t be attached” chip, and a file that can't be read a “Could not read the file” chip, instead of an attachment).
+Attach from the computer, from SLICC's files, a browser screenshot or a shared secret (with a `vault.put`, the popup takes the value too, checks it like Settings › Secrets, puts it in the vault and attaches the name, showing errors inline and clearing the field; an empty value shares a name the vault already has, and a new value for one asks before it replaces it; while the vault is away (`availability()` `connecting` or `waiting`) or locked, it takes no value and says so; without one, it attaches the name and says to add the value in Settings › Secrets; the popup closes on Cancel (`data-action="cancel-secret"`, disabled while a share is pending), on a press outside the form (ignored while a share is pending) and on Escape, each clearing the typed value), or paste and drop files (25 MB each; a dropped folder, told apart by its drag entry, becomes a “Folders can’t be attached” chip, and a file that can't be read a “Could not read the file” chip, instead of an attachment).
 <kbd>Esc</kbd> in the `+` menu closes it, from any item, and puts focus back on `+`; it goes no further, so it doesn't also stop a reply.
 Queued messages wait above it in a dashed box (`--swc-neutral-visual-color`, 3:1 or more against the composer in both themes), to send now or drop; a steer the agent still holds (`mode: 'steer'`, `li.queued[data-mode=steer]`) reads "Sends at the next step" and can only be dropped.
 Model and thinking pickers.

package/dist/slicc-ui.js

@@ -35601,6 +35601,10 @@ var SliccComposer = class extends ThemedElement {
     const released = event2 instanceof KeyboardEvent && (event2.code === "KeyM" || event2.key === "Alt");
     if (this.dictating && (released || event2.type === "blur")) this.dictate();
   };
+  #outside = (event2) => {
+    const form = this.renderRoot.querySelector("form.secret");
+    if (form && !this.sharing && !event2.composedPath().includes(form)) this.closeSecret();
+  };
   #keys = { capture: true, handleEvent: (event2) => this.#keydown(event2) };
   constructor() {
     super();
@@ -35894,8 +35898,10 @@ var SliccComposer = class extends ThemedElement {
         outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
         outline-offset: var(--swc-focus-ring-gap);
       }
-      .secret swc-button {
-        justify-self: start;
+      .secret .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--swc-spacing-100);
       }
       .secret-error {
         display: flex;
@@ -35933,6 +35939,7 @@ var SliccComposer = class extends ThemedElement {
     clearTimeout(this.#abandon);
     globalThis.addEventListener("keyup", this.#release);
     globalThis.addEventListener("blur", this.#release);
+    globalThis.addEventListener("pointerdown", this.#outside, true);
     if (this.hasUpdated) this.#wire();
   }
   firstUpdated() {
@@ -35942,6 +35949,7 @@ var SliccComposer = class extends ThemedElement {
     super.disconnectedCallback();
     globalThis.removeEventListener("keyup", this.#release);
     globalThis.removeEventListener("blur", this.#release);
+    globalThis.removeEventListener("pointerdown", this.#outside, true);
     clearValues(this.renderRoot);
     const kept3 = this.#waiting.draft?.attachments;
     const held2 = [
@@ -36288,6 +36296,10 @@ ${this.value}` : text4;
     const takes = commands.some((command2) => command2.name === name && command2.args);
     this.popup = found && (found.kind !== "argument" || takes) ? { ...found, items: this.#choices(found.kind, found.query), index: 0 } : null;
   }
+  closeSecret() {
+    clearValues(this.renderRoot);
+    this.popup = null;
+  }
   openPopup(kind) {
     clearValues(this.renderRoot);
     this.secretError = null;
@@ -36531,9 +36543,7 @@ ${this.value}` : text4;
         );
       };
       const close = (event2) => {
-        if (event2.key !== "Escape") return;
-        clearValues(this.renderRoot);
-        this.popup = null;
+        if (event2.key === "Escape") this.closeSecret();
       };
       const bad = (name) => this.secretField === name ? "true" : A;
       const described2 = (name) => this.secretField === name ? "secret-error" : A;
@@ -36543,7 +36553,10 @@ ${this.value}` : text4;
         <label class="field"><span>Name</span><input name="name" placeholder="API_TOKEN" autocomplete="off" spellcheck="false" aria-invalid=${bad("name")} aria-describedby=${described2("name")} /></label>
         ${valued ? b`<label class="field"><span>Value</span><input name="value" type="password" autocomplete="off" spellcheck="false" aria-invalid=${bad("value")} aria-describedby=${described2("value")} /></label>` : A}
         ${this.secretError ? b`<span class="secret-error" role="alert" id="secret-error" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.secretError}</span></span>` : A}
-        <swc-button size="s" variant="accent" data-action="share-secret" ?pending=${this.sharing} @click=${(event2) => event2.currentTarget.closest("form")?.requestSubmit()}>Share</swc-button>
+        <span class="buttons">
+          <swc-button size="s" variant="accent" data-action="share-secret" ?pending=${this.sharing} @click=${(event2) => event2.currentTarget.closest("form")?.requestSubmit()}>Share</swc-button>
+          <swc-button size="s" variant="secondary" fill-style="outline" data-action="cancel-secret" ?disabled=${this.sharing} @click=${() => this.closeSecret()}>Cancel</swc-button>
+        </span>
       </form>`;
     }
     const title2 = {