@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/components/tooltip.ts

@@ -8,6 +8,8 @@
  *   Tooltip               → <ui-tooltip delay-duration skip-delay-duration>
  *   TooltipTrigger        → <ui-tooltip-trigger>
  *   TooltipContent        → <ui-tooltip-content side align side-offset align-offset>
+ *                           (with shadcn's arrow, TooltipPrimitive.Arrow, drawn
+ *                           by the content and placed on the trigger's centre)
  *   TooltipProvider       → not needed; delay state is per-tooltip (and globally
  *                           shared via `skip-delay-duration` cooldown).
  *
@@ -22,7 +24,8 @@
  * Attributes on <ui-tooltip-content>:
  *   `side`:         "top" (default) | "right" | "bottom" | "left".
  *   `align`:        "center" (default) | "start" | "end".
- *   `side-offset`:  number, default 4. Pixels between trigger and content.
+ *   `side-offset`:  number, default 0 (shadcn's). Pixels between trigger and
+ *                   content, on top of the arrow's height, as Radix adds it.
  *   `align-offset`: number, default 0. Pixels of cross-axis shift.
  *
  * Events: none dispatched at present (hover state changes are local;
@@ -59,15 +62,35 @@
 import { WebComponent, html, prop } from '@webjsdev/core';
 import { ensureId } from '../lib/utils.ts';
 import { onBeforeCache } from '../lib/dom.ts';
-import { positionFloating, type PopoverSide, type PopoverAlign } from './popover.ts';
+import { positionFloating } from './floating.ts';
+import type { PopoverSide, PopoverAlign } from './popover.ts';
 
 // UA `[popover]` defaults paint a bordered, padded panel centered with
 // `margin: auto`; the class string opts out via `m-0` + `border-0` and
 // layers the shadcn look on top. `fixed` keeps JS-computed top/left in
-// top layer. UA `[popover]:not(:popover-open) { display: none }` keeps
-// the closed state hidden.
+// top layer. A closed panel is hidden by `not-open:hidden`, since the UA
+// `[popover]:not(:popover-open) { display: none }` loses to the
+// `inline-flex` most styles give the content (see popoverContentClass).
+// `overflow-visible` undoes the UA popover's `overflow: auto`, which would
+// clip the arrow hanging off the tip's edge (Radix's content is no popover,
+// so shadcn's styles never needed it).
+/** The arrow's classes (the element applies them): shadcn's TooltipPrimitive.Arrow. */
+export const tooltipArrowClass = (): string =>
+  'cn-tooltip-arrow z-50 translate-y-[calc(-50%_-_2px)] bg-foreground fill-foreground';
+
+// Where the arrow's wrapper sits for each side the tip lands on, as Radix's
+// PopperArrow places it: on the edge facing the trigger, turned to point at it.
+const ARROW_PLACEMENT: Record<string, { edge: string; origin: string; transform: string }> = {
+  top: { edge: 'bottom', origin: '', transform: 'translateY(100%)' },
+  bottom: { edge: 'top', origin: 'center 0', transform: 'rotate(180deg)' },
+  right: { edge: 'left', origin: '0 0', transform: 'translateY(50%) rotate(90deg) translateX(-50%)' },
+  left: { edge: 'right', origin: '100% 0', transform: 'translateY(50%) rotate(-90deg) translateX(50%)' },
+};
+// Radix's Arrow is 10 by 5.
+const ARROW_WIDTH = 10;
+
 export const tooltipContentClass = (): string =>
-  'fixed z-50 w-fit m-0 border-0 overflow-visible rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background';
+  'cn-tooltip-content z-50 w-fit origin-(--radix-tooltip-content-transform-origin) overflow-visible bg-foreground text-background not-open:hidden';
 
 // Module-level "last close" timestamp, shared across every <ui-tooltip>
 // on the page. When the next tooltip is hovered within
@@ -245,12 +268,48 @@ export class UiTooltip extends WebComponent({
     if (!trigger) return;
     // Placement attributes live on the <ui-tooltip-content> host (the
     // public API surface); positioning targets the inner popover element.
+    // Radix offsets the tip by the arrow's height on top of sideOffset, so the
+    // arrow has room between the tip and the trigger.
+    const arrow = popover.querySelector('[data-slot="tooltip-arrow"]');
+    const arrowHeight = arrow ? parseFloat(getComputedStyle(arrow).height) || 0 : 0;
     positionFloating(trigger, popover, {
       side: (contentHost.getAttribute('side') ?? 'top') as PopoverSide,
       align: (contentHost.getAttribute('align') ?? 'center') as PopoverAlign,
-      sideOffset: Number(contentHost.getAttribute('side-offset') ?? 4),
+      sideOffset: Number(contentHost.getAttribute('side-offset') ?? 0) + arrowHeight,
       alignOffset: Number(contentHost.getAttribute('align-offset') ?? 0),
+      radix: this.localName.slice(3),
     });
+    this._placeArrow(trigger, popover);
+  }
+
+  // The arrow sits on the side facing the trigger, centred on it along the
+  // tip's edge and kept inside that edge, the way Radix's arrow is.
+  _placeArrow(trigger: HTMLElement, popover: HTMLElement): void {
+    const wrap = popover.querySelector<HTMLElement>('[data-slot="tooltip-arrow-wrapper"]');
+    if (!wrap) return;
+    const side = popover.getAttribute('data-side') ?? 'top';
+    const place = ARROW_PLACEMENT[side] ?? ARROW_PLACEMENT.top;
+    const t = trigger.getBoundingClientRect();
+    // The tip's own box, read through its layout offsets rather than its
+    // rect, which an entrance animation is still scaling.
+    // The wrapper is placed from inside the tip's border.
+    const left = popover.offsetLeft + popover.clientLeft;
+    const top = popover.offsetTop + popover.clientTop;
+    // Radix's transforms keep the wrapper's centre on its left edge's offset
+    // plus half its width across a top or bottom edge, and on its top's offset
+    // plus half its height along a side edge, so centre it by those.
+    const w = wrap.offsetWidth || ARROW_WIDTH;
+    const h = wrap.offsetHeight || ARROW_WIDTH / 2;
+    const along = side === 'top' || side === 'bottom'
+      ? Math.min(Math.max(t.left + t.width / 2 - left - w / 2, 0), popover.clientWidth - w)
+      : Math.min(Math.max(t.top + t.height / 2 - top - h / 2, 0), popover.clientHeight - h);
+    const st = wrap.style;
+    st.left = st.top = st.right = st.bottom = '';
+    if (side === 'top' || side === 'bottom') st.left = `${along}px`;
+    else st.top = `${along}px`;
+    st.setProperty(place.edge, '0px');
+    st.transformOrigin = place.origin;
+    st.transform = place.transform;
   }
 }
 UiTooltip.register('ui-tooltip');
@@ -292,7 +351,9 @@ export class UiTooltipContent extends WebComponent {
       role="tooltip"
       popover="manual"
       class=${tooltipContentClass()}
-    ><slot></slot></div>`;
+    ><slot></slot><span data-slot="tooltip-arrow-wrapper" aria-hidden="true" style="position: absolute; bottom: 0px; transform: translateY(100%)"><svg
+      data-slot="tooltip-arrow" class=${tooltipArrowClass()} width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" style="display: block"
+    ><polygon points="0,0 30,0 15,10"></polygon></svg></span></div>`;
   }
 }
 UiTooltipContent.register('ui-tooltip-content');

package/packages/registry/components/trace.ts

@@ -0,0 +1,75 @@
+/**
+ * Trace: a vertical timeline of steps (a tool call, a reasoning step, a
+ * deploy stage), each with an icon on a connecting line, a title and an
+ * optional collapsible detail. Tier-1 class helper; compose with plain
+ * elements and `<details>` for the collapsible part.
+ *
+ * shadcn parity:
+ *   Trace                       → traceClass()
+ *   TraceLine / TraceIcon       → traceLineClass() / traceIconClass()
+ *   TraceTitle / TraceDescription
+ *                               → traceTitleClass() / traceDescriptionClass()
+ *   TraceCollapsible / TraceCollapsibleTrigger / TraceCollapsibleContent
+ *                               → <details> / <summary> / a div, with the
+ *                                 trace collapsible helpers
+ *
+ * shadcn has no new-york version of this component, so its look in the
+ * default style is shadcn's vega style, the classic shadcn look.
+ *
+ * A11y (required for accessible output): a trace is an ordered list of steps,
+ * so render it as `<ol>` with each step an `<li>`. A step's status must be in
+ * text, not only in the icon colour ("Failed", "Done"), and a decorative icon
+ * takes `aria-hidden="true"`. A collapsible step is a native `<details>` with a
+ * `<summary>`, which carries the expanded state by itself.
+ *
+ * Design tokens used: --border, --muted-foreground, --foreground.
+ *
+ * @example
+ * ```html
+ * <ol class=${traceClass()} data-slot="trace">
+ *   <li class=${traceLineClass()} data-slot="trace-line">
+ *     <span class=${traceTitleClass()} data-slot="trace-title">Fetched the issue</span>
+ *   </li>
+ * </ol>
+ * ```
+ */
+
+/** Set `data-slot="trace"` on the element. */
+export function traceClass(): string {
+  return 'cn-trace flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-start *:has-[>[data-slot=trace-line]]:outline-none';
+}
+
+/** Set `data-slot="trace-line"` on the element. */
+export function traceLineClass(): string {
+  return 'cn-trace-line flex w-fit max-w-full min-w-0 items-center text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer';
+}
+
+/** Set `data-slot="trace-icon"` on the element. */
+export function traceIconClass(): string {
+  return 'cn-trace-icon flex shrink-0 items-center justify-center [&_svg]:pointer-events-none';
+}
+
+/** Set `data-slot="trace-title"` on the element. */
+export function traceTitleClass(): string {
+  return 'cn-trace-title min-w-0 truncate motion-reduce:shimmer-none';
+}
+
+/** Set `data-slot="trace-description"` on the element. */
+export function traceDescriptionClass(): string {
+  return 'cn-trace-description shrink-0 text-muted-foreground/70 tabular-nums';
+}
+
+/** Set `data-slot="trace-collapsible"` on the element. */
+export function traceCollapsibleClass(): string {
+  return 'cn-trace-collapsible flex w-full min-w-0 flex-col';
+}
+
+/** Set `data-slot="trace-collapsible-trigger"` on the element. */
+export function traceCollapsibleTriggerClass(): string {
+  return 'cn-trace-collapsible-trigger group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-start text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive';
+}
+
+/** Set `data-slot="trace-collapsible-content"` on the element. */
+export function traceCollapsibleContentClass(): string {
+  return 'cn-trace-collapsible-content-inner min-w-0 wrap-break-word text-muted-foreground';
+}

package/packages/registry/lib/dom.ts

@@ -1,8 +1,7 @@
 // Client-only DOM helpers. Kept SEPARATE from lib/utils.ts because these
-// reference `document`: any module that references a client global is treated
-// as client-effecting by the elision analyzer, so bundling this with the pure
-// `cn()` would pin every page that imports `cn` to the browser (#819). Import
-// these ONLY from components (which ship anyway), never from a page/layout.
+// reference `document`, while the pure `cn()` is imported by pages and layouts
+// too, which run only on the server (#819). Import these ONLY from components
+// (which ship to the browser), never from a page/layout.
 
 /**
  * Run `reset` just before the webjs client router snapshots the page into its