@fungi.computer/parakeet 0.4.0 → 0.6.0

package/dist/styles.css

@@ -1601,6 +1601,9 @@
   .pointer-events-auto {
     pointer-events: auto;
   }
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .countdown {
     &.countdown {
       line-height: 1em;
@@ -2421,6 +2424,248 @@
       }
     }
   }
+  .\!input {
+    @layer daisyui.l1.l2.l3 {
+      position: relative !important;
+      display: inline-flex !important;
+      flex-shrink: 1 !important;
+      appearance: none !important;
+      align-items: center !important;
+      gap: calc(0.25rem * 2) !important;
+      background-color: var(--color-base-100) !important;
+      padding-inline: calc(0.25rem * 3) !important;
+      vertical-align: middle !important;
+      white-space: nowrap !important;
+      --size: calc(var(--size-field, 0.25rem) * var(--in-size-mul, 10)) !important;
+      --input-color: var(--color-base-content) !important;
+      @supports (color: color-mix(in lab, red, red)) {
+        --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000) !important;
+      }
+      cursor: text !important;
+      width: clamp(3rem, 20rem, 100%) !important;
+      height: var(--size) !important;
+      font-size: max(var(--font-size, 0rem), var(--font-size-min, 0.875rem)) !important;
+      touch-action: manipulation !important;
+      border-start-start-radius: var(--join-ss, var(--radius-field)) !important;
+      border-start-end-radius: var(--join-se, var(--radius-field)) !important;
+      border-end-start-radius: var(--join-es, var(--radius-field)) !important;
+      border-end-end-radius: var(--join-ee, var(--radius-field)) !important;
+      border: var(--border) solid var(--input-color, #0000) !important;
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important;
+      @supports (color: color-mix(in lab, red, red)) {
+        box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important;
+      }
+    }
+    & input {
+      @layer daisyui.l1.l2.l3 {
+        height: 100% !important;
+        width: 100% !important;
+        appearance: none !important;
+        background-color: transparent !important;
+        border: none !important;
+        &::placeholder {
+          color: var(--color-base-content) !important;
+          opacity: 50% !important;
+        }
+        &:focus, &:focus-within {
+          --tw-outline-style: none !important;
+          outline-style: none !important;
+          @media (forced-colors: active) {
+            outline: 2px solid transparent !important;
+            outline-offset: 2px !important;
+          }
+        }
+        &::-webkit-calendar-picker-indicator {
+          inset-inline-end: -0.15em !important;
+        }
+      }
+    }
+    &::-webkit-inner-spin-button {
+      @layer daisyui.l1.l2.l3 {
+        margin-inline-end: -10px !important;
+      }
+    }
+    &::-webkit-calendar-picker-indicator {
+      @layer daisyui.l1.l2.l3 {
+        inset-inline-end: 0.75em !important;
+      }
+    }
+    input& {
+      @layer daisyui.l1.l2.l3 {
+        position: relative !important;
+        display: inline-flex !important;
+        text-align: start !important;
+        &[type="url"], &[type="tel"], &[type="email"], &[type="number"] {
+          direction: ltr !important;
+        }
+        &::-webkit-datetime-edit, &::-webkit-date-and-time-value {
+          display: grid !important;
+          min-height: 100% !important;
+          align-items: center !important;
+          text-align: inherit !important;
+        }
+        &::-webkit-inner-spin-button {
+          margin-block: calc(0.25rem * var(--spin-my, -3)) !important;
+        }
+        &::-webkit-calendar-picker-indicator {
+          position: absolute !important;
+          width: 1em !important;
+          height: 1em !important;
+          cursor: pointer !important;
+        }
+        &::-webkit-color-swatch-wrapper {
+          padding-block: 0.25rem !important;
+        }
+      }
+    }
+    &  input {
+      @layer daisyui.l1.l2.l3 {
+        position: relative !important;
+        display: inline-flex !important;
+        text-align: start !important;
+        &[type="url"], &[type="tel"], &[type="email"], &[type="number"] {
+          direction: ltr !important;
+        }
+        &::-webkit-datetime-edit, &::-webkit-date-and-time-value {
+          display: grid !important;
+          min-height: 100% !important;
+          align-items: center !important;
+          text-align: inherit !important;
+        }
+        &::-webkit-inner-spin-button {
+          margin-block: calc(0.25rem * var(--spin-my, -3)) !important;
+        }
+        &::-webkit-calendar-picker-indicator {
+          position: absolute !important;
+          width: 1em !important;
+          height: 1em !important;
+          cursor: pointer !important;
+        }
+        &::-webkit-color-swatch-wrapper {
+          padding-block: 0.25rem !important;
+        }
+      }
+    }
+    &:focus {
+      @layer daisyui.l1.l2.l3 {
+        --input-color: var(--color-base-content) !important;
+        box-shadow: 0 1px var(--input-color) !important;
+        @supports (color: color-mix(in lab, red, red)) {
+          box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) !important;
+        }
+        outline: 2px solid var(--input-color) !important;
+        outline-offset: 2px !important;
+      }
+      @layer daisyui.l1.l2.l3 {
+        @media (pointer: coarse) {
+          @supports (-webkit-touch-callout: none) {
+            --font-size: 1rem !important;
+          }
+        }
+      }
+    }
+    &:focus-within {
+      @layer daisyui.l1.l2.l3 {
+        --input-color: var(--color-base-content) !important;
+        box-shadow: 0 1px var(--input-color) !important;
+        @supports (color: color-mix(in lab, red, red)) {
+          box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) !important;
+        }
+        outline: 2px solid var(--input-color) !important;
+        outline-offset: 2px !important;
+      }
+      @layer daisyui.l1.l2.l3 {
+        @media (pointer: coarse) {
+          @supports (-webkit-touch-callout: none) {
+            --font-size: 1rem !important;
+          }
+        }
+      }
+    }
+    &:has( > input[disabled]) {
+      @layer daisyui.l1.l2.l3 {
+        cursor: not-allowed !important;
+        border-color: var(--color-base-200) !important;
+        background-color: var(--color-base-200) !important;
+        &:is(input), :is(input) {
+          color: var(--color-base-content) !important;
+          @supports (color: color-mix(in lab, red, red)) {
+            color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
+          }
+        }
+        box-shadow: none !important;
+        &::placeholder, ::placeholder {
+          color: var(--color-base-content) !important;
+          opacity: 20% !important;
+        }
+      }
+    }
+    &:is(:disabled, [disabled]) {
+      @layer daisyui.l1.l2.l3 {
+        cursor: not-allowed !important;
+        border-color: var(--color-base-200) !important;
+        background-color: var(--color-base-200) !important;
+        &:is(input), :is(input) {
+          color: var(--color-base-content) !important;
+          @supports (color: color-mix(in lab, red, red)) {
+            color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
+          }
+        }
+        box-shadow: none !important;
+        &::placeholder, ::placeholder {
+          color: var(--color-base-content) !important;
+          opacity: 20% !important;
+        }
+      }
+    }
+    fieldset:disabled & {
+      @layer daisyui.l1.l2.l3 {
+        cursor: not-allowed !important;
+        border-color: var(--color-base-200) !important;
+        background-color: var(--color-base-200) !important;
+        &:is(input), :is(input) {
+          color: var(--color-base-content) !important;
+          @supports (color: color-mix(in lab, red, red)) {
+            color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
+          }
+        }
+        box-shadow: none !important;
+        &::placeholder, ::placeholder {
+          color: var(--color-base-content) !important;
+          opacity: 20% !important;
+        }
+      }
+    }
+    &:has( > input[disabled]) > input[disabled] {
+      @layer daisyui.l1.l2.l3 {
+        cursor: not-allowed !important;
+      }
+    }
+    :is(&[type="url"], .\!input[type="tel"], .\!input[type="email"], .\!input[type="number"]):dir(rtl) {
+      border-start-start-radius: var(--join-se, var(--radius-field)) !important;
+      border-start-end-radius: var(--join-ss, var(--radius-field)) !important;
+      border-end-start-radius: var(--join-ee, var(--radius-field)) !important;
+      border-end-end-radius: var(--join-es, var(--radius-field)) !important;
+    }
+    :is(.\!input[type="url"], &[type="tel"], .\!input[type="email"], .\!input[type="number"]):dir(rtl) {
+      border-start-start-radius: var(--join-se, var(--radius-field)) !important;
+      border-start-end-radius: var(--join-ss, var(--radius-field)) !important;
+      border-end-start-radius: var(--join-ee, var(--radius-field)) !important;
+      border-end-end-radius: var(--join-es, var(--radius-field)) !important;
+    }
+    :is(.\!input[type="url"], .\!input[type="tel"], &[type="email"], .\!input[type="number"]):dir(rtl) {
+      border-start-start-radius: var(--join-se, var(--radius-field)) !important;
+      border-start-end-radius: var(--join-ss, var(--radius-field)) !important;
+      border-end-start-radius: var(--join-ee, var(--radius-field)) !important;
+      border-end-end-radius: var(--join-es, var(--radius-field)) !important;
+    }
+    :is(.\!input[type="url"], .\!input[type="tel"], .\!input[type="email"], &[type="number"]):dir(rtl) {
+      border-start-start-radius: var(--join-se, var(--radius-field)) !important;
+      border-start-end-radius: var(--join-ss, var(--radius-field)) !important;
+      border-end-start-radius: var(--join-ee, var(--radius-field)) !important;
+      border-end-end-radius: var(--join-es, var(--radius-field)) !important;
+    }
+  }
   .input {
     @layer daisyui.l1.l2.l3 {
       position: relative;
@@ -4210,6 +4455,9 @@
   .static {
     position: static;
   }
+  .sticky {
+    position: sticky;
+  }
   .-inset-1\.5 {
     inset: calc(var(--spacing) * -1.5);
   }
@@ -4771,6 +5019,9 @@
   .m-auto {
     margin: auto;
   }
+  .-mx-xs {
+    margin-inline: calc(var(--spacing-xs) * -1);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -4826,6 +5077,34 @@
       }
     }
   }
+  .\!input {
+    .label:is(& > *, .select > *) {
+      @layer daisyui.l1.l2.l3 {
+        display: flex !important;
+        height: calc(100% - 0.5rem) !important;
+        align-items: center !important;
+        padding-inline: calc(0.25rem * 3) !important;
+        white-space: nowrap !important;
+        font-size: inherit !important;
+        &:first-child {
+          margin-inline-start: calc(0.25rem * -3) !important;
+          margin-inline-end: calc(0.25rem * 3) !important;
+          border-inline-end: var(--border) solid currentColor !important;
+          @supports (color: color-mix(in lab, red, red)) {
+            border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000) !important;
+          }
+        }
+        &:last-child {
+          margin-inline-start: calc(0.25rem * 3) !important;
+          margin-inline-end: calc(0.25rem * -3) !important;
+          border-inline-start: var(--border) solid currentColor !important;
+          @supports (color: color-mix(in lab, red, red)) {
+            border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000) !important;
+          }
+        }
+      }
+    }
+  }
   .input {
     .label:is(& > *, .select > *) {
       @layer daisyui.l1.l2.l3 {
@@ -5752,6 +6031,31 @@
   .ml-auto {
     margin-left: auto;
   }
+  .\!status {
+    @layer daisyui.l1.l2.l3 {
+      display: inline-block !important;
+      aspect-ratio: 1 / 1 !important;
+      width: calc(0.25rem * 2) !important;
+      height: calc(0.25rem * 2) !important;
+      border-radius: var(--radius-selector) !important;
+      background-color: var(--color-base-content) !important;
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
+      }
+      background-position: center !important;
+      background-repeat: no-repeat !important;
+      vertical-align: middle !important;
+      color: color-mix(in srgb, #000 30%, transparent) !important;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-black) 30%, transparent) !important;
+      }
+      background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 ) !important;
+      box-shadow: 0 2px 3px -1px currentColor !important;
+      @supports (color: color-mix(in lab, red, red)) {
+        box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000) !important;
+      }
+    }
+  }
   .status {
     @layer daisyui.l1.l2.l3 {
       display: inline-block;
@@ -6117,9 +6421,6 @@
   .max-h-72 {
     max-height: calc(var(--spacing) * 72);
   }
-  .max-h-\[320px\] {
-    max-height: 320px;
-  }
   .max-h-screen {
     max-height: 100vh;
   }
@@ -6135,9 +6436,6 @@
   .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 +6456,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 +6492,9 @@
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-none {
+    max-width: none;
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -6286,9 +6590,6 @@
   .resize {
     resize: both;
   }
-  .resize-none {
-    resize: none;
-  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -6310,12 +6611,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 +6664,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;
@@ -6380,9 +6678,6 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
-  .overflow-x-hidden {
-    overflow-x: hidden;
-  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -6413,10 +6708,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 +6789,6 @@
       }
     }
   }
-  .\!bg-transparent {
-    background-color: transparent !important;
-  }
   .bg-\[var\(--stipe-surface\)\] {
     background-color: var(--stipe-surface);
   }
@@ -6575,9 +6863,6 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
-  .p-2xs {
-    padding: var(--spacing-2xs);
-  }
   .p-lg {
     padding: var(--spacing-lg);
   }
@@ -6626,9 +6911,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 +6950,9 @@
   .text-right {
     text-align: right;
   }
+  .text-start {
+    text-align: start;
+  }
   .prose-caps {
     :root &.prose {
       --tw-prose-body: var(--color-base-content);
@@ -6984,10 +7269,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);
@@ -7223,6 +7504,13 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\!input {
+    .aura:has( > .btn,  > &,  > .select) {
+      @layer daisyui.l1.l2.l3 {
+        --aura-radius: var(--radius-field) !important;
+      }
+    }
+  }
   .\[clip\:rect\(0\,0\,0\,0\)\] {
     clip: rect(0,0,0,0);
   }
@@ -7312,6 +7600,12 @@
       }
     }
   }
+  .after\:hidden {
+    &::after {
+      content: var(--tw-content);
+      display: none;
+    }
+  }
   .hover\:bg-base-200 {
     &:hover {
       @media (hover: hover) {
@@ -7326,13 +7620,6 @@
       }
     }
   }
-  .hover\:text-base-content {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-base-content);
-      }
-    }
-  }
   .hover\:text-error {
     &:hover {
       @media (hover: hover) {
@@ -7347,12 +7634,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 +9149,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 +11413,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);
@@ -11576,29 +11915,23 @@
   }
   .caps-resize-handle {
     display: grid;
-    width: 64px;
-    height: 22px;
+    width: 44px;
+    height: 24px;
+    grid-template-columns: minmax(0, 1fr);
     place-items: center;
-    border: var(--border) solid var(--stipe-linework);
+    border: 0;
     border-radius: var(--radius-field);
-    background: var(--color-base-200);
+    background: transparent;
     cursor: row-resize;
     touch-action: none;
     user-select: none;
   }
   .caps-resize-handle[aria-orientation="vertical"] {
-    width: 22px;
-    height: 64px;
+    width: 24px;
+    height: 44px;
     cursor: col-resize;
   }
-  .caps-resize-handle[data-resize-variant="notch"] {
-    border-radius: var(--radius-box) var(--radius-box) var(--radius-field) var(--radius-field);
-    box-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.55)), 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) var(--color-base-content);
-    @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.55)), 0 calc(var(--depth) * 1px) calc(var(--depth) * 2px) color-mix( in oklab, var(--color-base-content) calc(var(--depth) * 12%), transparent );
-    }
-  }
-  .caps-resize-handle:is(:hover, :focus-visible) {
+  .caps-resize-handle:focus-visible {
     outline: 2px solid var(--color-info);
     outline-offset: 2px;
   }
@@ -11607,29 +11940,45 @@
   }
   .caps-resize-grip {
     position: relative;
-    width: 38px;
-    height: 8px;
+    width: 28px;
+    height: 6px;
     border-radius: var(--radius-button);
-    background-color: var(--color-neutral);
-    background-image: linear-gradient( to bottom, oklch(100% 0 0 / calc(var(--depth) * 0.08)), transparent 50%, oklch(0% 0 0 / calc(var(--depth) * 0.015)) );
-    box-shadow: var( --stipe-shadow-raised, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.6)), inset 0 -2px 0 var(--color-neutral), inset 0 0 0 1px var(--color-neutral) );
+    background-color: var(--color-base-200);
+    box-shadow: 0 0 0 1px var(--stipe-linework), inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)), 0 1px 0 var(--color-base-200);
     @supports (color: color-mix(in lab, red, red)) {
-      box-shadow: var( --stipe-shadow-raised, inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.6)), inset 0 -2px 0 color-mix(in oklab, var(--color-neutral) 75%, black), inset 0 0 0 1px color-mix( in oklab, var(--color-neutral), black calc(var(--depth) * 14%) ) );
+      box-shadow: 0 0 0 1px color-mix(in oklab, var(--stipe-linework) 80%, var(--color-base-200)), inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)), 0 1px 0 color-mix( in oklab, var(--color-base-200), var(--color-base-content) 14% );
     }
   }
+  .caps-resize-handle:hover .caps-resize-grip {
+    background-color: var(--color-base-300);
+  }
   .caps-resize-grip::after {
     content: "";
     position: absolute;
-    inset-inline: 7px;
+    left: 50%;
     top: 50%;
+    width: 2px;
     height: 2px;
-    transform: translateY(-50%);
-    border-radius: var(--radius-button);
-    background: linear-gradient( to bottom, oklch(100% 0 0 / calc(var(--depth) * 0.45)) 50%, oklch(0% 0 0 / calc(var(--depth) * 0.28)) 50% );
-    box-shadow: 0 -3px 0 -0.5px oklch(100% 0 0 / calc(var(--depth) * 0.45)), 0 -2px 0 -0.5px oklch(0% 0 0 / calc(var(--depth) * 0.28)), 0 3px 0 -0.5px oklch(100% 0 0 / calc(var(--depth) * 0.45)), 0 4px 0 -0.5px oklch(0% 0 0 / calc(var(--depth) * 0.28));
+    transform: translate(-50%, -50%);
+    border-radius: var(--radius-selector);
+    background: var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+    }
+    box-shadow: -5px 0 0 var(--color-base-content), 5px 0 0 var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: -5px 0 0 color-mix(in oklab, var(--color-base-content) 45%, transparent), 5px 0 0 color-mix(in oklab, var(--color-base-content) 45%, transparent);
+    }
   }
   .caps-resize-handle[aria-orientation="vertical"] .caps-resize-grip {
-    transform: rotate(90deg);
+    width: 6px;
+    height: 28px;
+  }
+  .caps-resize-handle[aria-orientation="vertical"] .caps-resize-grip::after {
+    box-shadow: 0 -5px 0 var(--color-base-content), 0 5px 0 var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 -5px 0 color-mix(in oklab, var(--color-base-content) 45%, transparent), 0 5px 0 color-mix(in oklab, var(--color-base-content) 45%, transparent);
+    }
   }
   @media (prefers-reduced-motion: reduce) {
     .caps-scroll-thumb-surface {
@@ -11637,6 +11986,10 @@
     }
   }
   @media (forced-colors: active) {
+    .caps-resize-grip {
+      border: 1px solid ButtonText;
+      box-shadow: none;
+    }
     .caps-scroll-track {
       background: Canvas;
       box-shadow: none;
@@ -12771,6 +13124,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;
@@ -13111,6 +13471,136 @@
   .caps-form-footer .caps-field-error {
     padding-bottom: var(--spacing-sm);
   }
+  :is(.caps-form, .caps-form-section, .caps-fieldset)[data-layout="columns"] {
+    --caps-form-label-col: 9rem;
+  }
+  .caps-form[data-layout="columns"] :is(.caps-form-body, .caps-form-section-fields) {
+    gap: var(--spacing-sm);
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) {
+    display: grid;
+    grid-template-columns: var(--caps-form-label-col) minmax(0, 1fr);
+    column-gap: var(--spacing-md);
+    row-gap: var(--spacing-2xs);
+    align-items: center;
+    justify-content: stretch;
+    --caps-field-control-width: 100%;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy {
+    display: contents;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy > label {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .caps-fieldset[data-layout="columns"] > .caps-fieldset-legend {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy > .caps-field-description {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > :not(.caps-field-copy, .caps-field-lead, .caps-field-error-reveal) {
+    grid-column: 2;
+    grid-row: 1;
+    width: 100%;
+    max-width: 30rem;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-switch {
+    width: 40px;
+    justify-self: start;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-checkbox {
+    width: 24px;
+    justify-self: start;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="vertical"] > .caps-field-lead {
+    grid-column: 1;
+    grid-row: 1;
+    margin: 0;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="vertical"] > .caps-field-error-reveal {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="horizontal"] > .caps-field-row > .caps-field-lead {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="horizontal"] > .caps-field-error-reveal {
+    padding-inline-start: calc(var(--caps-form-label-col) + var(--spacing-md));
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field:has(> .caps-field-error-reveal[data-open="true"]) .caps-field-description, .caps-fieldset[data-layout="columns"]:has( > .caps-field-error-reveal[data-open="true"] ) > .caps-fieldset-description {
+    display: none;
+  }
+  .caps-fieldset[data-layout="columns"] {
+    display: grid;
+    grid-template-columns: var(--caps-form-label-col) minmax(0, 1fr);
+    column-gap: var(--spacing-md);
+    row-gap: var(--spacing-2xs);
+    align-items: start;
+  }
+  .caps-fieldset[data-layout="columns"] > .caps-fieldset-legend {
+    grid-column: 1;
+    grid-row: 1;
+    margin: 0;
+  }
+  .caps-fieldset[data-layout="columns"] > .caps-fieldset-fields {
+    grid-column: 2;
+    grid-row: 1;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0;
+  }
+  .caps-fieldset[data-layout="columns"] > :is(.caps-fieldset-description, .caps-field-error-reveal) {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  .caps-form[data-layout="columns"] .caps-form-footer {
+    padding-inline-start: calc(var(--caps-form-label-col) + var(--spacing-md));
+    max-width: calc(var(--caps-form-label-col) + var(--spacing-md) + 30rem);
+  }
+  @container (min-width: 36rem) {
+    .caps-form[data-layout="columns"] .caps-form-body:has(> .caps-field:first-child:nth-last-child(2)) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+    }
+    .caps-form[data-layout="columns"] .caps-form-body:has(> .caps-field:first-child:nth-last-child(2)) > .caps-form-footer {
+      padding-inline-start: 0;
+      max-width: none;
+    }
+  }
+  @container (max-width: 20rem) {
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ), .caps-fieldset[data-layout="columns"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > :not(.caps-field-copy, .caps-field-lead, .caps-field-error-reveal), .caps-fieldset[data-layout="columns"] > .caps-fieldset-fields {
+      grid-column: 1;
+      grid-row: 2;
+      max-width: none;
+    }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy > .caps-field-description, :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="vertical"] > .caps-field-error-reveal, .caps-fieldset[data-layout="columns"] > :is(.caps-fieldset-description, .caps-field-error-reveal) {
+      grid-column: 1;
+      grid-row: 3;
+    }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-copy > label, .caps-fieldset[data-layout="columns"] > .caps-fieldset-legend {
+      overflow: visible;
+      text-overflow: clip;
+      white-space: normal;
+    }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="horizontal"] > .caps-field-error-reveal, .caps-form[data-layout="columns"] .caps-form-footer {
+      padding-inline-start: 0;
+      max-width: none;
+    }
+  }
   .caps-choice-card {
     display: flex;
     flex: 1 1 var(--caps-choice-card-basis, 14rem);
@@ -13715,15 +14205,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 +14226,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 +14265,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 +14277,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 +14285,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 +14328,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 +15311,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 +16496,7 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .caps-keycap, .caps-keycap-button {
+  .caps-keycap, .caps-keycap-button, .caps-button.btn-outline {
     transition: none;
   }
 }
@@ -16059,7 +16567,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 +16590,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 +16602,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 +16632,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 +16680,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,9 +18626,159 @@
     --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;
+}
+.parakeet-composer-anchor {
+  --parakeet-completion-inset: 0px;
+  --parakeet-completion-face: var(--color-base-200);
+  --parakeet-completion-edge: var(--stipe-hairline);
+  display: block;
+  min-width: 0;
+}
+.parakeet-composer-anchor:has([data-parakeet-slash]) > .parakeet-composer-shell {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+.parakeet-composer-shell {
+  padding: var(--spacing-sm);
+  container-type: inline-size;
+}
+.parakeet-composer-shell .caps-composer-input {
+  padding: var(--spacing-xs) var(--spacing-sm) 0;
+}
+.parakeet-composer-shell .caps-composer-input textarea {
+  min-height: 3rem;
+  max-height: 160px;
+  padding: var(--spacing-xs) 0;
+  resize: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: 1.6;
+}
+.parakeet-composer-shell .parakeet-composer-row {
+  --caps-status-tray-row-wrap: nowrap;
+  padding: var(--spacing-xs);
+}
+.parakeet-composer-row .caps-status-tray-row {
+  white-space: nowrap;
+}
+.parakeet-composer-row .caps-keycap-button {
+  height: var(--caps-status-tray-key-height);
+  min-height: var(--caps-status-tray-key-height);
+}
+.parakeet-composer-row .caps-keycap-led {
+  display: none;
+}
+.parakeet-composer-row [data-status-tray-chip] {
+  min-width: 0;
+}
+.parakeet-composer-row .caps-status-tray-label, .parakeet-composer-row .caps-keycap-button-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.parakeet-composer-row .parakeet-composer-model-key {
+  --caps-keycap-justify: space-between;
+  flex: 0 1 auto;
+  min-width: 4.5rem;
+  max-width: 220px;
+  font-size: var(--text-xs);
+}
+.parakeet-composer-trailing {
+  display: flex;
+  align-items: center;
+  flex: none;
+  gap: var(--spacing-xs);
+  margin-inline-start: auto;
+}
+.parakeet-composer-action {
+  display: flex;
+  flex: none;
+}
+.parakeet-composer-readout {
+  color: var(--stipe-fg-muted);
+  font-size: var(--text-xs);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.parakeet-composer-row .composer-attention-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+.parakeet-composer-row .parakeet-composer-status {
+  gap: 0;
+}
+@container (max-width: 34rem) {
+  .parakeet-composer-readout {
+    display: none;
+  }
+}
+@container (max-width: 26rem) {
+  .parakeet-composer-row .parakeet-composer-model-key {
+    max-width: 7rem;
   }
 }
 :root {
@@ -18087,57 +18800,80 @@
   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 {
+.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-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;
+.chat-composer .composer-attachments li {
+  position: relative;
 }
-.chat-composer .parakeet-slash-label {
-  min-width: 7rem;
-  font-family: var(--font-mono);
-  font-weight: 600;
+.chat-composer .composer-attachments img {
+  display: block;
+  width: 3.5rem;
+  height: 3.5rem;
+  object-fit: cover;
 }
-.chat-composer .parakeet-slash-match {
-  background: none;
-  color: var(--color-primary);
+.chat-composer .composer-attachment-remove {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  opacity: 0;
 }
-.chat-composer .parakeet-slash-detail {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--stipe-fg-muted);
+.chat-composer .composer-attachments li:hover .composer-attachment-remove, .chat-composer .composer-attachments li:focus-within .composer-attachment-remove {
+  opacity: 1;
 }
-.chat-composer .parakeet-slash-keys {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  color: var(--stipe-fg-muted);
+@media (hover: none) {
+  .chat-composer .composer-attachment-remove {
+    opacity: 1;
+  }
 }
-.chat-composer .parakeet-slash-hint {
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
+.chat-composer .composer-status-chip {
   color: var(--stipe-fg-muted);
+  font-size: var(--text-xs);
 }
-.chat-composer [data-disabled="true"] {
-  opacity: 0.5;
+.chat-composer .composer-settings-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.chat-composer .composer-settings-chip > svg {
+  width: var(--stipe-icon-size-sm);
+  height: var(--stipe-icon-size-sm);
+}
+@container (max-width: 42rem) {
+  .chat-composer .composer-status-chip {
+    display: none;
+  }
+}
+.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);
+}
+.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 +18881,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 +19012,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 +19838,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 +19899,7 @@ pre.tm-code, pre.th-code {
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-ease: initial;
+      --tw-content: "";
     }
   }
 }