@ai-ecoverse/slicc-spectrum 1.23.1 → 1.23.3

package/dist/slicc-ui.js

@@ -8541,14 +8541,15 @@ var ModelElement = class extends i2 {
   subscribe(model) {
     return [];
   }
-  focusOn(selector) {
-    const focus = () => this.renderRoot.querySelector(selector)?.focus();
+  focusOn(...selectors) {
+    const focus = () => selectors.map((selector) => this.renderRoot.querySelector(selector)).find(Boolean)?.focus();
     if (this.hasUpdated) focus();
     else void this.updateComplete.then(focus);
   }
   connectedCallback() {
     super.connectedCallback();
     this.#bind();
+    this.requestUpdate();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -13709,6 +13710,10 @@ var SliccUpdates = class extends ModelElement {
         padding: var(--swc-spacing-400);
         margin: 0 auto;
       }
+      .page:focus-visible {
+        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
+        outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
+      }
       .hint {
         margin: 0 0 var(--swc-spacing-300);
         color: var(--swc-neutral-subdued-content-color-default);
@@ -13825,7 +13830,7 @@ var SliccUpdates = class extends ModelElement {
     ];
   }
   focus() {
-    this.focusOn("swc-button, summary");
+    this.focusOn("swc-button, summary", ".page");
   }
   async act(id, action) {
     const port = this.model?.updates;
@@ -13910,7 +13915,7 @@ var SliccUpdates = class extends ModelElement {
   }
   render() {
     const port = this.model?.updates;
-    return b`<div class="page">
+    return b`<div class="page" tabindex="-1">
       <p class="hint">${hint(port)}</p>
       ${c(
       port?.list() ?? [],
@@ -15560,9 +15565,7 @@ var SliccBrowser = class extends ModelElement {
   }
   focus() {
     void this.updateComplete.then(
-      () => this.focusOn(
-        this.renderRoot.querySelector('.window[aria-current="true"]') ? '.window[aria-current="true"]' : ".window"
-      )
+      () => this.focusOn('.window[aria-current="true"]', ".window", "form swc-button")
     );
   }
   #key(tab) {
@@ -17138,6 +17141,21 @@ var messageCss = i`
 `;
 
 // src/app/chat.ts
+var touched = false;
+document.addEventListener(
+  "pointerdown",
+  (event) => {
+    touched = event.pointerType !== "mouse";
+  },
+  true
+);
+document.addEventListener(
+  "keydown",
+  () => {
+    touched = false;
+  },
+  true
+);
 var SliccChat = class extends ThemedElement {
   static properties = { ...ThemedElement.properties, agent: {} };
   constructor() {
@@ -17189,6 +17207,10 @@ var SliccChat = class extends ThemedElement {
         overflow-y: auto;
         padding: 12px 16px 24px;
       }
+      .log:focus-visible {
+        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
+        outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
+      }
       .column {
         max-width: 860px;
         margin: 0 auto;
@@ -17267,7 +17289,9 @@ var SliccChat = class extends ThemedElement {
     this.#observe();
   }
   focus() {
-    this.focusOn("slicc-composer");
+    if (!touched && globalThis.matchMedia("(pointer: fine)").matches)
+      this.focusOn("slicc-composer");
+    else this.focusOn(".log");
   }
   #id() {
     return this.agent || (this.model?.agent.active() ?? "");
@@ -17360,7 +17384,14 @@ var SliccChat = class extends ThemedElement {
       <header>
         ${agent ? this.#meta(agent) : b`<span>No agent</span>`}
       </header>
-      <div class="log" role="log" aria-live="polite" aria-label="Conversation" @scroll=${this.#scroll}>
+      <div
+        class="log"
+        role="log"
+        aria-live="polite"
+        aria-label="Conversation"
+        tabindex="-1"
+        @scroll=${this.#scroll}
+      >
         <div class="column">
           ${agent && messages.length > 0 ? this.#items(messages, agent) : b`<div class="empty">No messages yet. Ask ${agent?.name ?? "the agent"} something.</div>`}
         </div>
@@ -18435,7 +18466,7 @@ var SliccMemory = class extends ModelElement {
     return [model.memory.on("memories", update), model.agent.on("agents", update)];
   }
   focus() {
-    this.focusOn("sp-search");
+    this.focusOn(".head", ".bar swc-action-button");
   }
   #save(memory) {
     const form = this.renderRoot.querySelector(".editor");
@@ -18671,6 +18702,9 @@ var SliccMonitor = class extends ModelElement {
   subscribe(model) {
     return [model.monitor.on("snapshot", () => this.requestUpdate())];
   }
+  focus() {
+    this.focusOn(".bar swc-action-button");
+  }
   #vital(vital) {
     if (vital.ratio !== void 0) {
       return b`<div class="vital" data-id=${vital.id}>
@@ -19226,6 +19260,10 @@ var SliccSprinkle = class extends ThemedElement {
       height: 100%;
       border: 0;
     }
+    iframe:focus-visible {
+      outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
+      outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
+    }
     .frame {
       border: 1px solid var(--spectrum-gray-200);
       background: var(--spectrum-background-layer-1-color);
@@ -19294,6 +19332,9 @@ var SliccSprinkle = class extends ThemedElement {
     }
   };
   #dips = new Dips();
+  focus() {
+    this.focusOn("iframe");
+  }
   subscribe(model) {
     this.#dips = dipsOf(this) ?? this.#dips;
     globalThis.addEventListener("message", this.#message);