@fungi.computer/parakeet 0.5.0 → 0.6.0

package/dist/styles.css

@@ -18,7 +18,6 @@
     --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;
@@ -2425,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;
@@ -4214,6 +4455,9 @@
   .static {
     position: static;
   }
+  .sticky {
+    position: sticky;
+  }
   .-inset-1\.5 {
     inset: calc(var(--spacing) * -1.5);
   }
@@ -4833,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 {
@@ -5759,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;
@@ -6124,9 +6421,6 @@
   .max-h-72 {
     max-height: calc(var(--spacing) * 72);
   }
-  .max-h-\[320px\] {
-    max-height: 320px;
-  }
   .max-h-screen {
     max-height: 100vh;
   }
@@ -6136,9 +6430,6 @@
   .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);
   }
@@ -6299,9 +6590,6 @@
   .resize {
     resize: both;
   }
-  .resize-none {
-    resize: none;
-  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -6390,9 +6678,6 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
-  .overflow-x-hidden {
-    overflow-x: hidden;
-  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -6708,10 +6993,6 @@
     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));
@@ -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);
   }
@@ -7332,13 +7620,6 @@
       }
     }
   }
-  .hover\:text-base-content {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-base-content);
-      }
-    }
-  }
   .hover\:text-error {
     &:hover {
       @media (hover: hover) {
@@ -11634,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;
   }
@@ -11665,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 {
@@ -11695,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;
@@ -13176,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);
@@ -18253,6 +18678,109 @@
   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 {
   --prose-max-width: 80ch;
   --tool-error-rail: #fff7a0;
@@ -18275,22 +18803,6 @@
   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;
   flex-wrap: wrap;
@@ -18312,7 +18824,6 @@
   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 {
@@ -18323,21 +18834,10 @@
     opacity: 1;
   }
 }
-.chat-composer .composer-footer {
-  padding: var(--spacing-xs);
-}
-.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 {
+.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);
-}
 .chat-composer .composer-settings-chip {
   display: inline-flex;
   align-items: center;
@@ -18347,41 +18847,11 @@
   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;
-}
-.chat-composer .composer-card {
-  container-type: inline-size;
-}
-@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 {
+@container (max-width: 42rem) {
+  .chat-composer .composer-status-chip {
     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 .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;
 }
@@ -18398,9 +18868,6 @@
   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;