@ai-ecoverse/slicc-spectrum 1.28.1 → 1.30.0

package/dist/slicc-ui.js

@@ -13930,6 +13930,7 @@ e25("swc-icon-alert-triangle", o51);
 // src/app/updates.ts
 var states = {
   current: ["neutral", "Up to date"],
+  queued: ["neutral", "Waiting"],
   checking: ["info", "Checking"],
   downloading: ["info", "Downloading"],
   linking: ["info", "Linking"],
@@ -14193,7 +14194,8 @@ var SliccUpdates = class extends ModelElement {
     return b`<span>Checked <time datetime=${date.toISOString()}>${shown}</time></span>`;
   }
   #item(item2) {
-    const [variant, label] = states[item2.state];
+    const [variant, state] = states[item2.state];
+    const label = item2.state === "failed" && item2.from !== null ? "Update failed" : state;
     const error = this.failures.get(item2.id) ?? item2.error;
     return b`<swc-divider size="s"></swc-divider>
     <article data-id=${item2.id} data-state=${item2.state} aria-label=${item2.label}>
@@ -14251,6 +14253,30 @@ function updatesVariant(status2) {
   if (status2.startsWith("updating")) return "info";
   return "notice";
 }
+var overscrollLocks = /* @__PURE__ */ new WeakMap();
+function lockOverscroll(document2) {
+  const lock = overscrollLocks.get(document2) ?? { count: 0, restore: () => {
+  } };
+  overscrollLocks.set(document2, lock);
+  if (lock.count === 0) {
+    const saved = [document2.documentElement, document2.body].flatMap(
+      ({ style }) => ["overscroll-behavior-x", "overscroll-behavior-y"].map((name) => {
+        const value = style.getPropertyValue(name);
+        const priority = style.getPropertyPriority(name);
+        style.setProperty(name, "none", "important");
+        return () => style.setProperty(name, value, priority);
+      })
+    );
+    lock.restore = () => {
+      for (const restore of saved) restore();
+    };
+  }
+  lock.count += 1;
+  return () => {
+    lock.count -= 1;
+    if (lock.count === 0) lock.restore();
+  };
+}
 var SliccApp = class extends ThemedElement {
   static properties = {
     ...ThemedElement.properties,
@@ -14268,6 +14294,7 @@ var SliccApp = class extends ThemedElement {
   #started = null;
   #saving = false;
   #updatesPort;
+  #unlock;
   #updatesVisibility = null;
   constructor() {
     super();
@@ -14456,12 +14483,14 @@ var SliccApp = class extends ThemedElement {
     this.ownerDocument.addEventListener("keydown", this.#keydown, true);
     this.#fonts();
     installProperties(this.ownerDocument);
+    this.#unlock = lockOverscroll(this.ownerDocument);
     this.#resize = new ResizeObserver(() => this.#measure());
     this.#resize.observe(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.ownerDocument.removeEventListener("keydown", this.#keydown, true);
+    this.#unlock();
     this.#resize?.disconnect();
   }
   get fontBase() {
@@ -19183,25 +19212,54 @@ function lick(message, handlers) {
   return event(name, decide ? b`<div class="pending">${details}${actions2}</div>` : details);
 }
 var messageCss = i`
+  swc-conversation-thread > .message,
+  swc-conversation-thread > .event {
+    margin-block-start: var(--swc-spacing-300);
+  }
+  swc-conversation-thread > .event + .event,
+  swc-conversation-thread > :first-child,
+  swc-conversation-thread > .day + * {
+    margin-block-start: 0;
+  }
   .meta {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--swc-spacing-100);
-    align-items: center;
+    gap: var(--swc-spacing-50) var(--swc-spacing-100);
+    align-items: baseline;
     font-size: var(--swc-font-size-75);
+    line-height: var(--swc-line-height-100);
     color: var(--swc-neutral-subdued-content-color-default);
   }
   .meta .who {
+    font-size: var(--swc-font-size-100);
     font-weight: 700;
     color: var(--swc-neutral-content-color-default);
   }
+  .meta swc-badge {
+    align-self: center;
+  }
   .bubble,
   .reply {
     display: flex;
     flex-direction: column;
-    gap: var(--swc-spacing-75);
+    gap: var(--swc-spacing-100);
     min-inline-size: 0;
   }
+  .assistant swc-system-message {
+    line-height: var(--swc-line-height-200);
+  }
+  swc-system-message > :not([slot]) + :not([slot]) {
+    margin-block-start: var(--swc-spacing-100);
+  }
+  swc-system-message > .tool + .tool {
+    margin-block-start: 0;
+  }
+  .text > :is(p, ul, ol, blockquote, .heading),
+  .thinking,
+  .plan,
+  .delegation {
+    max-inline-size: 72ch;
+  }
   .bubble {
     align-items: flex-end;
     max-inline-size: 100%;
@@ -19214,9 +19272,6 @@ var messageCss = i`
     background: var(--swc-background-layer-1-color);
     border-color: var(--swc-gray-300);
   }
-  swc-user-message.body {
-    font-size: var(--swc-font-size-100);
-  }
   swc-user-message.body .text {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
@@ -19242,22 +19297,36 @@ var messageCss = i`
   .text .table,
   .text pre,
   .text blockquote {
-    margin: var(--swc-spacing-85) 0;
-  }
-  .text > :first-child {
-    margin-block-start: 0;
-  }
-  .text > :last-child {
-    margin-block-end: 0;
+    margin: var(--swc-spacing-200) 0;
   }
   .text ul,
   .text ol,
   .plan ol {
-    padding-inline-start: var(--swc-spacing-350);
+    padding-inline-start: var(--swc-spacing-400);
+  }
+  .text li + li,
+  .text li > :is(ul, ol) {
+    margin-block-start: var(--swc-spacing-75);
+  }
+  .text li > :is(ul, ol) {
+    margin-block-end: 0;
   }
   .text .heading {
     font-weight: 700;
-    margin: var(--swc-spacing-200) 0 var(--swc-spacing-75);
+    line-height: var(--swc-line-height-100);
+    margin: var(--swc-spacing-400) 0 var(--swc-spacing-100);
+  }
+  .text .heading[aria-level='3'] {
+    font-size: var(--swc-font-size-400);
+  }
+  .text .heading[aria-level='4'] {
+    font-size: var(--swc-font-size-300);
+  }
+  .text > :first-child {
+    margin-block-start: 0;
+  }
+  .text > :last-child {
+    margin-block-end: 0;
   }
   .text img {
     max-inline-size: 100%;
@@ -19274,7 +19343,7 @@ var messageCss = i`
   }
   li:has(> .task) {
     list-style: none;
-    margin-inline-start: calc(-1 * var(--swc-spacing-350));
+    margin-inline-start: calc(-1 * var(--swc-spacing-400));
   }
   .task {
     color: var(--swc-neutral-subdued-content-color-default);
@@ -19285,7 +19354,7 @@ var messageCss = i`
   code,
   pre {
     font-family: var(--swc-code-font-family-stack);
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
   }
   :not(pre) > code {
     background: var(--swc-gray-100);
@@ -19297,7 +19366,8 @@ var messageCss = i`
     background: var(--swc-background-layer-1-color);
     border: var(--swc-border-width-100) solid var(--swc-gray-200);
     border-radius: var(--swc-corner-radius-100);
-    padding: var(--swc-spacing-100) var(--swc-spacing-200);
+    padding: var(--swc-spacing-200) var(--swc-spacing-300);
+    line-height: var(--swc-line-height-200);
     overflow-x: auto;
     white-space: pre;
   }
@@ -19306,12 +19376,12 @@ var messageCss = i`
   }
   table {
     border-collapse: collapse;
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
   }
   th,
   td {
     border: var(--swc-border-width-100) solid var(--swc-gray-200);
-    padding: var(--swc-spacing-50) var(--swc-spacing-100);
+    padding: var(--swc-spacing-75) var(--swc-spacing-200);
     text-align: start;
   }
   th {
@@ -19323,9 +19393,9 @@ var messageCss = i`
   .thinking {
     color: var(--swc-neutral-subdued-content-color-default);
     font-style: italic;
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
     border-inline-start: var(--swc-border-width-200) solid var(--swc-gray-300);
-    padding-inline-start: var(--swc-spacing-100);
+    padding-inline-start: var(--swc-spacing-200);
   }
   details.tool,
   details.cluster,
@@ -19333,7 +19403,7 @@ var messageCss = i`
     border: var(--swc-border-width-100) solid var(--swc-gray-200);
     border-radius: var(--swc-corner-radius-100);
     background: var(--swc-background-layer-1-color);
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
   }
   details.cluster > details.tool {
     margin: var(--swc-spacing-75) var(--swc-spacing-100);
@@ -19343,8 +19413,8 @@ var messageCss = i`
     display: flex;
     align-items: center;
     gap: var(--swc-spacing-100);
-    padding: var(--swc-spacing-50) var(--swc-spacing-100);
-    min-block-size: var(--swc-spacing-400);
+    padding: var(--swc-spacing-75) var(--swc-spacing-200);
+    min-block-size: var(--swc-spacing-500);
     list-style: none;
   }
   summary {
@@ -19451,9 +19521,9 @@ var messageCss = i`
     border: var(--swc-border-width-100) solid var(--swc-gray-200);
     border-inline-start: var(--swc-border-width-400) solid var(--tone);
     border-radius: var(--swc-corner-radius-100);
-    padding: var(--swc-spacing-85) var(--swc-spacing-200);
+    padding: var(--swc-spacing-200) var(--swc-spacing-300);
     background: var(--swc-background-layer-1-color);
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
     --tone: var(--swc-gray-400);
     --tone-text: var(--swc-neutral-subdued-content-color-default);
   }
@@ -19482,7 +19552,7 @@ var messageCss = i`
     gap: var(--swc-spacing-85);
   }
   .card-meta {
-    margin-block-start: var(--swc-spacing-75);
+    margin-block-start: var(--swc-spacing-100);
     color: var(--swc-neutral-subdued-content-color-default);
   }
   .tone-text {
@@ -19502,12 +19572,16 @@ var messageCss = i`
     color: var(--swc-negative-content-color-default);
   }
   .plan .label {
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
     font-weight: 700;
     color: var(--swc-neutral-subdued-content-color-default);
   }
   .plan ol {
-    margin: var(--swc-spacing-75) 0;
+    margin: var(--swc-spacing-100) 0 0;
+  }
+  .plan li + li,
+  ul.check li + li {
+    margin-block-start: var(--swc-spacing-75);
   }
   ul.check {
     list-style: none;
@@ -19535,13 +19609,13 @@ var messageCss = i`
     display: block;
     inline-size: 100%;
     margin: 0;
-    padding: var(--swc-spacing-50) var(--swc-spacing-100);
+    padding: var(--swc-spacing-75) var(--swc-spacing-200);
     border: 0;
     border-block-end: var(--swc-border-width-100) solid var(--swc-gray-200);
     background: var(--swc-background-layer-1-color);
     color: var(--swc-accent-content-color-default);
     font-family: var(--swc-code-font-family-stack);
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
     text-align: start;
     cursor: pointer;
   }
@@ -19551,7 +19625,7 @@ var messageCss = i`
   .question {
     border: var(--swc-border-width-100) solid var(--swc-gray-300);
     border-radius: var(--swc-corner-radius-100);
-    padding: var(--swc-spacing-100) var(--swc-spacing-200);
+    padding: var(--swc-spacing-200) var(--swc-spacing-300);
   }
   .question[data-state='open'] {
     border-color: var(--swc-accent-visual-color);
@@ -19566,8 +19640,8 @@ var messageCss = i`
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--swc-spacing-85);
-    margin-block-start: var(--swc-spacing-85);
+    gap: var(--swc-spacing-100);
+    margin-block-start: var(--swc-spacing-200);
   }
   .input {
     font: inherit;
@@ -19591,7 +19665,7 @@ var messageCss = i`
     flex-wrap: wrap;
     align-items: center;
     gap: var(--swc-spacing-75);
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
     color: var(--swc-neutral-subdued-content-color-default);
   }
   .delegation strong {
@@ -19605,8 +19679,8 @@ var messageCss = i`
     border: var(--swc-border-width-100) solid var(--swc-negative-visual-color);
     border-inline-start-width: var(--swc-border-width-400);
     border-radius: var(--swc-corner-radius-100);
-    padding: var(--swc-spacing-85) var(--swc-spacing-200);
-    font-size: var(--swc-font-size-75);
+    padding: var(--swc-spacing-200) var(--swc-spacing-300);
+    font-size: var(--swc-font-size-100);
   }
   .error-card .error-text {
     display: grid;
@@ -19626,11 +19700,18 @@ var messageCss = i`
   .day {
     display: flex;
     align-items: center;
-    gap: var(--swc-spacing-100);
-    margin: var(--swc-spacing-100) 0;
-    font-size: var(--swc-font-size-75);
+    gap: var(--swc-spacing-200);
+    font-size: var(--swc-font-size-100);
     color: var(--swc-neutral-subdued-content-color-default);
   }
+  .day {
+    margin: var(--swc-spacing-400) 0 var(--swc-spacing-100);
+    font-size: var(--swc-font-size-75);
+    font-weight: 700;
+  }
+  .day:first-child {
+    margin-block-start: 0;
+  }
   .marker-text {
     display: inline-flex;
     align-items: center;
@@ -19643,7 +19724,7 @@ var messageCss = i`
     background: var(--swc-gray-200);
   }
   .notice {
-    font-size: var(--swc-font-size-75);
+    font-size: var(--swc-font-size-100);
     color: var(--swc-neutral-subdued-content-color-default);
     text-align: center;
   }
@@ -19788,21 +19869,28 @@ var SliccChat = class extends ThemedElement {
         flex: 1;
         min-height: 0;
         overflow-y: auto;
-        padding: var(--swc-spacing-200) var(--swc-spacing-300) var(--swc-spacing-400);
+        container-type: inline-size;
+        padding: var(--swc-spacing-400) var(--swc-spacing-300) var(--swc-spacing-500);
+        font-size: var(--swc-font-size-200);
+      }
+      @container (min-width: 600px) {
+        .column {
+          padding-inline: var(--swc-spacing-300);
+        }
       }
       .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-inline-size: 860px;
+        max-inline-size: calc(var(--swc-spacing-1000) * 10);
         margin: 0 auto;
       }
       .empty {
         color: var(--swc-neutral-subdued-content-color-default);
         text-align: center;
         padding: var(--swc-spacing-700) 0;
-        font-size: var(--swc-font-size-75);
+        font-size: var(--swc-font-size-100);
       }
     `
   ];
@@ -19965,7 +20053,9 @@ var SliccChat = class extends ThemedElement {
       if (label !== previous) {
         out.push([
           `day:${message.id}`,
-          b`<div class="day" role="separator" data-day=${label}><span class="line"></span><span>${label}</span><span class="line"></span></div>`
+          b`<div class="day" role="separator" aria-label=${label} data-day=${label}>
+            <span class="line"></span><span>${label}</span><span class="line"></span>
+          </div>`
         ]);
         previous = label;
       }