@carbonid1/design-system 5.7.6 → 5.7.8

package/dist/Tooltip/Tooltip.js

@@ -3,17 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { computeTooltipPlacement, } from '../helpers/tooltipPlacement/tooltipPlacement';
 import { Kbd } from '../Kbd/Kbd';
 import { cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 const DEFAULT_DELAY = 200;
 export const VIEWPORT_MARGIN = 8;
-// Must stay in sync with the mb-2 / mt-2 (0.5rem = 8px) classes below — the flip
-// math subtracts this gap, so a mismatch would mis-predict whether a side fits.
+// Gap in px between the trigger and the tooltip box, baked into the fixed `top`
+// offset below; the flip math subtracts it when deciding whether a side fits.
 const TRIGGER_GAP = 8;
 // Position before paint so an edge tooltip never flashes centered-then-shifted.
 // useLayoutEffect warns and no-ops during SSR, so fall back to useEffect there.
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DELAY, maxWidth, disabled, className, children, }) => {
     const [visible, setVisible] = useState(false);
-    const [placement, setPlacement] = useState({ side: position, offsetX: 0 });
+    const [box, setBox] = useState(null);
     const timeoutRef = useRef(null);
     const wrapperRef = useRef(null);
     const tooltipRef = useRef(null);
@@ -71,28 +72,50 @@ export const Tooltip = ({ label, shortcut, position = 'top', delay = DEFAULT_DEL
             if (!wrapper || !tooltip)
                 return;
             const trigger = wrapper.getBoundingClientRect();
-            const box = tooltip.getBoundingClientRect();
-            const next = computeTooltipPlacement({
+            const tip = tooltip.getBoundingClientRect();
+            const placement = computeTooltipPlacement({
                 trigger,
-                tooltip: { width: box.width, height: box.height },
+                tooltip: { width: tip.width, height: tip.height },
                 viewport: { width: window.innerWidth, height: window.innerHeight },
                 preferredSide: position,
                 margin: VIEWPORT_MARGIN,
                 gap: TRIGGER_GAP,
             });
-            // Keep the same object when nothing moved so a show or a no-op resize
-            // doesn't trigger a redundant re-render (the common centered case is a no-op).
-            setPlacement(prev => (prev.side === next.side && prev.offsetX === next.offsetX ? prev : next));
+            const left = trigger.left + trigger.width / 2;
+            const top = placement.side === 'top' ? trigger.top - TRIGGER_GAP : trigger.bottom + TRIGGER_GAP;
+            // Keep the same object when nothing moved so a no-op resize/scroll doesn't
+            // trigger a redundant re-render (the common centered, still case is a no-op).
+            setBox(prev => prev &&
+                prev.side === placement.side &&
+                prev.offsetX === placement.offsetX &&
+                prev.left === left &&
+                prev.top === top
+                ? prev
+                : { ...placement, left, top });
         };
         measure();
+        // Portaled and fixed, the box no longer rides the trigger's scroll container,
+        // so re-anchor on scroll (capture, to catch any scrolling ancestor) and resize.
         window.addEventListener('resize', measure, { passive: true });
-        return () => window.removeEventListener('resize', measure);
+        window.addEventListener('scroll', measure, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener('resize', measure);
+            window.removeEventListener('scroll', measure, { capture: true });
+        };
     }, [visible, position]);
-    const positionClasses = placement.side === 'top' ? 'bottom-full mb-2' : 'top-full mt-2';
-    return (_jsxs("div", { ref: wrapperRef, className: `relative inline-flex${className ? ` ${className}` : ''}`, onMouseEnter: show, onMouseLeave: hide, onPointerDown: hide, onFocus: show, onBlur: hide, children: [cloneElement(children, {
+    const boxStyle = {
+        position: 'fixed',
+        left: box?.left ?? 0,
+        top: box?.top ?? 0,
+        transform: `translate(calc(-50% + ${box?.offsetX ?? 0}px), ${box?.side === 'top' ? '-100%' : '0'})`,
+        // Hidden until measured so the first frame never paints at the un-anchored origin.
+        visibility: box ? 'visible' : 'hidden',
+        ...(maxWidth ? { maxWidth } : {}),
+    };
+    return (_jsxs("div", { ref: wrapperRef, className: `inline-flex${className ? ` ${className}` : ''}`, onMouseEnter: show, onMouseLeave: hide, onPointerDown: hide, onFocus: show, onBlur: hide, children: [cloneElement(children, {
                 'aria-label': children.props['aria-label'] ?? label,
-            }), visible && !disabled && (_jsxs("div", { ref: tooltipRef, role: "tooltip", style: {
-                    transform: `translateX(calc(-50% + ${placement.offsetX}px))`,
-                    ...(maxWidth ? { maxWidth } : {}),
-                }, className: `absolute left-1/2 z-50 ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }))] }));
+            }), visible &&
+                !disabled &&
+                typeof document !== 'undefined' &&
+                createPortal(_jsxs("div", { ref: tooltipRef, role: "tooltip", style: boxStyle, className: `bg-foreground text-background pointer-events-none z-50 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'}`, children: [label, shortcut && (_jsx(Kbd, { keys: shortcut, size: "sm", className: "bg-background/15 border-transparent" }))] }), document.body)] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.7.6",
+  "version": "5.7.8",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",

package/scripts/install-skill.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { mkdir, rm, symlink } from 'node:fs/promises'
+import { lstat, mkdir, rm, symlink } from 'node:fs/promises'
 import { dirname, join, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
@@ -15,13 +15,37 @@ if (
 }
 
 const consumerRoot = process.env.INIT_CWD || process.cwd()
-const skillDest = join(consumerRoot, '.claude', 'skills', 'design-system')
+const skillDestinations = [
+  join(consumerRoot, '.claude', 'skills', 'design-system'),
+  join(consumerRoot, '.agents', 'skills', 'design-system'),
+]
+
+async function removeExistingSkillLink(skillDest) {
+  try {
+    const stat = await lstat(skillDest)
+    if (!stat.isSymbolicLink()) {
+      console.warn(`[@carbonid1/design-system] skipped existing non-symlink skill: ${skillDest}`)
+      return false
+    }
+  } catch (err) {
+    if (err.code !== 'ENOENT') {
+      throw err
+    }
+  }
 
-try {
-  await mkdir(dirname(skillDest), { recursive: true })
   await rm(skillDest, { recursive: true, force: true })
-  await symlink(SKILL_SRC, skillDest, 'dir')
-  console.log(`[@carbonid1/design-system] linked skill → ${skillDest}`)
-} catch (err) {
-  console.warn(`[@carbonid1/design-system] could not link skill: ${err.message}`)
+  return true
+}
+
+for (const skillDest of skillDestinations) {
+  try {
+    await mkdir(dirname(skillDest), { recursive: true })
+    if (!(await removeExistingSkillLink(skillDest))) {
+      continue
+    }
+    await symlink(SKILL_SRC, skillDest, 'dir')
+    console.log(`[@carbonid1/design-system] linked skill → ${skillDest}`)
+  } catch (err) {
+    console.warn(`[@carbonid1/design-system] could not link skill: ${err.message}`)
+  }
 }