Styling share

packages/web/src/components/share.module.css

@@ -4,6 +4,8 @@
   flex-direction: column;
   gap: 2.5rem;
   line-height: 1;
+
+  --term-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2016'%20preserveAspectRatio%3D'xMidYMid%20meet'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'8'%20r%3D'8'%2F%3E%3C%2Fsvg%3E");
 }
 
 [data-element-button-text] {
@@ -61,6 +63,14 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 1rem;
+
+    h1 {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
   }
 
   [data-section="row"] {
@@ -107,7 +117,8 @@
     padding: 0;
     margin: 0;
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem 1rem;
+    flex-wrap: wrap;
 
     li {
       display: flex;
@@ -173,6 +184,7 @@
     div:first-child {
       flex: 0 0 auto;
       width: 18px;
+      opacity: 0.65;
       svg {
         color: var(--sl-color-text-secondary);
         display: block;
@@ -203,6 +215,10 @@
       line-height: 18px;
       font-size: 0.75rem;
 
+      b {
+        font-weight: 500;
+      }
+
       &[data-size="md"] {
         font-size: 0.875rem;
       }
@@ -258,6 +274,21 @@
       }
     }
   }
+
+  [data-part-type="tool-edit"] {
+    [data-part-tool-body] {
+      gap: 0.5rem;
+    }
+    [data-part-title] {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      b {
+        color: var(--sl-color-text);
+      }
+    }
+  }
 }
 
 [data-element-message-text] {
@@ -269,14 +300,6 @@
   align-items: flex-start;
   gap: 1rem;
 
-  pre {
-    line-height: 1.5;
-    font-size: 0.875rem;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    color: var(--sl-color-text);
-  }
-
   &[data-size="sm"] {
     pre {
       font-size: 0.75rem;
@@ -289,6 +312,14 @@
     }
   }
 
+  pre {
+    line-height: 1.5;
+    font-size: 0.875rem;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    color: var(--sl-color-text);
+  }
+
   button {
     flex: 0 0 auto;
     padding: 2px 0;
@@ -327,7 +358,75 @@
   }
 }
 
-.code-block {
+[data-element-message-terminal] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  [data-section="body"] {
+    border: 1px solid var(--sl-color-divider);
+    border-radius: 0.25rem;
+
+    [data-section="header"] {
+      position: relative;
+      border-bottom: 1px solid var(--sl-color-divider);
+      width: 100%;
+      height: 25px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        top: 8px;
+        left: 10px;
+        width: 2rem;
+        height: 0.5rem;
+        line-height: 0;
+        background-color: var(--sl-color-hairline);
+        mask-image: var(--term-icon);
+        mask-repeat: no-repeat;
+      }
+    }
+  }
+
+  [data-section="content"] {
+    padding: 0.5rem calc(0.5rem + 3px);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+
+    pre {
+      line-height: 1.6;
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+  }
+
+  &[data-expanded="true"] {
+    pre {
+      display: block;
+    }
+  }
+  &[data-expanded="false"] {
+    pre {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 7;
+      overflow: hidden;
+    }
+  }
+
+  button {
+    flex: 0 0 auto;
+    padding-left: 1px;
+    font-size: 0.75rem;
+  }
+}
+
+.diff-code-block {
   pre {
     line-height: 1.25;
     font-size: 0.75rem;