@kahitsan/ksui 0.15.0 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/base/Avatar.tsx

@@ -20,11 +20,18 @@ const sizeMap: Record<string, number> = {
  * people; use AccountAvatar directly for financial accounts.
  */
 export default function Avatar(props: AvatarProps) {
+  // Getter-backed so name/image stay reactive: a parent rebinding them on a live
+  // Avatar (e.g. an in-session profile update) re-renders, rather than snapshotting
+  // the values once at component init.
   const account: AvatarAccount = {
     id: 0,
     type: "user",
-    name: props.name,
-    image: props.image,
+    get name() {
+      return props.name;
+    },
+    get image() {
+      return props.image;
+    },
   };
 
   return <AccountAvatar account={account} size={sizeMap[props.size ?? "md"]} class={props.class} />;

package/src/components/composite/SearchableSelect.tsx

@@ -28,6 +28,10 @@ export interface SearchableSelectProps {
 
 const POPUP_MIN_WIDTH = 240;
 const POPUP_MAX_HEIGHT = 320; // keep in sync with max-h-80 below
+// Flip the popup above the trigger only when the space below can't fit a
+// usable list. Below this many px we'd rather open upward (if there's more room
+// there) than cramp the results.
+const POPUP_FLIP_THRESHOLD = 200;
 
 // Click-to-open combobox with inline search. The popup is rendered into a
 // Portal and positioned with `position: fixed`, so it can escape any ancestor
@@ -64,17 +68,22 @@ export default function SearchableSelect(props: SearchableSelectProps): JSX.Elem
     const width = Math.max(POPUP_MIN_WIDTH, rect.width);
     const spaceBelow = vpHeight - rect.bottom;
     const spaceAbove = rect.top;
-    const flipUp = spaceBelow < POPUP_MAX_HEIGHT && spaceAbove > spaceBelow;
-    const top = flipUp ? Math.max(8, rect.top - POPUP_MAX_HEIGHT - 4) : rect.bottom + 4;
+    // Only flip upward when there isn't enough usable room below AND there's
+    // genuinely more room above. Anchor the flipped popup by its BOTTOM (hugging
+    // the trigger) instead of computing a top from POPUP_MAX_HEIGHT, so a short
+    // result list stays adjacent to the trigger rather than floating far above it.
+    const flipUp = spaceBelow < POPUP_FLIP_THRESHOLD && spaceAbove > spaceBelow;
     const maxHeight = Math.max(
       160,
-      Math.min(POPUP_MAX_HEIGHT, flipUp ? spaceAbove - 12 : spaceBelow - 12),
+      Math.min(POPUP_MAX_HEIGHT, (flipUp ? spaceAbove : spaceBelow) - 12),
     );
     // Clamp horizontally so the popup doesn't overflow the viewport edges.
     const left = Math.min(Math.max(8, rect.left), vpWidth - width - 8);
     setPopupStyle({
       position: "fixed",
-      top: `${top}px`,
+      ...(flipUp
+        ? { bottom: `${Math.max(8, vpHeight - rect.top + 4)}px` }
+        : { top: `${rect.bottom + 4}px` }),
       left: `${left}px`,
       width: `${width}px`,
       "max-height": `${maxHeight}px`,