@ai-ecoverse/slicc-spectrum 1.29.0 → 1.30.0

package/dist/slicc-ui.js

@@ -19212,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%;
@@ -19243,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;
@@ -19271,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%;
@@ -19303,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);
@@ -19314,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);
@@ -19326,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;
   }
@@ -19335,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 {
@@ -19352,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,
@@ -19362,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);
@@ -19372,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 {
@@ -19480,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);
   }
@@ -19511,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 {
@@ -19531,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;
@@ -19564,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;
   }
@@ -19580,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);
@@ -19595,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;
@@ -19620,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 {
@@ -19634,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;
@@ -19655,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;
@@ -19672,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;
   }
@@ -19817,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);
       }
     `
   ];
@@ -19994,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;
       }