@ai-ecoverse/slicc-spectrum 1.23.0 → 1.23.2

package/dist/slicc-ui.js

@@ -8541,8 +8541,8 @@ 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);
   }
@@ -10338,6 +10338,7 @@ function deepActive(root2) {
   return active?.shadowRoot ? deepActive(active.shadowRoot) ?? active : active;
 }
 var scrollback = 1 << 18;
+var laid = ({ width, height }) => width > 0 && height > 0;
 var ended = { write() {
 }, resize() {
 }, close() {
@@ -10540,7 +10541,14 @@ var SliccTerminalPanel = class extends ThemedElement {
     if (this.#screen && bound?.port === model.terminals && bound.id === info.id)
       return this.#screen;
     const terminal = document.createElement("slicc-terminal");
-    terminal.backend = keep(model.terminals, info.id);
+    const backend = keep(model.terminals, info.id);
+    terminal.backend = {
+      open: async (sink) => {
+        await this.#placed(info.id);
+        terminal.fit();
+        return backend.open(sink, { cols: terminal.cols, rows: terminal.rows });
+      }
+    };
     terminal.addEventListener("exit", () => model.terminals.close(info.id));
     this.#screen = terminal;
     this.#bound = { port: model.terminals, id: info.id };
@@ -10556,6 +10564,18 @@ var SliccTerminalPanel = class extends ThemedElement {
     );
     return terminal;
   }
+  #placed(id) {
+    const host2 = this.getRootNode().host;
+    const panel = host2?.localName === "slicc-dock" ? host2.api.getPanel(terminalPanel(id)) : void 0;
+    if (!panel || laid(panel.api)) return Promise.resolve();
+    return new Promise((resolve) => {
+      const watch = panel.api.onDidDimensionsChange((size4) => {
+        if (!laid(size4)) return;
+        watch.dispose();
+        resolve();
+      });
+    });
+  }
   #request() {
     this.dispatchEvent(new CustomEvent("new-terminal", { bubbles: true, composed: true }));
   }
@@ -13689,6 +13709,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);
@@ -13805,7 +13829,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;
@@ -13890,7 +13914,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() ?? [],
@@ -15540,9 +15564,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) {
@@ -17118,6 +17140,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() {
@@ -17169,6 +17206,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;
@@ -17247,7 +17288,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() ?? "");
@@ -17340,7 +17383,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>
@@ -18415,7 +18465,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");
@@ -18651,6 +18701,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}>
@@ -19206,6 +19259,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);
@@ -19274,6 +19331,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);