iter(g11): 浮层空间不足时自动翻转

packages/skin/ui/src/index.ts

@@ -20,6 +20,7 @@ export { alert } from './alert.js';
 export { toast, showToast } from './toast.js';
 export { tooltip } from './tooltip.js';
 export { popover } from './popover.js';
+export { flip } from './position.js';
 export { skeleton } from './skeleton.js';
 export { pagination } from './pagination.js';
 export { spinner } from './spinner.js';

packages/skin/ui/src/menu.ts

@@ -1,10 +1,12 @@
 import { effect, h, signal } from '@ui-arch/frame';
 import type { MenuItem, MenuProps } from './types.js';
+import { flip } from './position.js';
 
 /*** 下拉菜单：触发器 + 自绘弹层，项支持禁用 / 危险 / 分隔线；点项 / 点外部 / Esc 关闭，↑↓ 环形导航 + Home/End 跳转 ***/
 export function menu(props: MenuProps): HTMLElement {
   // —— 状态集中声明 ——
   const open = signal(false);              // 弹层开合
+  const place = signal<'top' | 'bottom'>('bottom'); // 实际生效方位：打开时按视口空间自动翻转
   const focusables: HTMLButtonElement[] = []; // 可聚焦项（跳过分隔线与禁用项），供键盘导航
 
   const pick = (item: MenuItem): void => {
@@ -47,7 +49,7 @@ export function menu(props: MenuProps): HTMLElement {
   const pop = h(
     'div',
     {
-      class: () => `ua-menu-pop${open() ? ' ua-open' : ''}${props.align === 'end' ? ' is-end' : ''}`,
+      class: () => `ua-menu-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}${props.align === 'end' ? ' is-end' : ''}`,
       role: 'menu',
     },
     ...rows,
@@ -81,5 +83,6 @@ export function menu(props: MenuProps): HTMLElement {
   });
 
   effect(() => open()); // 建立依赖，保证开合信号生效
+  effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 每次打开重算方位：空间不足自动翻转
   return root;
 }

packages/skin/ui/src/popover.ts

@@ -1,5 +1,6 @@
 import { effect, h, signal } from '@ui-arch/frame';
 import type { PopoverProps } from './types.js';
+import { flip } from './position.js';
 
 let seq = 0; // 全局自增序号：保证每个弹层 id 唯一，供 aria-controls 关联
 
@@ -7,6 +8,7 @@ let seq = 0; // 全局自增序号：保证每个弹层 id 唯一，供 aria-con
 export function popover(props: PopoverProps, trigger: HTMLElement): HTMLElement {
   // —— 状态集中声明 ——
   const open = signal(false);      // 弹层显隐
+  const place = signal(props.placement ?? 'bottom'); // 实际生效方位：打开时按视口空间自动翻转
   const id = `ua-pop-${++seq}`;    // 弹层唯一 id
   let timer: number | null = null; // hover 模式下的出入场计时器
 
@@ -24,7 +26,7 @@ export function popover(props: PopoverProps, trigger: HTMLElement): HTMLElement
     'div',
     {
       id,
-      class: () => `ua-pop ua-pop-${props.placement ?? 'bottom'}${open() ? ' ua-open' : ''}`,
+      class: () => `ua-pop ua-pop-${place()}${open() ? ' ua-open' : ''}`,
       role: 'dialog',
       'aria-hidden': () => String(!open()),
       onClick: (e: Event) => e.stopPropagation(), // 弹层内点击不触发外部关闭
@@ -55,6 +57,7 @@ export function popover(props: PopoverProps, trigger: HTMLElement): HTMLElement
     trigger.focus();                           // 收起后焦点回触发器
   });
   document.addEventListener('click', () => setOpen(false)); // 点外部收起（弹层内已阻止冒泡）
+  effect(() => { if (open()) place(flip(trigger, panel, props.placement ?? 'bottom')); }); // 每次打开重算方位：空间不足自动翻转
 
   return root;
 }

packages/skin/ui/src/position.ts

@@ -0,0 +1,11 @@
+/*** 浮层上下翻转判定：按触发器与面板的视口几何判断首选方位是否放得下，放不下且另一侧更宽敞则翻转；返回实际生效方位 'top' | 'bottom' ***/
+export function flip(trigger: HTMLElement, panel: HTMLElement, preferred: 'top' | 'bottom'): 'top' | 'bottom' {
+  const GAP = 8;   // 与 CSS 预留的浮层间距一致（popover 为 8px）
+  const MIN = 24;  // 兜底：面板尚未量出高度时按最小可读高度估算
+  const t = trigger.getBoundingClientRect();   // 触发器视口矩形
+  const h = panel.offsetHeight || MIN;         // 面板高度（visibility:hidden 仍占布局，可直接量）
+  const up = t.top;                            // 触发器上方可用空间
+  const down = window.innerHeight - t.bottom;  // 触发器下方可用空间
+  if (preferred === 'top') return up >= h + GAP || up >= down ? 'top' : 'bottom'; // 首选上方：放得下、或不比下方更局促就保持
+  return down >= h + GAP || down >= up ? 'bottom' : 'top'; // 首选下方：对称判定
+}

packages/skin/ui/src/select.ts

@@ -1,10 +1,12 @@
 import { effect, h, signal } from '@ui-arch/frame';
 import type { SelectProps } from './types.js';
+import { flip } from './position.js';
 
 /*** 下拉选择：自绘弹层替代原生 select，value 信号双向绑定；支持 ↑↓/Home/End 键盘导航，点选项 / 点外部 / Esc 关闭 ***/
 export function select(props: SelectProps): HTMLElement {
   // —— 状态集中声明 ——
   const open = signal(false);              // 弹层开合
+  const place = signal<'top' | 'bottom'>('bottom'); // 实际生效方位：打开时按视口空间自动翻转
   const value = props.value ?? signal(''); // 选中值；未传信号则内部持有
 
   const labelOf = (v: string) => props.options.find((o) => o.value === v)?.label ?? '';
@@ -45,7 +47,7 @@ export function select(props: SelectProps): HTMLElement {
       opt.label,
     ),
   );
-  const pop = h('div', { class: () => `ua-select-pop${open() ? ' ua-open' : ''}`, role: 'listbox' }, ...options);
+  const pop = h('div', { class: () => `ua-select-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}`, role: 'listbox' }, ...options);
 
   const root = h('div', { class: () => `ua-select${open() ? ' ua-open' : ''}` }, trigger, pop); // 根带开合类，供箭头旋转
 
@@ -68,5 +70,6 @@ export function select(props: SelectProps): HTMLElement {
     open(false); // 点外部关闭
   });
   effect(() => open()); // 建立依赖，保证开合信号生效
+  effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 每次打开重算方位：空间不足自动翻转
   return root;
 }

packages/skin/ui/src/tooltip.ts

@@ -1,5 +1,6 @@
-import { h, signal } from '@ui-arch/frame';
+import { effect, h, signal } from '@ui-arch/frame';
 import type { TooltipProps } from './types.js';
+import { flip } from './position.js';
 
 let seq = 0; // 全局自增序号：保证每个气泡 id 唯一，供 aria-describedby 关联
 
@@ -7,6 +8,7 @@ let seq = 0; // 全局自增序号：保证每个气泡 id 唯一，供 aria-des
 export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement {
   // —— 状态集中声明 ——
   const open = signal(false);       // 气泡显隐
+  const place = signal(props.placement ?? 'top'); // 实际生效方位：出场时按视口空间自动翻转
   const id = `ua-tip-${++seq}`;     // 气泡唯一 id
   const delay = props.delay ?? 150; // 出场延迟毫秒；<=0 视为立即显示
   let timer: number | null = null;  // 出场延迟计时器句柄
@@ -33,7 +35,7 @@ export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement
     'span',
     {
       id,
-      class: () => `ua-tip ua-tip-${props.placement ?? 'top'}${open() ? ' ua-open' : ''}`,
+      class: () => `ua-tip ua-tip-${place()}${open() ? ' ua-open' : ''}`,
       role: 'tooltip',
       'aria-hidden': () => String(!open()),
     },
@@ -45,6 +47,7 @@ export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement
   root.addEventListener('pointerleave', hide);  // 鼠标离开
   root.addEventListener('focusin', show);       // 键盘聚焦（focusin 会冒泡）
   root.addEventListener('focusout', hide);      // 失焦
+  effect(() => { if (open()) place(flip(trigger, bubble, props.placement ?? 'top')); }); // 每次出场重算方位：空间不足自动翻转
   root.addEventListener('keydown', (e: KeyboardEvent) => {
     if (e.key === 'Escape') hide(); // Esc 立即收起，不必等延迟
   });