@oxy.so/bloom 4.25.0 → 4.25.1

package/lib/typescript/module/composer-panel/ComposerPanelStatusTab.d.ts

@@ -8,7 +8,7 @@ export declare function ContextRing({ pct, palette }: {
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * The status tab: the grey tab hanging off the Composer Panel's
- * top edge — 34 tall, inset 28 each side, radius 16 on the top corners only,
+ * top edge — at least 34 tall, inset 28 each side, radius 16 on the top corners only,
  * px 8 / py 4. Branch (mirrored merge glyph) and project folder on the left, 12
  * apart; the context meter on the right (py 4, pl 6 / pr 8, gap 4).
  */

package/lib/typescript/module/composer-panel/ComposerPillBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerPillBase.d.ts","sourceRoot":"","sources":["../../../../src/composer-panel/ComposerPillBase.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAsB,iBAAiB,EAAoB,MAAM,SAAS,CAAC;AAkVvF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,QAAQ,EACR,MAAM,EACN,IAAY,EACZ,QAAgB,EAChB,WAA+B,EAC/B,kBAA6B,EAC7B,OAAiC,EACjC,eAAe,EACf,MAAM,EACN,KAAK,EACL,YAAY,EACZ,aAAa,EACb,MAAM,EACN,aAA8B,EAC9B,cAAc,EACd,YAAyC,EACzC,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,OAAc,EACd,KAAa,EACb,QAAQ,EACR,MAAM,EAAE,cAAc,EACtB,KAAK,EACL,QAAY,EACZ,WAAW,EACX,UAAU,EAAE,cAAc,EAC1B,MAAM,GACP,EAAE,iBAAiB,2CAwRnB"}
+{"version":3,"file":"ComposerPillBase.d.ts","sourceRoot":"","sources":["../../../../src/composer-panel/ComposerPillBase.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAsB,iBAAiB,EAAoB,MAAM,SAAS,CAAC;AAoVvF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,QAAQ,EACR,MAAM,EACN,IAAY,EACZ,QAAgB,EAChB,WAA+B,EAC/B,kBAA6B,EAC7B,OAAiC,EACjC,eAAe,EACf,MAAM,EACN,KAAK,EACL,YAAY,EACZ,aAAa,EACb,MAAM,EACN,aAA8B,EAC9B,cAAc,EACd,YAAyC,EACzC,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,OAAc,EACd,KAAa,EACb,QAAQ,EACR,MAAM,EAAE,cAAc,EACtB,KAAK,EACL,QAAY,EACZ,WAAW,EACX,UAAU,EAAE,cAAc,EAC1B,MAAM,GACP,EAAE,iBAAiB,2CAwRnB"}

package/lib/typescript/module/composer-panel/ComposerStatusBarBase.d.ts

@@ -1,7 +1,7 @@
 import type { ComposerStatusBarProps } from './types';
 /**
- * The line under the AI chat's pill composer (the reference's `StatusBar`): 26
- * tall, space-between.
+ * The line under the AI chat's pill composer (the reference's `StatusBar`): at
+ * least 26 tall (it grows with the system font), space-between.
  *
  *   left     gap 12: the branch (mirrored merge glyph) and the project folder —
  *            its caret turns over while the "Local Folders" panel is open

package/lib/typescript/module/composer-panel/ModelPickerBase.d.ts

@@ -10,7 +10,7 @@ import type { ModelPickerProps } from './types';
  *            mark in view (instantly on open, smoothly after)
  *   column   top 8 / right 8 / left 52: a 20px header ("Models" + a 50%-opacity
  *            "Quick Search" hint, or the search field), then the list 4 below
- *   rows     36 tall, radius 10, px 8: 16px mark, 6, name (+ provider while
+ *   rows     min 36 tall, radius 10, px 8: 16px mark, 6, name (+ provider while
  *            searching), the effort chip on the selected row, 12, 14px radio;
  *            4 apart, pb 4, soft top edge once scrolled
  *

package/lib/typescript/module/composer-panel/ModelPickerBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModelPickerBase.d.ts","sourceRoot":"","sources":["../../../../src/composer-panel/ModelPickerBase.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAuC,gBAAgB,EAAuB,MAAM,SAAS,CAAC;AAyX1G;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,YAAY,EACZ,aAAa,EACb,MAAM,EACN,aAA8B,EAC9B,cAAc,EACd,YAAyC,EACzC,MAAM,EAAE,cAAc,EACtB,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,2CAiUlB"}
+{"version":3,"file":"ModelPickerBase.d.ts","sourceRoot":"","sources":["../../../../src/composer-panel/ModelPickerBase.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAuC,gBAAgB,EAAuB,MAAM,SAAS,CAAC;AA0X1G;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,YAAY,EACZ,aAAa,EACb,MAAM,EACN,aAA8B,EAC9B,cAAc,EACd,YAAyC,EACzC,MAAM,EAAE,cAAc,EACtB,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,2CAiUlB"}

package/lib/typescript/module/composer-panel/PermissionMenu.d.ts

@@ -15,7 +15,9 @@ interface PermissionMenuProps {
  * press or while its menu is open, and a 323px panel of radio rows that opens
  * upward.
  *
- *   trigger   h 30, pl 8 / pr 10, gap 4, icon 16, body-medium secondary
+ *   trigger   min-h 30 (grows with the system font), max-w 160 then the
+ *             label ellipsizes, pl 8 / pr 10, gap 4, icon 16, body-medium
+ *             secondary
  *   panel     w 323, radius 20, border, p 6, shadow-dropdown
  *   body      pt 4, header→rows 6; header px 8 gap 10, body-medium tertiary
  *   row       p 8, radius 14, gap 8, icon 20, label body-medium secondary,

package/lib/typescript/module/composer-panel/PermissionMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionMenu.d.ts","sourceRoot":"","sources":["../../../../src/composer-panel/PermissionMenu.tsx"],"names":[],"mappings":"AAOA,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAKlF,UAAU,mBAAmB;IAC3B,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,MAAM,EACN,MAAM,GACP,EAAE,mBAAmB,kDAuGrB"}
+{"version":3,"file":"PermissionMenu.d.ts","sourceRoot":"","sources":["../../../../src/composer-panel/PermissionMenu.tsx"],"names":[],"mappings":"AAOA,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAOlF,UAAU,mBAAmB;IAC3B,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,MAAM,EACN,MAAM,GACP,EAAE,mBAAmB,kDAgHrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "4.25.0",
+  "version": "4.25.1",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",

package/src/ai-chat/AiChatCodePanel.tsx

@@ -17,7 +17,7 @@ import type { AiChatCodePanelProps, AiChatPanelAction, AiChatPanelTab } from './
 
 /**
  * The header row both right-hand panels share: the `PillTabList` (blue
- * pills, 20px glyphs) on the left and the panel actions on the right, 30 tall.
+ * pills, 20px glyphs) on the left and the panel actions on the right, at least 30 tall.
  */
 export function PanelHeader({
   tabs,
@@ -33,7 +33,7 @@ export function PanelHeader({
   children: React.ReactNode;
 }) {
   return (
-    <View style={{ width: '100%', height: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+    <View style={{ width: '100%', minHeight: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
       <View accessibilityLabel={label} style={{ flexShrink: 1, minWidth: 0 }}>
         <Tabs variant="pill" value={value} onValueChange={onValueChange}>
           {tabs.map((tab) => (

package/src/ai-chat/AiChatShell.tsx

@@ -236,7 +236,7 @@ export function AiChatResizeHandle({
 // ---------------------------------------------------------------------------
 
 /**
- * The in-container header below `xl`: 48 tall, px 12 / pt 11. The menu
+ * The in-container header below `xl`: at least 48 tall, px 12 / pt 11. The menu
  * button (below `lg`, where the sidebar is a drawer) and the chat's name in
  * headline-medium on the left; the button opening the panel drawer on the right.
  * Both are 36px secondary icon buttons. Renders nothing outside an
@@ -251,7 +251,7 @@ export function AiChatMobileHeader({ title, style, testID }: AiChatMobileHeaderP
       testID={testID}
       style={[
         {
-          height: 48,
+          minHeight: 48,
           flexShrink: 0,
           flexDirection: 'row',
           alignItems: 'center',
@@ -738,7 +738,7 @@ export function AiChatShell({
               ]}>
               <View
                 style={{
-                  height: 40,
+                  minHeight: 40,
                   flexShrink: 0,
                   flexDirection: 'row',
                   alignItems: 'center',

package/src/composer-panel/ComposerPanelStatusTab.tsx

@@ -44,7 +44,7 @@ function StatusItem({ icon, label, palette }: { icon: React.ReactNode; label: st
 
 /**
  * The status tab: the grey tab hanging off the Composer Panel's
- * top edge — 34 tall, inset 28 each side, radius 16 on the top corners only,
+ * top edge — at least 34 tall, inset 28 each side, radius 16 on the top corners only,
  * px 8 / py 4. Branch (mirrored merge glyph) and project folder on the left, 12
  * apart; the context meter on the right (py 4, pl 6 / pr 8, gap 4).
  */
@@ -58,7 +58,7 @@ function ComposerPanelStatusTabComponent({ branch, project, context, style, test
         {
           marginLeft: TAB_INSET,
           marginRight: TAB_INSET,
-          height: TAB_HEIGHT,
+          minHeight: TAB_HEIGHT,
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',

package/src/composer-panel/ComposerPillBase.tsx

@@ -251,7 +251,9 @@ function ModelMenu({
   const modelName = models.find((entry) => entry.id === modelId)?.name ?? modelId;
   const hasEffort = levels.length > 0;
   const triggerStyle: WebCssStyle = {
-    height: 32,
+    // At least 32, never exactly: a fixed height clips the name at the largest
+    // system font.
+    minHeight: 32,
     flexShrink: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/composer-panel/ComposerStatusBarBase.tsx

@@ -142,8 +142,8 @@ function FolderRow({
 }
 
 /**
- * The line under the AI chat's pill composer (the reference's `StatusBar`): 26
- * tall, space-between.
+ * The line under the AI chat's pill composer (the reference's `StatusBar`): at
+ * least 26 tall (it grows with the system font), space-between.
  *
  *   left     gap 12: the branch (mirrored merge glyph) and the project folder —
  *            its caret turns over while the "Local Folders" panel is open
@@ -188,7 +188,7 @@ export function ComposerStatusBarBase({
   return (
     <View
       testID={testID}
-      style={[{ width: '100%', height: 26, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, style]}>
+      style={[{ width: '100%', minHeight: 26, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, style]}>
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
         {branch !== undefined ? (
           <StatusItem

package/src/composer-panel/ModelPickerBase.tsx

@@ -369,7 +369,8 @@ function ModelRow({
     <View
       style={{
         position: 'relative',
-        height: ROW_HEIGHT,
+        // A floor, not a height: the name grows with the system font.
+        minHeight: ROW_HEIGHT,
         width: '100%',
         flexShrink: 0,
         flexDirection: 'row',
@@ -424,7 +425,7 @@ function ModelRow({
  *            mark in view (instantly on open, smoothly after)
  *   column   top 8 / right 8 / left 52: a 20px header ("Models" + a 50%-opacity
  *            "Quick Search" hint, or the search field), then the list 4 below
- *   rows     36 tall, radius 10, px 8: 16px mark, 6, name (+ provider while
+ *   rows     min 36 tall, radius 10, px 8: 16px mark, 6, name (+ provider while
  *            searching), the effort chip on the selected row, 12, 14px radio;
  *            4 apart, pb 4, soft top edge once scrolled
  *

package/src/composer-panel/PermissionMenu.tsx

@@ -10,6 +10,8 @@ import type { ComposerPanelLabels, ComposerPanelPermissionOption } from './types
 import { dataHook } from './web-hooks';
 
 const FLIP: ViewStyle = { transform: [{ scaleY: -1 }] };
+/** The permission chip's widest: past this a mode's name truncates. */
+const PERMISSION_TRIGGER_MAX_WIDTH = 160;
 
 interface PermissionMenuProps {
   palette: ComposerPalette;
@@ -27,7 +29,9 @@ interface PermissionMenuProps {
  * press or while its menu is open, and a 323px panel of radio rows that opens
  * upward.
  *
- *   trigger   h 30, pl 8 / pr 10, gap 4, icon 16, body-medium secondary
+ *   trigger   min-h 30 (grows with the system font), max-w 160 then the
+ *             label ellipsizes, pl 8 / pr 10, gap 4, icon 16, body-medium
+ *             secondary
  *   panel     w 323, radius 20, border, p 6, shadow-dropdown
  *   body      pt 4, header→rows 6; header px 8 gap 10, body-medium tertiary
  *   row       p 8, radius 14, gap 8, icon 20, label body-medium secondary,
@@ -82,7 +86,12 @@ export function PermissionMenu({
         onHoverOut={() => setHovered(false)}
         style={({ pressed }) => {
           const trigger: WebCssStyle = {
-            height: 30,
+            // At least 30, never exactly: at the largest system font the label
+            // is taller than 30 and a fixed height clipped it top and bottom.
+            // A long mode name truncates at a width that still reads as a chip.
+            minHeight: 30,
+            minWidth: 0,
+            maxWidth: PERMISSION_TRIGGER_MAX_WIDTH,
             flexShrink: 0,
             flexDirection: 'row',
             alignItems: 'center',
@@ -98,10 +107,14 @@ export function PermissionMenu({
           };
           return trigger;
         }}>
-        <View style={current.flip ? FLIP : undefined}>
+        <View style={current.flip ? [FLIP, { flexShrink: 0 }] : { flexShrink: 0 }}>
           <CurrentIcon width={16} height={16} fill={palette.iconSecondary} />
         </View>
-        <Text variant="body-medium" numberOfLines={1} style={{ color: palette.textSecondary }}>
+        <Text
+          variant="body-medium"
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={{ flexShrink: 1, minWidth: 0, color: palette.textSecondary }}>
           {current.label}
         </Text>
       </Pressable>