@hanzo/ui 8.29.38 → 8.29.40

package/dist/styles.css

@@ -2630,15 +2630,80 @@
     background-position: 0 1px !important;
   }
 
-  /* The composer's fill, under a name of its own. A host darkens the composer
-     (a private chat) by setting `--composer-fill` on it or any ancestor, and
-     leaves design's `--background`, which everything else reads, alone. Unset,
-     the fallback is the material's own fill, written out the same, so the
-     composer is the glass every other surface is. The slot and the class
-     outweigh the material's bare `.glass`, so of the two !important fills
-     this one is the composer's. */
+  /* The composer's ground, under the material's fill: `--composer-ground` (below),
+     or what a host sets as `--composer-fill` on it or any ancestor. No prism along
+     its lip: the composer is the thing a reader looks at longest, and a coloured
+     line across its top read as a stroke somebody drew. The slot and the class
+     outweigh the material's bare `.glass`, so of the two !important fills this
+     one is the composer's. */
   [data-slot="composer"].glass {
-    background-color: var(--composer-fill, color-mix(in oklab, var(--background) 72%, transparent)) !important;
+    background-color: var(--composer-fill, var(--composer-ground)) !important;
+    background-image: none !important;
+  }
+}
+
+/* ── The composer ────────────────────────────────────────────────────────────
+   ONE rounded rectangle a step above the ground it stands on, ONE even 1px edge
+   all the way round, and nothing inset along its top: the rungs' lit lip
+   (`--edge-highlight`) is right for a menu and on the composer read as a
+   doubled, brighter top edge against three plain sides.
+
+   Dark: a white wash over whatever is under it — a #2a card on the app's #14
+   pane, a #1e one on the bare page — under design's hairline (`--border`, white
+   10%). Light: design's emphasis card (#fdfdfd) under the control edge
+   (`--border-control`, black 15%) with a soft, wide drop, since on white a
+   ground step alone moves no pixels. The edge brightens a little under a
+   pointer and a little more on focus — design's `--ring`, softened, so focus is
+   the edge itself and never a glow.
+
+   A CONVERSATION NOTHING KEEPS (`data-forgetful`, a private chat) is the same
+   frame with no ground and no drop, its edge dashed: the one cue, where the
+   field is.
+
+   Ground, edge and drop ease (design's fast duration, ease-out); under reduced
+   motion nothing eases. */
+:root {
+  --composer-ground: var(--white-10, rgb(255 255 255 / .10));
+  --composer-edge: var(--border, rgb(255 255 255 / .10));
+  --composer-drop: none;
+}
+.light, :root.t_light, .t_light {
+  --composer-ground: var(--surface-card-emphasis, #fdfdfd);
+  --composer-edge: var(--border-control, rgb(0 0 0 / .15));
+  --composer-drop: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px -4px rgb(0 0 0 / .06);
+}
+[data-slot="composer"].glass {
+  border-color: var(--composer-edge) !important;
+  box-shadow: var(--composer-drop) !important;
+  transition:
+    background-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+    border-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+    box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out);
+}
+[data-slot="composer"].glass:hover {
+  border-color: color-mix(in srgb, var(--ring, rgb(255 255 255 / .4)) 40%, var(--composer-edge)) !important;
+}
+[data-slot="composer"][data-forgetful].glass {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border-style: dashed !important;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+/* The field grows a line at a time, eased; below its ceiling it never shows a
+   scrollbar while it catches up (Textarea marks `data-capped` at the ceiling). */
+[data-slot="composer-field"] {
+  transition: height var(--duration-fast, 150ms) var(--ease-out, ease-out);
+}
+[data-slot="composer-field"]:not([data-capped]) {
+  overflow-y: hidden;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="composer"].glass,
+  [data-slot="composer-field"],
+  [data-slot="composer"] *,
+  [data-slot="composer-foot"] * {
+    transition: none !important;
   }
 }
 
@@ -2838,9 +2903,9 @@
    as one control the way a chat composer everywhere does, and focus is drawn on
    that box rather than round the field inside it. An offset ring stood a gap
    outside the box and read as a second frame; the box's own 1px edge, lifted
-   from the hairline to a third of the ink, says the same thing in place, in both
-   themes, for a pointer and a keyboard alike (a textarea is :focus-visible on
-   any focus).
+   from the hairline toward design's `--ring` (two thirds of the way), says the
+   same thing in place, softly, in both themes, for a pointer and a keyboard
+   alike (a textarea is :focus-visible on any focus).
 
    THE FIELD DOES NOT ABSTAIN, and control.ts is right that it must not: gui
    compiles `focusVisibleStyle` to `:root:root:root:root … !important`, past any
@@ -2857,8 +2922,8 @@
 /* `:root` first, because gui writes each edge's colour as `:root ._btc-x._btc-x`
    (0,3,0), injected after this sheet: at equal weight the later rule won and
    the edge never moved. One more step of weight is the whole fix. */
-:root [data-slot='composer']:has([data-slot='composer-field']:focus-visible) {
-  border-color: color-mix(in srgb, var(--foreground) 32%, transparent);
+:root [data-slot='composer'].glass:has([data-slot='composer-field']:focus-visible) {
+  border-color: color-mix(in srgb, var(--ring, rgb(255 255 255 / .4)) 66%, var(--composer-edge)) !important;
 }
 
 [data-slot='composer']:has([data-slot='composer-field']:focus-visible)
@@ -4285,15 +4350,14 @@ a svg,
 :root ._bblr-100000px{border-bottom-left-radius:100000px;}
 :root ._bblr-1000px{border-bottom-left-radius:1000px;}
 :root ._bblr-10px{border-bottom-left-radius:10px;}
-:root ._bblr-12px{border-bottom-left-radius:12px;}
+:root ._bblr-16px{border-bottom-left-radius:16px;}
 :root ._bblr-1px{border-bottom-left-radius:1px;}
 :root ._bblr-3px{border-bottom-left-radius:3px;}
 :root ._bblr-4px{border-bottom-left-radius:4px;}
-:root ._bblr-6px{border-bottom-left-radius:6px;}
 :root ._bblr-7px{border-bottom-left-radius:7px;}
+:root ._bblr-8px{border-bottom-left-radius:8px;}
 :root ._bblr-9999px{border-bottom-left-radius:9999px;}
 :root ._bblr-999px{border-bottom-left-radius:999px;}
-@media (max-width: 639.98px){:root:root:root:root:root:root:root:root ._bblr-_maxsm_24px{border-bottom-left-radius:24px;}}
 :root ._bblr-c-radius-1{border-bottom-left-radius:var(--c-radius-1);}
 :root ._bblr-c-radius-10{border-bottom-left-radius:var(--c-radius-10);}
 :root ._bblr-c-radius-2{border-bottom-left-radius:var(--c-radius-2);}
@@ -4309,15 +4373,14 @@ a svg,
 :root ._bbrr-100000px{border-bottom-right-radius:100000px;}
 :root ._bbrr-1000px{border-bottom-right-radius:1000px;}
 :root ._bbrr-10px{border-bottom-right-radius:10px;}
-:root ._bbrr-12px{border-bottom-right-radius:12px;}
+:root ._bbrr-16px{border-bottom-right-radius:16px;}
 :root ._bbrr-1px{border-bottom-right-radius:1px;}
 :root ._bbrr-3px{border-bottom-right-radius:3px;}
 :root ._bbrr-4px{border-bottom-right-radius:4px;}
-:root ._bbrr-6px{border-bottom-right-radius:6px;}
 :root ._bbrr-7px{border-bottom-right-radius:7px;}
+:root ._bbrr-8px{border-bottom-right-radius:8px;}
 :root ._bbrr-9999px{border-bottom-right-radius:9999px;}
 :root ._bbrr-999px{border-bottom-right-radius:999px;}
-@media (max-width: 639.98px){:root:root:root:root:root:root:root:root ._bbrr-_maxsm_24px{border-bottom-right-radius:24px;}}
 :root ._bbrr-c-radius-1{border-bottom-right-radius:var(--c-radius-1);}
 :root ._bbrr-c-radius-10{border-bottom-right-radius:var(--c-radius-10);}
 :root ._bbrr-c-radius-2{border-bottom-right-radius:var(--c-radius-2);}
@@ -4659,15 +4722,14 @@ a svg,
 :root ._btlr-100000px{border-top-left-radius:100000px;}
 :root ._btlr-1000px{border-top-left-radius:1000px;}
 :root ._btlr-10px{border-top-left-radius:10px;}
-:root ._btlr-12px{border-top-left-radius:12px;}
+:root ._btlr-16px{border-top-left-radius:16px;}
 :root ._btlr-1px{border-top-left-radius:1px;}
 :root ._btlr-3px{border-top-left-radius:3px;}
 :root ._btlr-4px{border-top-left-radius:4px;}
-:root ._btlr-6px{border-top-left-radius:6px;}
 :root ._btlr-7px{border-top-left-radius:7px;}
+:root ._btlr-8px{border-top-left-radius:8px;}
 :root ._btlr-9999px{border-top-left-radius:9999px;}
 :root ._btlr-999px{border-top-left-radius:999px;}
-@media (max-width: 639.98px){:root:root:root:root:root:root:root:root ._btlr-_maxsm_24px{border-top-left-radius:24px;}}
 :root ._btlr-c-radius-1{border-top-left-radius:var(--c-radius-1);}
 :root ._btlr-c-radius-10{border-top-left-radius:var(--c-radius-10);}
 :root ._btlr-c-radius-2{border-top-left-radius:var(--c-radius-2);}
@@ -4683,15 +4745,14 @@ a svg,
 :root ._btrr-100000px{border-top-right-radius:100000px;}
 :root ._btrr-1000px{border-top-right-radius:1000px;}
 :root ._btrr-10px{border-top-right-radius:10px;}
-:root ._btrr-12px{border-top-right-radius:12px;}
+:root ._btrr-16px{border-top-right-radius:16px;}
 :root ._btrr-1px{border-top-right-radius:1px;}
 :root ._btrr-3px{border-top-right-radius:3px;}
 :root ._btrr-4px{border-top-right-radius:4px;}
-:root ._btrr-6px{border-top-right-radius:6px;}
 :root ._btrr-7px{border-top-right-radius:7px;}
+:root ._btrr-8px{border-top-right-radius:8px;}
 :root ._btrr-9999px{border-top-right-radius:9999px;}
 :root ._btrr-999px{border-top-right-radius:999px;}
-@media (max-width: 639.98px){:root:root:root:root:root:root:root:root ._btrr-_maxsm_24px{border-top-right-radius:24px;}}
 :root ._btrr-c-radius-1{border-top-right-radius:var(--c-radius-1);}
 :root ._btrr-c-radius-10{border-top-right-radius:var(--c-radius-10);}
 :root ._btrr-c-radius-2{border-top-right-radius:var(--c-radius-2);}
@@ -4765,6 +4826,7 @@ a svg,
 :root ._cur-pointer{cursor:pointer;}
 :root ._cur-progress{cursor:progress;}
 :root ._cur-row-resize{cursor:row-resize;}
+:root ._cur-text{cursor:text;}
 :root ._direction-ltr{direction:ltr;}
 :root ._dsp--webkit-box{display:-webkit-box;}
 @media (max-width: 767.98px){:root:root:root:root:root:root:root ._dsp-_maxmd_none{display:none;}}
@@ -4874,7 +4936,6 @@ a svg,
 :root ._height-22px{height:22px;}
 :root ._height-23px{height:23px;}
 :root ._height-24px{height:24px;}
-:root ._height-26px{height:26px;}
 :root ._height-28px{height:28px;}
 :root ._height-2px{height:2px;}
 :root ._height-30px{height:30px;}
@@ -4901,7 +4962,6 @@ a svg,
 :root ._height-96px{height:96px;}
 :root ._height-NaNpx{height:NaNpx;}
 @media (max-width: 639.98px){:root:root:root:root:root:root:root:root ._height-_maxsm_36px{height:36px;}}
-@media (max-width: 639.98px){:root:root:root:root:root:root:root:root ._height-_maxsm_44px{height:44px;}}
 @media (pointer: coarse){:root:root ._height-_touchable_44px{height:44px;}}
 @media (pointer: coarse){:root:root ._height-_touchable_auto{height:auto;}}
 :root ._height-auto{height:auto;}
@@ -4970,16 +5030,16 @@ a svg,
 :root ._marginInlineStart--1px{margin-inline-start:-1px;}
 :root ._marginInlineStart--3px{margin-inline-start:-3px;}
 :root ._marginInlineStart--8px{margin-inline-start:-8px;}
+:root ._marginInlineStart-12px{margin-inline-start:12px;}
 :root ._marginInlineStart-16px{margin-inline-start:16px;}
-:root ._marginInlineStart-4px{margin-inline-start:4px;}
 :root ._marginInlineStart-auto{margin-inline-start:auto;}
 :root ._marginInlineStart-c-space-1{margin-inline-start:var(--c-space-1);}
 :root ._marginInlineStart-c-space-2{margin-inline-start:var(--c-space-2);}
 :root ._maxH-0px{max-height:0px;}
 :root ._maxH-12px{max-height:12px;}
 :root ._maxH-14px{max-height:14px;}
+:root ._maxH-160px{max-height:160px;}
 :root ._maxH-16px{max-height:16px;}
-:root ._maxH-200px{max-height:200px;}
 :root ._maxH-24px{max-height:24px;}
 :root ._maxH-300px{max-height:300px;}
 :root ._maxH-32px{max-height:32px;}
@@ -5032,7 +5092,6 @@ a svg,
 :root ._minH-20px{min-height:20px;}
 :root ._minH-23px{min-height:23px;}
 :root ._minH-24px{min-height:24px;}
-:root ._minH-26px{min-height:26px;}
 :root ._minH-28px{min-height:28px;}
 :root ._minH-30px{min-height:30px;}
 :root ._minH-32px{min-height:32px;}
@@ -5179,10 +5238,11 @@ a svg,
 :root ._pb-c-space-4{padding-bottom:var(--c-space-4);}
 :root ._pb-c-space-5{padding-bottom:var(--c-space-5);}
 :root ._pb-c-space-6{padding-bottom:var(--c-space-6);}
+:root ._pe-auto{pointer-events:auto !important;}
 :root ._pe-boxnone{pointer-events:none !important;}
 :root ._pe-none{pointer-events:none !important;}
 :root ._pl-0px{padding-left:0px;}
-:root ._pl-10px{padding-left:10px;}
+:root ._pl-11px{padding-left:11px;}
 :root ._pl-12px{padding-left:12px;}
 :root ._pl-16px{padding-left:16px;}
 :root ._pl-1px{padding-left:1px;}
@@ -5190,10 +5250,11 @@ a svg,
 :root ._pl-2px{padding-left:2px;}
 :root ._pl-3px{padding-left:3px;}
 :root ._pl-4px{padding-left:4px;}
+:root ._pl-5px{padding-left:5px;}
 :root ._pl-6px{padding-left:6px;}
 :root ._pl-8px{padding-left:8px;}
+:root ._pl-9px{padding-left:9px;}
 @media (max-width: 767.98px){:root:root:root:root:root:root:root ._pl-_maxmd_c-space-4{padding-left:var(--c-space-4);}}
-@media (max-width: 639.98px){:root:root:root:root:root:root:root:root ._pl-_maxsm_12px{padding-left:12px;}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._pl-_md_c-space-4{padding-left:var(--c-space-4);}}
 :root ._pl-c-space-0--53{padding-left:var(--c-space-0--5);}
 :root ._pl-c-space-1{padding-left:var(--c-space-1);}
@@ -5210,7 +5271,7 @@ a svg,
 :root ._pos-fixed{position:fixed;}
 :root ._pos-relative{position:relative;}
 :root ._pr-0px{padding-right:0px;}
-:root ._pr-10px{padding-right:10px;}
+:root ._pr-11px{padding-right:11px;}
 :root ._pr-12px{padding-right:12px;}
 :root ._pr-16px{padding-right:16px;}
 :root ._pr-1px{padding-right:1px;}
@@ -5218,10 +5279,11 @@ a svg,
 :root ._pr-2px{padding-right:2px;}
 :root ._pr-3px{padding-right:3px;}
 :root ._pr-4px{padding-right:4px;}
+:root ._pr-5px{padding-right:5px;}
 :root ._pr-6px{padding-right:6px;}
 :root ._pr-8px{padding-right:8px;}
+:root ._pr-9px{padding-right:9px;}
 @media (max-width: 767.98px){:root:root:root:root:root:root:root ._pr-_maxmd_c-space-4{padding-right:var(--c-space-4);}}
-@media (max-width: 639.98px){:root:root:root:root:root:root:root:root ._pr-_maxsm_12px{padding-right:12px;}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._pr-_md_c-space-4{padding-right:var(--c-space-4);}}
 :root ._pr-c-space-0--53{padding-right:var(--c-space-0--5);}
 :root ._pr-c-space-1{padding-right:var(--c-space-1);}
@@ -5235,7 +5297,6 @@ a svg,
 :root ._pr-c-space-6{padding-right:var(--c-space-6);}
 :root ._pr-c-space-tru101{padding-right:var(--c-space-true);}
 :root ._pt-0px{padding-top:0px;}
-:root ._pt-10px{padding-top:10px;}
 :root ._pt-112px{padding-top:112px;}
 :root ._pt-12px{padding-top:12px;}
 :root ._pt-16px{padding-top:16px;}
@@ -5264,6 +5325,7 @@ a svg,
 :root ._pt-c-space-6{padding-top:var(--c-space-6);}
 :root ._r-0px{right:0px;}
 :root ._r-6037{right:60%;}
+:root ._rowGap-2px{row-gap:2px;}
 :root ._rowGap-4px{row-gap:4px;}
 :root ._rowGap-c-space-3{row-gap:var(--c-space-3);}
 :root ._select-auto{user-select:auto;-webkit-user-select:auto;}
@@ -5289,11 +5351,13 @@ a svg,
 :root ._text-end{text-align:end;}
 :root ._text-start{text-align:start;}
 :root ._textOverflow-ellipsis{text-overflow:ellipsis;}
+:root:root:root  ._tr-0active-scale0--921281:active{transform:scale(0.92) !important;}
 @media (hover) {:root:root  ._tr-0hover-scale0--951281:hover{transform:scale(0.95) !important;}}
 :root ._tr-rotate0deg1281{transform:rotate(0deg);}
 :root ._tr-rotate180de41674{transform:rotate(180deg);}
 :root ._tr-rotate90deg1281{transform:rotate(90deg);}
 :root ._tr-scale0--851281{transform:scale(0.85);}
+:root ._tr-scale0--91281{transform:scale(0.9);}
 :root ._tr-scale0--951281{transform:scale(0.95);}
 :root ._tr-scale1--11281{transform:scale(1.1);}
 :root ._tr-scale11281{transform:scale(1);}

package/dist/theme.css

@@ -2628,15 +2628,80 @@
     background-position: 0 1px !important;
   }
 
-  /* The composer's fill, under a name of its own. A host darkens the composer
-     (a private chat) by setting `--composer-fill` on it or any ancestor, and
-     leaves design's `--background`, which everything else reads, alone. Unset,
-     the fallback is the material's own fill, written out the same, so the
-     composer is the glass every other surface is. The slot and the class
-     outweigh the material's bare `.glass`, so of the two !important fills
-     this one is the composer's. */
+  /* The composer's ground, under the material's fill: `--composer-ground` (below),
+     or what a host sets as `--composer-fill` on it or any ancestor. No prism along
+     its lip: the composer is the thing a reader looks at longest, and a coloured
+     line across its top read as a stroke somebody drew. The slot and the class
+     outweigh the material's bare `.glass`, so of the two !important fills this
+     one is the composer's. */
   [data-slot="composer"].glass {
-    background-color: var(--composer-fill, color-mix(in oklab, var(--background) 72%, transparent)) !important;
+    background-color: var(--composer-fill, var(--composer-ground)) !important;
+    background-image: none !important;
+  }
+}
+
+/* ── The composer ────────────────────────────────────────────────────────────
+   ONE rounded rectangle a step above the ground it stands on, ONE even 1px edge
+   all the way round, and nothing inset along its top: the rungs' lit lip
+   (`--edge-highlight`) is right for a menu and on the composer read as a
+   doubled, brighter top edge against three plain sides.
+
+   Dark: a white wash over whatever is under it — a #2a card on the app's #14
+   pane, a #1e one on the bare page — under design's hairline (`--border`, white
+   10%). Light: design's emphasis card (#fdfdfd) under the control edge
+   (`--border-control`, black 15%) with a soft, wide drop, since on white a
+   ground step alone moves no pixels. The edge brightens a little under a
+   pointer and a little more on focus — design's `--ring`, softened, so focus is
+   the edge itself and never a glow.
+
+   A CONVERSATION NOTHING KEEPS (`data-forgetful`, a private chat) is the same
+   frame with no ground and no drop, its edge dashed: the one cue, where the
+   field is.
+
+   Ground, edge and drop ease (design's fast duration, ease-out); under reduced
+   motion nothing eases. */
+:root {
+  --composer-ground: var(--white-10, rgb(255 255 255 / .10));
+  --composer-edge: var(--border, rgb(255 255 255 / .10));
+  --composer-drop: none;
+}
+.light, :root.t_light, .t_light {
+  --composer-ground: var(--surface-card-emphasis, #fdfdfd);
+  --composer-edge: var(--border-control, rgb(0 0 0 / .15));
+  --composer-drop: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px -4px rgb(0 0 0 / .06);
+}
+[data-slot="composer"].glass {
+  border-color: var(--composer-edge) !important;
+  box-shadow: var(--composer-drop) !important;
+  transition:
+    background-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+    border-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+    box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out);
+}
+[data-slot="composer"].glass:hover {
+  border-color: color-mix(in srgb, var(--ring, rgb(255 255 255 / .4)) 40%, var(--composer-edge)) !important;
+}
+[data-slot="composer"][data-forgetful].glass {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border-style: dashed !important;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+/* The field grows a line at a time, eased; below its ceiling it never shows a
+   scrollbar while it catches up (Textarea marks `data-capped` at the ceiling). */
+[data-slot="composer-field"] {
+  transition: height var(--duration-fast, 150ms) var(--ease-out, ease-out);
+}
+[data-slot="composer-field"]:not([data-capped]) {
+  overflow-y: hidden;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="composer"].glass,
+  [data-slot="composer-field"],
+  [data-slot="composer"] *,
+  [data-slot="composer-foot"] * {
+    transition: none !important;
   }
 }
 
@@ -2836,9 +2901,9 @@
    as one control the way a chat composer everywhere does, and focus is drawn on
    that box rather than round the field inside it. An offset ring stood a gap
    outside the box and read as a second frame; the box's own 1px edge, lifted
-   from the hairline to a third of the ink, says the same thing in place, in both
-   themes, for a pointer and a keyboard alike (a textarea is :focus-visible on
-   any focus).
+   from the hairline toward design's `--ring` (two thirds of the way), says the
+   same thing in place, softly, in both themes, for a pointer and a keyboard
+   alike (a textarea is :focus-visible on any focus).
 
    THE FIELD DOES NOT ABSTAIN, and control.ts is right that it must not: gui
    compiles `focusVisibleStyle` to `:root:root:root:root … !important`, past any
@@ -2855,8 +2920,8 @@
 /* `:root` first, because gui writes each edge's colour as `:root ._btc-x._btc-x`
    (0,3,0), injected after this sheet: at equal weight the later rule won and
    the edge never moved. One more step of weight is the whole fix. */
-:root [data-slot='composer']:has([data-slot='composer-field']:focus-visible) {
-  border-color: color-mix(in srgb, var(--foreground) 32%, transparent);
+:root [data-slot='composer'].glass:has([data-slot='composer-field']:focus-visible) {
+  border-color: color-mix(in srgb, var(--ring, rgb(255 255 255 / .4)) 66%, var(--composer-edge)) !important;
 }
 
 [data-slot='composer']:has([data-slot='composer-field']:focus-visible)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.29.38",
+  "version": "8.29.40",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {

package/dist/chat/Dial.cjs

@@ -1,101 +0,0 @@
-'use client';"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dial = Dial;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * The effort, as ONE small icon button — a gauge with the level in a tiny pip —
- * the same in Chat and Dev, in the composer's end row beside the mic.
- *
- *   press         opens a compact list of the levels, the one in force checked
- *   drag          press the icon and move along the row: each step of the finger
- *                 is a level (`STEP` px), snapped to the surface's own list, with a
- *                 small label above the icon naming the level while it is held
- *   ← ↓ / → ↑     the arrows move one level, in the reading direction
- *   Enter, Space  opens the list
- *
- * The list is the surface's (`Modes`): a chat offers six levels, a coding run four.
- * The pointer events are the page's own — nothing is captured past the press.
- */
-const gui_1 = require("@hanzo/gui");
-const react_1 = require("@hanzo/i18n/react");
-const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
-const react_2 = require("react");
-const gui_2 = require("../backends/gui/index.cjs");
-const ring_1 = require("./ring.cjs");
-const Tune_1 = require("./Tune.cjs");
-/** How far the finger travels for one level, px. */
-const STEP = 22;
-/** The pip: the level in a letter or two, so the icon says where it stands without a word. */
-const PIP = { auto: 'A', low: 'L', medium: 'M', high: 'H', xhigh: 'XH', max: 'MAX' };
-const pip = (id, label) => PIP[id] ?? label.slice(0, 1).toUpperCase();
-/**
- * `narrow`, a phone: the level stands BESIDE the gauge on the row's centreline
- * rather than tucked under its corner, where at a phone's size it crowds the
- * glyph. The button keeps the row's height and grows as wide as the level needs.
- */
-function Dial({ effort, size = 36, disabled = false, narrow = false }) {
-    const { t, dir } = (0, react_1.useI18n)();
-    const [open, setOpen] = (0, react_2.useState)(false);
-    // The level under the finger while it is held, as a place in the list.
-    const [held, setHeld] = (0, react_2.useState)(null);
-    const press = (0, react_2.useRef)(null);
-    const index = Math.max(0, effort.items.findIndex((e) => e.id === effort.value));
-    const now = effort.items[index] ?? effort.items[0];
-    const shown = held === null ? now : (effort.items[held] ?? now);
-    const flip = dir === 'rtl' ? -1 : 1;
-    const clamp = (i) => Math.max(0, Math.min(effort.items.length - 1, i));
-    const go = (i) => {
-        const next = effort.items[clamp(i)];
-        if (next && next.id !== effort.value)
-            effort.set(next.id);
-    };
-    return ((0, jsx_runtime_1.jsxs)(gui_2.Popover, { open: open, onOpenChange: setOpen, allowFlip: true, placement: "top-end", children: [(0, jsx_runtime_1.jsx)(gui_2.PopoverAnchor, { asChild: true, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { position: "relative", shrink: 0, "data-slot": "dial", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "button", "data-slot": "dial-button", "aria-label": t('Effort: {level}', { level: t(now.label) }), "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled || undefined, tabIndex: disabled ? -1 : 0, ...(narrow ? { minW: size, px: 8, gap: 3 } : { width: size }), height: size, rounded: 999, items: "center", justify: "center", shrink: 0, position: "relative", cursor: disabled ? 'default' : 'ew-resize', opacity: disabled ? 0.5 : 1, bg: open || held !== null ? '$hover' : 'transparent', hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: ring_1.RING, 
-                            // inline-style: the page must not scroll or select under a drag along the icon.
-                            style: { touchAction: 'none', userSelect: 'none' }, onPointerDown: (e) => {
-                                if (disabled)
-                                    return;
-                                press.current = { x: e.clientX, at: index, moved: false };
-                                e.currentTarget?.setPointerCapture?.(e.pointerId);
-                            }, onPointerMove: (e) => {
-                                const p = press.current;
-                                if (!p)
-                                    return;
-                                const dx = (e.clientX - p.x) * flip;
-                                if (Math.abs(dx) > 4)
-                                    p.moved = true;
-                                if (p.moved)
-                                    setHeld(clamp(p.at + Math.round(dx / STEP)));
-                            }, onPointerUp: (e) => {
-                                const p = press.current;
-                                press.current = null;
-                                e.currentTarget?.releasePointerCapture?.(e.pointerId);
-                                if (!p)
-                                    return;
-                                if (p.moved) {
-                                    go(held ?? p.at);
-                                    setHeld(null);
-                                }
-                                else
-                                    setOpen((o) => !o);
-                            }, onPointerCancel: () => {
-                                press.current = null;
-                                setHeld(null);
-                            }, onKeyDown: (e) => {
-                                if (disabled)
-                                    return;
-                                const key = e?.key;
-                                const step = key === 'ArrowRight' || key === 'ArrowUp' ? flip : key === 'ArrowLeft' || key === 'ArrowDown' ? -flip : 0;
-                                if (step) {
-                                    e.preventDefault?.();
-                                    go(index + step);
-                                }
-                                else if (key === 'Enter' || key === ' ') {
-                                    e.preventDefault?.();
-                                    setOpen((o) => !o);
-                                }
-                            }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Gauge, { size: 18, color: "var(--foreground)", "aria-hidden": true }), narrow ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { "data-slot": "dial-pip", "aria-hidden": true, fontSize: 12, lineHeight: 16, fontWeight: "600", color: "$quiet", children: pip(shown.id, t(shown.label)) })) : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { "data-slot": "dial-pip", "aria-hidden": true, position: "absolute", b: 3, insetInlineEnd: 2, fontSize: 9, lineHeight: 10, fontWeight: "700", color: "$ink", px: 2, rounded: 4, bg: "$background", children: pip(shown.id, t(shown.label)) }))] }), held !== null ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "dial-tip", role: "status", position: "absolute", b: size + 6, self: "center", px: 8, py: 3, rounded: 6, bg: "$ink", pointerEvents: "none", style: { whiteSpace: 'nowrap' }, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: 12, color: "$background", children: t(shown.label) }) })) : null] }) }), (0, jsx_runtime_1.jsx)(gui_2.PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: (0, jsx_runtime_1.jsx)(Tune_1.Choices, { title: t('Effort'), items: effort.items, value: effort.value, onPick: (id) => {
-                        effort.set(id);
-                        setOpen(false);
-                    } }) })] }));
-}

package/dist/chat/Dial.d.ts

@@ -1,13 +0,0 @@
-import { type Modes } from './Tune.js';
-/**
- * `narrow`, a phone: the level stands BESIDE the gauge on the row's centreline
- * rather than tucked under its corner, where at a phone's size it crowds the
- * glyph. The button keeps the row's height and grows as wide as the level needs.
- */
-export declare function Dial({ effort, size, disabled, narrow }: {
-    effort: Modes;
-    size?: number;
-    disabled?: boolean;
-    narrow?: boolean;
-}): import("react").JSX.Element;
-//# sourceMappingURL=Dial.d.ts.map

package/dist/chat/Dial.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dial.d.ts","sourceRoot":"","sources":["../../src/chat/Dial.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAW,KAAK,KAAK,EAAE,MAAM,QAAQ,CAAA;AAU5C;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,IAAS,EAAE,QAAgB,EAAE,MAAc,EAAE,EAAE;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,+BA4InJ"}