@fungi.computer/parakeet 0.4.0 → 0.5.0

package/dist/styles.css

@@ -18,6 +18,7 @@
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -1601,6 +1602,9 @@
   .pointer-events-auto {
     pointer-events: auto;
   }
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .countdown {
     &.countdown {
       line-height: 1em;
@@ -4771,6 +4775,9 @@
   .m-auto {
     margin: auto;
   }
+  .-mx-xs {
+    margin-inline: calc(var(--spacing-xs) * -1);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -6129,15 +6136,15 @@
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
+  .min-h-12 {
+    min-height: calc(var(--spacing) * 12);
+  }
   .min-h-14 {
     min-height: calc(var(--spacing) * 14);
   }
   .min-h-96 {
     min-height: calc(var(--spacing) * 96);
   }
-  .min-h-\[48px\] {
-    min-height: 48px;
-  }
   .loading-sm {
     @layer daisyui.l1.l2 {
       width: calc(var(--size-selector, 0.25rem) * 5);
@@ -6158,6 +6165,9 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-\[calc\(100\%\+2\*var\(--spacing-xs\)\)\] {
+    width: calc(100% + 2 * var(--spacing-xs));
+  }
   .w-\[min\(32rem\,calc\(100vw-2rem\)\)\] {
     width: min(32rem, calc(100vw - 2rem));
   }
@@ -6191,6 +6201,9 @@
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-none {
+    max-width: none;
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -6310,12 +6323,12 @@
   .place-items-center {
     place-items: center;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
-  .items-end {
-    align-items: flex-end;
-  }
   .items-start {
     align-items: flex-start;
   }
@@ -6363,9 +6376,6 @@
       margin-block-end: calc(var(--spacing-sm) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .self-stretch {
-    align-self: stretch;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -6413,10 +6423,6 @@
   .rounded-none {
     border-radius: 0;
   }
-  .\!border-0 {
-    border-style: var(--tw-border-style) !important;
-    border-width: 0px !important;
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -6498,9 +6504,6 @@
       }
     }
   }
-  .\!bg-transparent {
-    background-color: transparent !important;
-  }
   .bg-\[var\(--stipe-surface\)\] {
     background-color: var(--stipe-surface);
   }
@@ -6575,9 +6578,6 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
-  .p-2xs {
-    padding: var(--spacing-2xs);
-  }
   .p-lg {
     padding: var(--spacing-lg);
   }
@@ -6626,9 +6626,6 @@
   .py-2xs {
     padding-block: var(--spacing-2xs);
   }
-  .py-\[calc\(\(3rem-1\.25rem\)\/2\)\] {
-    padding-block: calc((3rem - 1.25rem) / 2);
-  }
   .py-md {
     padding-block: var(--spacing-md);
   }
@@ -6668,6 +6665,9 @@
   .text-right {
     text-align: right;
   }
+  .text-start {
+    text-align: start;
+  }
   .prose-caps {
     :root &.prose {
       --tw-prose-body: var(--color-base-content);
@@ -6708,6 +6708,10 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -6984,10 +6988,6 @@
   .opacity-70 {
     opacity: 70%;
   }
-  .\!shadow-none {
-    --tw-shadow: 0 0 #0000 !important;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
-  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -7312,6 +7312,12 @@
       }
     }
   }
+  .after\:hidden {
+    &::after {
+      content: var(--tw-content);
+      display: none;
+    }
+  }
   .hover\:bg-base-200 {
     &:hover {
       @media (hover: hover) {
@@ -7347,12 +7353,6 @@
       }
     }
   }
-  .focus\:\!outline-none {
-    &:focus {
-      --tw-outline-style: none !important;
-      outline-style: none !important;
-    }
-  }
   .focus-visible\:scale-100 {
     &:focus-visible {
       --tw-scale-x: 100%;
@@ -8868,6 +8868,20 @@
       white-space: nowrap;
     }
   }
+  .caps-app-status-bar .badge {
+    height: auto;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--stipe-fg-muted);
+    font-size: 0.625rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+  .caps-app-status-bar .badge-warning {
+    color: var(--color-warning);
+  }
   .caps-status-bar-picker-list {
     min-width: min(18rem, calc(100vw - 1.5rem));
   }
@@ -11118,17 +11132,61 @@
     color: var(--color-base-content);
     font-size: 0.875rem;
   }
-  .caps-composer > .join {
-    border: var(--border) solid var(--color-base-content);
-    @supports (color: color-mix(in lab, red, red)) {
-      border: var(--border) solid color-mix(in oklab, var(--color-base-content) 12%, var(--color-base-300));
-    }
-    border-radius: var(--radius-box);
-    background: var(--color-base-200);
-    box-shadow: var( --stipe-shadow-inset, inset 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) var(--color-base-content), 0 calc(var(--depth) * 1px) 0 var(--color-base-100) );
-    @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: var( --stipe-shadow-inset, inset 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) color-mix( in oklab, var(--color-base-content) calc(var(--depth) * 12%), transparent ), 0 calc(var(--depth) * 1px) 0 color-mix( in oklab, var(--color-base-100) calc(var(--depth) * 60%), transparent ) );
-    }
+  .caps-composer {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-input {
+    position: relative;
+    min-width: 0;
+  }
+  .caps-composer-input :is(textarea, input), .caps-composer-input :is(textarea, input):focus, .caps-composer-input :is(textarea, input):focus-visible {
+    width: 100%;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    outline: none;
+    padding-inline: 0;
+  }
+  .caps-composer-bar {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-toolbar {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-composer-toolbar > .caps-status-tray {
+    flex: 1;
+    min-width: 0;
+    --caps-status-tray-row-wrap: wrap;
+    --caps-status-tray-chips-display: contents;
+    --caps-status-tray-key-height: calc(var(--size-field) * 8);
+    --caps-status-tray-chip-height: var(--caps-status-tray-key-height);
+    --caps-status-tray-width: 28rem;
+    --caps-keycap-width: auto;
+    --caps-keycap-height: var(--caps-status-tray-key-height);
+  }
+  .caps-composer-toolbar > .caps-status-tray .caps-status-tray-row :is(.caps-keycap-button, .caps-status-tray-chip, .caps-select) {
+    height: var(--caps-status-tray-key-height);
+    min-height: var(--caps-status-tray-key-height);
+  }
+  .caps-composer-toolbar > .caps-status-tray .caps-status-tray-label {
+    display: flex;
+    align-items: center;
   }
   .caps-alert[data-tone="error"] h3 {
     color: var(--color-error);
@@ -12771,6 +12829,13 @@
     padding: var(--spacing-md);
     text-align: center;
   }
+  .caps-send-action {
+    --caps-keycap-width: auto;
+    --caps-keycap-justify: center;
+    --caps-keycap-padding: 0;
+    --caps-keycap-min-width: var(--caps-keycap-height, 2.5rem);
+    flex: none;
+  }
   .caps-send-glyph {
     display: inline-grid;
     place-items: center;
@@ -13715,15 +13780,15 @@
     isolation: var(--caps-button-outline-isolation, auto);
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--caps-button-outline-face, revert-layer);
-    color: var(--caps-button-outline-ink, revert-layer);
+    background-color: var(--caps-key-face);
+    color: var(--caps-button-outline-ink, var(--color-base-content));
   }
   .caps-button.btn-outline:is(:disabled, [aria-disabled="true"]) {
     background-color: var( --caps-button-outline-disabled-face, var(--color-base-200) );
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]):hover {
-    background-color: var( --caps-button-outline-hover-face, var(--caps-button-outline-face, revert-layer) );
-    color: var( --caps-button-outline-hover-ink, var(--caps-button-outline-ink, revert-layer) );
+    background-color: var( --caps-button-outline-hover-face, var(--caps-keycap-hover-face, var(--caps-key-face)) );
+    color: var( --caps-button-outline-hover-ink, var(--caps-button-outline-ink, var(--color-base-content)) );
   }
   .caps-button.btn-outline::before {
     content: var(--caps-button-outline-inset-content, none);
@@ -13736,21 +13801,36 @@
   .caps-button.btn-outline:hover::before {
     background: var(--color-base-content);
   }
-  .caps-button.btn-outline {
-    --btn-border: var(--color-base-content);
+  .caps-keycap-button, .caps-button-filled, .caps-button.btn-outline {
+    --caps-key-lip: calc(var(--depth) * 1px);
+    --caps-key-rest-shadow: inset 0 1px 0
+        oklch(100% 0 0 / calc(var(--depth) * var(--caps-key-top-edge, 0.14))),
+      0 var(--caps-key-lip) 0
+        var(--caps-key-face);
     @supports (color: color-mix(in lab, red, red)) {
-      --btn-border: color-mix(
-      in oklab,
-      var(--color-base-content) 24%,
-      transparent
-    );
+      --caps-key-rest-shadow: inset 0 1px 0
+        oklch(100% 0 0 / calc(var(--depth) * var(--caps-key-top-edge, 0.14))),
+      0 var(--caps-key-lip) 0
+        color-mix(
+          in oklab,
+          var(--caps-key-face),
+          var(--caps-key-lip-ink, var(--color-base-content)) 14%
+        );
     }
+    --caps-key-pressed-shadow: inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)), 0 0 0 transparent;
+  }
+  .caps-button.btn-outline {
+    --btn-border: var(--stipe-linework);
+    --caps-key-face: var(--caps-button-outline-face, var(--color-base-200));
     font-weight: var(--caps-button-weight, 500);
-    box-shadow: var(--caps-button-outline-drop, var(--caps-button-drop, none));
+    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop, var(--caps-key-rest-shadow)) );
+    transition-property: background-color, border-color, box-shadow, translate;
+    transition-duration: var(--stipe-motion-fast);
+    transition-timing-function: ease-out;
   }
   .caps-button.btn-outline:not(:disabled):not([aria-disabled="true"]):active {
-    translate: 0 var(--caps-button-press, var(--stipe-press-depth));
-    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop-active, none) );
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
+    box-shadow: var( --caps-button-outline-drop, var(--caps-button-drop-active, var(--caps-key-pressed-shadow)) );
   }
   .caps-button.btn-ghost {
     font-weight: 500;
@@ -13760,6 +13840,9 @@
   }
   .caps-button-filled {
     --btn-bg: var(--btn-color);
+    --caps-key-face: var(--btn-color);
+    --caps-key-lip-ink: black;
+    --caps-key-top-edge: 0.06;
     --caps-button-filled-edge: var(
       --caps-button-border-color,
       var(--btn-bg)
@@ -13769,7 +13852,7 @@
       --caps-button-border-color,
       color-mix(
         in oklab,
-        color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 8%)),
+        color-mix(in oklab, var(--btn-bg), black calc(var(--depth) * 6%)),
         var(--stipe-linework)
           calc((1 - var(--depth)) * var(--caps-button-linework, 100%))
       )
@@ -13777,7 +13860,7 @@
     }
     --caps-button-filled-drop: var(
       --caps-button-drop,
-      inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18))
+      var(--caps-key-rest-shadow)
     );
     background-color: var(--btn-bg);
     color: var(--btn-fg);
@@ -13820,9 +13903,9 @@
     @supports (color: color-mix(in lab, red, red)) {
       --btn-bg: color-mix(in oklab, var(--btn-color) 92%, black);
     }
-    translate: 0 var(--caps-button-press, var(--stipe-press-depth));
+    translate: 0 var(--caps-button-press, var(--caps-key-lip));
     scale: var(--stipe-press-scale);
-    box-shadow: var( --caps-button-drop-active, inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)) );
+    box-shadow: var(--caps-button-drop-active, var(--caps-key-pressed-shadow));
     transition-duration: var(--stipe-motion-squish);
   }
   .caps-button.caps-button-menubar {
@@ -14803,7 +14886,7 @@
     scale: none;
   }
   .caps-button-filled:not(:disabled):not([aria-disabled="true"]):active {
-    translate: var(--caps-button-press-reduced, none);
+    translate: var(--caps-button-press-reduced, 0 var(--caps-key-lip));
   }
   .caps-gooey-motion, .caps-gooey-motion::before, .caps-switch, .caps-radio, .caps-checkbox, .caps-checkbox-track, .caps-input, .caps-status-bead {
     animation: none !important;
@@ -15988,7 +16071,7 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .caps-keycap, .caps-keycap-button {
+  .caps-keycap, .caps-keycap-button, .caps-button.btn-outline {
     transition: none;
   }
 }
@@ -16059,7 +16142,21 @@
     height: 0.625rem;
   }
   .caps-keycap-button {
-    --caps-keycap-lip: calc(var(--depth) * 1px);
+    --caps-key-face: var(--caps-keycap-face, var(--color-base-200));
+    --caps-keycap-rest-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)),
+      0 var(--caps-key-lip) 0
+        var(--caps-key-face),
+      0 var(--caps-key-lip) calc(var(--depth) * 2px)
+        oklch(0% 0 0 / calc(var(--depth) * 0.15));
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-rest-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)),
+      0 var(--caps-key-lip) 0
+        color-mix(in oklab, var(--caps-key-face), var(--color-base-content) 14%),
+      0 var(--caps-key-lip) calc(var(--depth) * 2px)
+        oklch(0% 0 0 / calc(var(--depth) * 0.15));
+    }
+    --caps-keycap-pressed-shadow: inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)),
+      0 0 0 transparent, 0 0 0 transparent;
     display: flex;
     width: var(--caps-keycap-width, 100%);
     min-width: var(--caps-keycap-min-width, 0);
@@ -16068,7 +16165,10 @@
     justify-content: var(--caps-keycap-justify, space-between);
     gap: var(--spacing-sm);
     padding: var(--caps-keycap-padding, var(--spacing-xs) var(--spacing-sm));
-    border: var( --caps-keycap-context-border, var(--border) solid var(--caps-keycap-edge, var(--stipe-linework)) );
+    border: var( --caps-keycap-context-border, var(--border) solid var( --caps-keycap-edge, var(--stipe-linework) ) );
+    @supports (color: color-mix(in lab, red, red)) {
+      border: var( --caps-keycap-context-border, var(--border) solid var( --caps-keycap-edge, color-mix(in oklab, var(--stipe-linework) 80%, var(--caps-key-face)) ) );
+    }
     font-size: var(--caps-keycap-font-size, inherit);
     font-weight: var( --caps-keycap-context-weight, var(--caps-keycap-font-weight, inherit) );
     border-radius: var(--radius-field);
@@ -16077,12 +16177,28 @@
       var(--caps-keycap-face, var(--color-base-200))
     );
     background-color: var(--caps-keycap-painted-face);
-    --caps-keycap-default-image: none;
-    background-image: var( --caps-keycap-context-image, var(--caps-keycap-default-image) );
-    box-shadow: var( --caps-keycap-context-shadow, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.14)), 0 var(--caps-keycap-lip) 0 var(--caps-keycap-face, var(--color-base-200)) );
+    --caps-keycap-default-image: linear-gradient(
+      to bottom,
+      var(--caps-keycap-painted-face),
+      var(--caps-keycap-painted-face)
+    );
     @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: var( --caps-keycap-context-shadow, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.14)), 0 var(--caps-keycap-lip) 0 color-mix( in oklab, var(--caps-keycap-face, var(--color-base-200)), var(--color-base-content) 14% ) );
+      --caps-keycap-default-image: linear-gradient(
+      to bottom,
+      color-mix(
+        in oklab,
+        var(--caps-keycap-painted-face),
+        white calc(var(--depth) * 3%)
+      ),
+      color-mix(
+        in oklab,
+        var(--caps-keycap-painted-face),
+        black calc(var(--depth) * 3%)
+      )
+    );
     }
+    background-image: var( --caps-keycap-context-image, var(--caps-keycap-default-image) );
+    box-shadow: var( --caps-keycap-context-shadow, var(--caps-keycap-rest-shadow) );
     color: var(--caps-keycap-ink, var(--color-base-content));
     text-align: left;
     cursor: pointer;
@@ -16091,8 +16207,8 @@
     transition-timing-function: ease-out;
   }
   .caps-keycap-button:active {
-    translate: 0 var(--caps-keycap-context-travel, var(--caps-keycap-lip));
-    box-shadow: var( --caps-keycap-active-shadow, inset 0 1px 0 oklch(0% 0 0 / calc(var(--depth) * 0.08)), 0 0 0 transparent );
+    translate: 0 var(--caps-keycap-context-travel, var(--caps-key-lip));
+    box-shadow: var( --caps-keycap-active-shadow, var(--caps-keycap-pressed-shadow) );
   }
   .caps-keycap-button:focus-visible {
     outline: 2px solid var(--caps-keycap-focus-ink, var(--color-base-content));
@@ -16139,6 +16255,28 @@
     --caps-keycap-ink: var(--color-neutral-content);
     --caps-keycap-edge: var(--color-neutral);
   }
+  .caps-keycap-button.caps-send-action[data-tone="primary"] {
+    --caps-keycap-face: var(--color-primary);
+    --caps-keycap-ink: var(--color-primary-content);
+    --caps-keycap-edge: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-edge: color-mix(in oklab, var(--color-primary) 82%, black);
+    }
+    --caps-keycap-hover-face: var(--color-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      --caps-keycap-hover-face: color-mix(
+      in oklab,
+      var(--color-primary) 92%,
+      black
+    );
+    }
+  }
+  .caps-keycap-button.caps-send-action[data-send-state="empty"] {
+    --caps-keycap-face: var(--color-base-200);
+    --caps-keycap-ink: var(--color-base-content);
+    --caps-keycap-edge: var(--stipe-linework);
+    --caps-keycap-hover-face: var(--color-base-200);
+  }
   .caps-keycap-button[data-tone="destructive"]:is(:hover, :focus-visible) {
     --caps-keycap-ink: var(--color-error);
     --caps-keycap-edge: var(--color-error);
@@ -18063,10 +18201,57 @@
     --range-thumb: var(--caps-control-range-thumb, var(--caps-slider-thumb));
   }
 }
-@layer components {
-  .chat-composer {
-    border-top: 1px solid var(--color-base-300);
+.caps-popover[data-parakeet-slash][data-side="top"] {
+  inset-inline: var(--parakeet-completion-inset, 0);
+  bottom: calc(100% - var(--parakeet-completion-inset, 0px));
+  border-color: var( --parakeet-completion-edge, var(--color-base-content) );
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: var( --parakeet-completion-edge, color-mix(in oklab, var(--color-base-content) 16%, transparent) );
   }
+  border-bottom-width: 0;
+  background: var(--parakeet-completion-face, var(--color-base-200));
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  box-shadow: none;
+}
+.parakeet-slash-menu .parakeet-slash-label {
+  min-width: 7rem;
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+.parakeet-slash-match {
+  background: none;
+  color: var(--color-primary);
+}
+.parakeet-slash-detail {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--stipe-fg-muted);
+}
+.parakeet-slash-keys {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--stipe-fg-muted);
+}
+.parakeet-slash-hint {
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--stipe-fg-muted);
+}
+.parakeet-slash-menu [data-disabled="true"] {
+  opacity: 0.5;
+}
+.parakeet-slash-menu [role="option"]:has(> .parakeet-slash-media) {
+  align-items: center;
+}
+.parakeet-slash-media {
+  display: flex;
+  flex: none;
 }
 :root {
   --prose-max-width: 80ch;
@@ -18087,57 +18272,141 @@
   overflow-wrap: break-word;
 }
 .chat-composer {
-  background: var(--color-base-100);
   flex-shrink: 0;
+  padding: 0 var(--spacing-xs) var(--spacing-xs);
 }
 .chat-composer .composer-body {
+  --parakeet-completion-inset: 0px;
+  --parakeet-completion-face: var(--color-base-200);
+  --parakeet-completion-edge: var(--stipe-hairline);
+  display: block;
+}
+.chat-composer .composer-body:has(> [data-parakeet-slash]) .composer-card {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+.chat-composer .composer-card {
+  padding: var(--spacing-sm);
+}
+.chat-composer .composer-card .caps-composer-input {
+  padding: var(--spacing-xs) var(--spacing-sm) 0;
+}
+.chat-composer .composer-attachments {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  margin: 0;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  list-style: none;
+}
+.chat-composer .composer-attachments li {
+  position: relative;
+}
+.chat-composer .composer-attachments img {
+  display: block;
+  width: 3.5rem;
+  height: 3.5rem;
+  object-fit: cover;
+}
+.chat-composer .composer-attachment-remove {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  background: var(--color-base-100);
+  opacity: 0;
+}
+.chat-composer .composer-attachments li:hover .composer-attachment-remove, .chat-composer .composer-attachments li:focus-within .composer-attachment-remove {
+  opacity: 1;
+}
+@media (hover: none) {
+  .chat-composer .composer-attachment-remove {
+    opacity: 1;
+  }
 }
 .chat-composer .composer-footer {
-  display: flex;
-  height: 32px;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0 0.75rem;
-  background: var(--color-base-200);
-  color: var(--color-base-content);
-  font-family: var(--font-sans);
-  font-size: 0.65rem;
+  padding: var(--spacing-xs);
 }
-.chat-composer .parakeet-slash-label {
-  min-width: 7rem;
+.chat-composer .composer-model-key {
+  flex: 0 1 220px;
+  min-width: 0;
+  font-size: var(--text-xs);
+}
+.chat-composer .composer-model-readout, .chat-composer .composer-status-chip {
+  color: var(--stipe-fg-muted);
+  font-size: var(--text-xs);
+}
+.chat-composer .composer-model-readout {
   font-family: var(--font-mono);
-  font-weight: 600;
 }
-.chat-composer .parakeet-slash-match {
-  background: none;
-  color: var(--color-primary);
+.chat-composer .composer-settings-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
 }
-.chat-composer .parakeet-slash-detail {
-  flex: 1;
+.chat-composer .composer-settings-chip > svg {
+  width: var(--stipe-icon-size-sm);
+  height: var(--stipe-icon-size-sm);
+}
+.chat-composer .composer-model-key .caps-keycap-button-label {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--stipe-fg-muted);
 }
-.chat-composer .parakeet-slash-keys {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  color: var(--stipe-fg-muted);
+.chat-composer .composer-card {
+  container-type: inline-size;
 }
-.chat-composer .parakeet-slash-hint {
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
+@container (max-width: 34rem) {
+  .chat-composer .composer-model-key {
+    flex: 1 1 4rem;
+  }
+  .chat-composer [data-status-tray-chip="settings"] {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+  .chat-composer .composer-readout {
+    display: none;
+  }
+}
+.chat-composer .composer-readout {
+  margin-inline-start: auto;
   color: var(--stipe-fg-muted);
+  font-size: var(--text-xs);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
-.chat-composer [data-disabled="true"] {
-  opacity: 0.5;
+.chat-composer .composer-send-key {
+  margin-inline-start: auto;
+}
+.chat-composer .composer-readout + .composer-send-key {
+  margin-inline-start: var(--spacing-sm);
+}
+.chat-composer .parakeet-decision {
+  padding: var(--spacing-xs) var(--spacing-sm) 0;
+}
+.chat-composer .parakeet-decision-list {
+  width: auto;
+  margin-inline: calc(-1 * var(--spacing-xs));
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+.chat-composer .parakeet-decision .caps-disclosure-trigger {
+  width: auto;
+  margin-inline: calc(-1 * var(--spacing-xs));
+  padding-inline: var(--spacing-xs);
+}
+.chat-composer .composer-model-key {
+  --caps-keycap-justify: space-between;
+}
+.parakeet-decision .parakeet-decision-list [role="option"] {
+  padding-inline: var(--spacing-xs);
+  background: transparent;
+}
+.parakeet-decision > [data-highlight], .parakeet-decision .parakeet-decision-list [role="option"]:has([data-highlight]) {
+  background: var(--color-base-200);
 }
 .chat-composer .parakeet-command-notice[data-tone="error"] {
   color: var(--color-error);
@@ -18145,12 +18414,6 @@
 .chat-composer .parakeet-command-notice[data-tone="success"] {
   color: var(--color-success);
 }
-.chat-composer .footer-divider {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: var(--stipe-fg-muted);
-}
 html:not([data-theme]), [data-theme="latte"] {
   --th-token: #4c4f69;
   --th-attr: #df8e1d;
@@ -18282,6 +18545,19 @@ pre.tm-code, pre.th-code {
 .tm-code, .th-code {
   font-family: var(--font-mono);
 }
+.parakeet-decision-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  --caps-keycap-width: auto;
+  --caps-keycap-justify: center;
+  --caps-keycap-padding: 0 var(--spacing-md);
+  --caps-keycap-height: calc(var(--size-field) * 8);
+}
+.parakeet-decision-actions > .caps-keycap-button {
+  height: var(--caps-keycap-height);
+}
 @layer base {
   :root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
     color-scheme: light;
@@ -19095,6 +19371,11 @@ pre.tm-code, pre.th-code {
   syntax: "*";
   inherits: false;
 }
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     :root, :host {
@@ -19151,6 +19432,7 @@ pre.tm-code, pre.th-code {
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-ease: initial;
+      --tw-content: "";
     }
   }
 }