aplance-ui 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplance-ui",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "The aplance-ui CLI - scaffold the design system and copy components into your project as source.",
   "keywords": [
     "react",

package/registry/components/primitives/icon/icon.tsx

@@ -31,12 +31,10 @@ export const Icon: FC<IconProps> = ({
       className={clsx(
         s.wrapper,
         s[size],
-        {
-          [s.disabled]: disabled,
-          [s.clickable]: !!onClick || clickable,
-          [s.rotate]: rotate,
-          [s.rotate_sub]: rotateSub,
-        },
+        disabled && s.disabled,
+        (!!onClick || clickable) && s.clickable,
+        rotate && s.rotate,
+        rotateSub && s.rotate_sub,
         className,
       )}
       style={style}

package/registry/components/primitives/modal/modal.module.css

@@ -21,6 +21,11 @@
   opacity: 0;
   transition: opacity var(--modal-animation-duration) var(--ease-in-out);
 
+  /* Closing, it fades out without taking clicks: the page under it answers. */
+  &[data-state='closed'] {
+    pointer-events: none;
+  }
+
   &[data-state='open'] {
     opacity: 1;
   }

package/registry/components/primitives/modal/modal.tsx

@@ -207,23 +207,23 @@ export const Modal: FC<ModalProps> = ({
   const contentRef = useRef<HTMLDivElement>(null);
   const modalId = useId();
 
+  // Freeze dialog content during close animation so conditional content
+  // (e.g. {editAgent && <form>}) doesn't collapse before the animation ends:
+  // open, the dialog follows its children; closed, it keeps the last ones.
+  const [openChildren, setOpenChildren] = useState(children);
+  if (isOpen && openChildren !== children) setOpenChildren(children);
+
   // Split children: <ModalTrigger> siblings render outside the dialog so they
   // stay visible while closed; everything else is dialog content. Order is
   // preserved within each bucket, which is all consumers care about.
   const nestedTriggers: ReactNode[] = [];
-  const dialogChildren: ReactNode[] = [];
   Children.forEach(children, (child) => {
-    if (isValidElement(child) && child.type === ModalTrigger) {
-      nestedTriggers.push(child);
-    } else {
-      dialogChildren.push(child);
-    }
+    if (isValidElement(child) && child.type === ModalTrigger) nestedTriggers.push(child);
+  });
+  const dialogChildren: ReactNode[] = [];
+  Children.forEach(isOpen ? children : openChildren, (child) => {
+    if (!(isValidElement(child) && child.type === ModalTrigger)) dialogChildren.push(child);
   });
-
-  // Freeze dialog content during close animation so conditional content
-  // (e.g. {editAgent && <form>}) doesn't collapse before the animation ends.
-  const childrenSnapshot = useRef<ReactNode>(dialogChildren);
-  if (isOpen) childrenSnapshot.current = dialogChildren;
 
   // Stash callbacks in refs so identity changes on the parent don't retrigger
   // the open/close effect (which would leak timers and re-fire onOpen).
@@ -246,32 +246,30 @@ export const Modal: FC<ModalProps> = ({
   const close = useCallback(() => setIsOpen(false), [setIsOpen]);
   const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen, setIsOpen]);
 
-  // Open:  setShouldRender(true) → node mounts → useLayoutEffect below fires → isVisible=true → open transition
-  // Close: setIsVisible(false) immediately → close transition plays → setTimeout unmounts after duration
+  // Open:  the node mounts in this render → useLayoutEffect below fires → isVisible=true → open transition
+  // Close: isVisible=false in this render → close transition plays → setTimeout unmounts after duration
+  if (isOpen && !shouldRender) setShouldRender(true);
+  if (!isOpen && isVisible) setIsVisible(false);
   useEffect(() => {
-    if (isOpen) {
-      setShouldRender(true);
-    } else {
-      setIsVisible(false);
-      const t = setTimeout(() => {
-        setShouldRender(false);
-        onCloseRef.current?.();
-      }, animationDuration);
-      return () => clearTimeout(t);
-    }
+    if (isOpen) return undefined;
+    const t = setTimeout(() => {
+      setShouldRender(false);
+      onCloseRef.current?.();
+    }, animationDuration);
+    return () => clearTimeout(t);
   }, [isOpen, animationDuration]);
 
-  // Fires synchronously after the node is painted for the first time.
-  // Force-reads offsetHeight to flush the browser's style recalc so it
-  // registers the closed CSS state before we flip to open - same trick
-  // Popover uses with isMeasured + ResizeObserver.
+  // Fires synchronously once the node is painted, and again when it is opened
+  // while still mounted (reopened during its close transition, which would
+  // otherwise stay closed). Force-reads offsetHeight to flush the browser's
+  // style recalc so it registers the closed CSS state before we flip to open -
+  // same trick Popover uses with isMeasured + ResizeObserver.
   useLayoutEffect(() => {
-    if (shouldRender && mounted && contentRef.current) {
+    if (shouldRender && mounted && isOpen && contentRef.current) {
       void contentRef.current.offsetHeight; // flush reflow
-      setIsVisible(isOpen);
+      setIsVisible(true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldRender, mounted]); // only run when node mounts or mounted state changes
+  }, [shouldRender, mounted, isOpen]);
 
   useEffect(() => {
     if (isOpen) onOpenRef.current?.();
@@ -313,7 +311,7 @@ export const Modal: FC<ModalProps> = ({
 
     const trap = (e: globalThis.KeyboardEvent) => {
       if (e.key !== "Tab") return;
-      if (focusable.length === 0) {
+      if (!first || !last) {
         e.preventDefault();
         return;
       }
@@ -388,7 +386,7 @@ export const Modal: FC<ModalProps> = ({
         style={style}
       >
         {/* children render ONLY here - never outside the dialog */}
-        {childrenSnapshot.current}
+        {dialogChildren}
       </div>
     </div>
   ) : null;
@@ -547,7 +545,7 @@ export const ModalHeader: FC<ComponentProps<"div">> = ({
       {showCloseButton && (
         <Button
           as="button"
-          variant="ghost"
+          variant="bordered"
           layout="box"
           size="sm"
           className={s.close_button}

package/registry/components/primitives/popover/popover-context.ts

@@ -1,29 +1,33 @@
-import { createContext, useContext, type RefObject } from "react";
-import type { Coords, Position, Trigger } from "./popover";
-
-export type PopoverContextType = {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  popoverRef: RefObject<HTMLDivElement | null>;
-  menuRef: RefObject<HTMLDivElement | null>;
-  coords: Coords;
-  isMeasured: boolean;
-  shouldRender: boolean;
-  animationDuration?: number;
-  triggerWidth: number;
-  trigger: Trigger;
-  position: Position;
-  hoverTimeoutRef: RefObject<ReturnType<typeof setTimeout> | null>;
-  renderOnPortal: boolean;
-  mounted: boolean;
-};
-
-export const PopoverContext = createContext<PopoverContextType | undefined>(
-  undefined,
-);
-
-export const usePopover = () => {
-  const ctx = useContext(PopoverContext);
-  if (!ctx) throw new Error("usePopover must be used within Popover");
-  return ctx;
-};
+import { createContext, useContext, type RefObject } from "react";
+import type { Coords, Position, Trigger } from "./popover";
+
+export type PopoverContextType = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  popoverRef: RefObject<HTMLDivElement | null>;
+  menuRef: RefObject<HTMLDivElement | null>;
+  coords: Coords;
+  isMeasured: boolean;
+  shouldRender: boolean;
+  animationDuration?: number;
+  triggerWidth: number;
+  trigger: Trigger;
+  position: Position;
+  resolvedPosition: Position;
+  availableWidth?: number;
+  availableHeight?: number;
+  autoPosition: boolean;
+  hoverTimeoutRef: RefObject<ReturnType<typeof setTimeout> | null>;
+  renderOnPortal: boolean;
+  mounted: boolean;
+};
+
+export const PopoverContext = createContext<PopoverContextType | undefined>(
+  undefined,
+);
+
+export const usePopover = () => {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) throw new Error("usePopover must be used within Popover");
+  return ctx;
+};

package/registry/components/primitives/popover/popover.module.css

@@ -7,8 +7,10 @@
   justify-content: center;
 
   .trigger {
-    width: 100%;
-    min-width: fit-content;
+    width: 100%;
+    /* At least as wide as its content, unless the host sets the variable (a
+       form field sets 0, so a long value truncates). */
+    min-width: var(--popover-trigger-min-width, fit-content);
     display: flex;
     align-items: center;
 

package/registry/components/primitives/popover/popover.tsx

@@ -26,6 +26,24 @@ export type Coords = {
   left: number;
 };
 
+const DEFAULT_COLLISION_PADDING = 8;
+
+const oppositePosition: Record<Position, Position> = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left",
+};
+
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+const isVerticalPosition = (position: Position): boolean =>
+  position === "top" || position === "bottom";
+
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(Math.max(value, min), Math.max(min, max));
+
 // Popover Component
 export type PopoverProps = {
   children?: ReactNode;
@@ -44,6 +62,10 @@ export type PopoverProps = {
   trigger?: Trigger;
   // Useful when using in isolated environments like Iframe
   renderOnPortal?: boolean;
+  /** Auto-position the menu so it stays within the viewport. Default: true. */
+  autoPosition?: boolean;
+  /** Viewport padding used by auto positioning. Default: 8. */
+  collisionPadding?: number;
 };
 
 export const Popover: FC<PopoverProps> = ({
@@ -62,6 +84,8 @@ export const Popover: FC<PopoverProps> = ({
   onClose,
   trigger = "click",
   renderOnPortal = true,
+  autoPosition,
+  collisionPadding = DEFAULT_COLLISION_PADDING,
 }) => {
   const readLocationKey = () =>
     `${window.location.pathname}${window.location.search}${window.location.hash}`;
@@ -84,11 +108,18 @@ export const Popover: FC<PopoverProps> = ({
   const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const mounted = useHasMounted();
+  const shouldAutoPosition = autoPosition ?? true;
 
   const [coords, setCoords] = useState<Coords>({ top: 0, left: 0 });
   const [shouldRender, setShouldRender] = useState(false);
   const [isMeasured, setIsMeasured] = useState(false);
   const [triggerWidth, setTriggerWidth] = useState(0);
+  const [resolvedPosition, setResolvedPosition] =
+    useState<Position>(position);
+  const [availableSize, setAvailableSize] = useState<{
+    width?: number;
+    height?: number;
+  }>({});
 
   // Calculate Menu Position
   const calculatePosition = useCallback(() => {
@@ -97,21 +128,66 @@ export const Popover: FC<PopoverProps> = ({
     const triggerRect = popoverRef.current.getBoundingClientRect();
     const menuRect = menuRef.current.getBoundingClientRect();
     const { innerWidth, innerHeight } = window;
+    const padding = Number.isFinite(collisionPadding)
+      ? Math.max(0, collisionPadding)
+      : DEFAULT_COLLISION_PADDING;
 
     let top = 0;
     let left = 0;
+    let nextPosition = position;
+
+    const availableByPosition: Record<Position, number> = {
+      top: Math.max(0, triggerRect.top - padding - offset),
+      bottom: Math.max(0, innerHeight - triggerRect.bottom - padding - offset),
+      left: Math.max(0, triggerRect.left - padding - offset),
+      right: Math.max(0, innerWidth - triggerRect.right - padding - offset),
+    };
+
+    if (shouldAutoPosition) {
+      const preferredSpace = availableByPosition[position];
+      const opposite = oppositePosition[position];
+      const oppositeSpace = availableByPosition[opposite];
+      const requiredSpace = isVerticalPosition(position)
+        ? menuRect.height
+        : menuRect.width;
+
+      if (preferredSpace < requiredSpace && oppositeSpace > preferredSpace) {
+        nextPosition = opposite;
+      }
+    }
+
+    const viewportWidth = Math.max(0, innerWidth - padding * 2);
+    const viewportHeight = Math.max(0, innerHeight - padding * 2);
+    const availableWidth = shouldAutoPosition
+      ? isVerticalPosition(nextPosition)
+        ? viewportWidth
+        : availableByPosition[nextPosition]
+      : undefined;
+    const availableHeight = shouldAutoPosition
+      ? isVerticalPosition(nextPosition)
+        ? availableByPosition[nextPosition]
+        : viewportHeight
+      : undefined;
+    const measuredWidth =
+      availableWidth === undefined
+        ? menuRect.width
+        : Math.min(menuRect.width, availableWidth);
+    const measuredHeight =
+      availableHeight === undefined
+        ? menuRect.height
+        : Math.min(menuRect.height, availableHeight);
 
     // Main axis positioning (offset applies here)
-    switch (position) {
+    switch (nextPosition) {
       case "top":
-        top = triggerRect.top - menuRect.height - offset;
+        top = triggerRect.top - measuredHeight - offset;
 
         break;
       case "bottom":
         top = triggerRect.bottom + offset;
         break;
       case "left":
-        left = triggerRect.left - menuRect.width - offset;
+        left = triggerRect.left - measuredWidth - offset;
         break;
       case "right":
         left = triggerRect.right + offset;
@@ -119,48 +195,48 @@ export const Popover: FC<PopoverProps> = ({
     }
 
     // Cross axis positioning (align applies here)
-    switch (position) {
+    switch (nextPosition) {
       case "top":
       case "bottom":
         if (align === "start") left = triggerRect.left;
-        else if (align === "end") left = triggerRect.right - menuRect.width;
-        else left = triggerRect.left + (triggerRect.width - menuRect.width) / 2;
+        else if (align === "end") left = triggerRect.right - measuredWidth;
+        else left = triggerRect.left + (triggerRect.width - measuredWidth) / 2;
         break;
       case "left":
       case "right":
         if (align === "start") top = triggerRect.top;
-        else if (align === "end") top = triggerRect.bottom - menuRect.height;
+        else if (align === "end") top = triggerRect.bottom - measuredHeight;
         else
-          top = triggerRect.top + triggerRect.height / 2 - menuRect.height / 2;
+          top = triggerRect.top + triggerRect.height / 2 - measuredHeight / 2;
         break;
     }
 
-    // Collision detection
-    const PADDING = 8;
-    top = Math.max(
-      PADDING,
-      Math.min(top, innerHeight - menuRect.height - PADDING),
-    );
-    left = Math.max(
-      PADDING,
-      Math.min(left, innerWidth - menuRect.width - PADDING),
-    );
+    // Keep the resolved menu position inside the viewport padding.
+    if (shouldAutoPosition) {
+      top = clamp(top, padding, innerHeight - measuredHeight - padding);
+      left = clamp(left, padding, innerWidth - measuredWidth - padding);
+    }
 
     setCoords({ top, left });
     setTriggerWidth(triggerRect.width);
+    setResolvedPosition(nextPosition);
+    setAvailableSize({
+      width: availableWidth,
+      height: availableHeight,
+    });
     setIsMeasured(true);
-  }, [position, align, offset]);
+  }, [position, align, offset, shouldAutoPosition, collisionPadding]);
 
   // Open / Close Handling
   // Visibility (opacity / pointer-events) is derived from `isOpen && isMeasured`
   // in PopoverMenu, so we DON'T reset isMeasured here on close - that would lose
   // the position cache and break re-opens that interrupt the exit animation.
   // isMeasured is reset only when the menu actually unmounts (cleanup below).
+  // Open mounts the menu in this render; close unmounts it once the exit
+  // animation has played.
+  if (isOpen && !shouldRender) setShouldRender(true);
   useEffect(() => {
-    if (isOpen) {
-      setShouldRender(true);
-      return;
-    }
+    if (isOpen) return;
     const timer = setTimeout(() => {
       setShouldRender(false);
       if (onClose) onClose();
@@ -170,17 +246,21 @@ export const Popover: FC<PopoverProps> = ({
 
   // Measure after menu is rendered. Cleanup resets isMeasured so the next mount
   // re-runs the entry animation from a known starting state.
-  useLayoutEffect(() => {
-    if (shouldRender && menuRef.current) {
-      calculatePosition();
-
-      const observer = new ResizeObserver(() => calculatePosition());
-      observer.observe(menuRef.current);
-      return () => {
-        observer.disconnect();
-        setIsMeasured(false);
-      };
+  useIsomorphicLayoutEffect(() => {
+    if (!shouldRender || !menuRef.current) return;
+    calculatePosition();
+
+    if (typeof ResizeObserver === "undefined") {
+      return () => setIsMeasured(false);
     }
+
+    const observer = new ResizeObserver(() => calculatePosition());
+    observer.observe(menuRef.current);
+    if (popoverRef.current) observer.observe(popoverRef.current);
+    return () => {
+      observer.disconnect();
+      setIsMeasured(false);
+    };
   }, [shouldRender, mounted, calculatePosition]);
 
   // Clear any pending hover-close timer when the Popover unmounts so the
@@ -268,6 +348,10 @@ export const Popover: FC<PopoverProps> = ({
         hoverTimeoutRef,
         renderOnPortal,
         position,
+        resolvedPosition,
+        availableWidth: availableSize.width,
+        availableHeight: availableSize.height,
+        autoPosition: shouldAutoPosition,
         mounted,
       }}
     >
@@ -372,6 +456,11 @@ export type PopoverMenuProps = {
   matchTriggerWidth?: boolean;
 };
 
+type PopoverMenuStyle = CSSProperties & {
+  "--popover-available-width"?: string;
+  "--popover-available-height"?: string;
+};
+
 export const PopoverMenu: FC<PopoverMenuProps> = ({
   children,
   className,
@@ -388,10 +477,13 @@ export const PopoverMenu: FC<PopoverMenuProps> = ({
     animationDuration,
     trigger,
     setIsOpen,
-    position,
+    resolvedPosition,
     hoverTimeoutRef,
     renderOnPortal,
     mounted,
+    availableWidth,
+    availableHeight,
+    autoPosition,
   } = usePopover();
 
   const handleMouseEnter = () => {
@@ -439,14 +531,34 @@ export const PopoverMenu: FC<PopoverMenuProps> = ({
     return transforms[position];
   };
 
-  const menuStyles: CSSProperties = {
+  const constrainedMaxWidth =
+    autoPosition && availableWidth !== undefined
+      ? matchTriggerWidth && triggerWidth > 0
+        ? Math.min(availableWidth, triggerWidth)
+        : availableWidth
+      : matchTriggerWidth && triggerWidth > 0
+        ? triggerWidth
+        : undefined;
+
+  const menuStyles: PopoverMenuStyle = {
     position: "fixed",
     top: coords.top,
     left: coords.left,
     zIndex: "var(--z-index-popover)",
-    ...(matchTriggerWidth && { maxWidth: triggerWidth }),
+    ...(constrainedMaxWidth !== undefined && { maxWidth: constrainedMaxWidth }),
+    ...(autoPosition &&
+      availableHeight !== undefined && { maxHeight: availableHeight }),
+    ...(autoPosition &&
+      availableWidth !== undefined && {
+        "--popover-available-width": `${availableWidth}px`,
+      }),
+    ...(autoPosition &&
+      availableHeight !== undefined && {
+        "--popover-available-height": `${availableHeight}px`,
+      }),
+    ...(autoPosition && { overflow: "auto" }),
     opacity: isVisible ? 1 : 0,
-    transform: getTransform(position, isMeasured, isOpen),
+    transform: getTransform(resolvedPosition, isMeasured, isOpen),
     transition: animationDuration
       ? `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`
       : "opacity var(--transition-base), transform var(--transition-base)",
@@ -464,6 +576,7 @@ export const PopoverMenu: FC<PopoverMenuProps> = ({
       // `useFocusOutside({ ignoreSelector })` so clicking a menu option
       // doesn't dismiss the host.
       data-popover-menu=""
+      data-position={resolvedPosition}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       style={menuStyles}

package/registry/components/ui/accordion/accordion.module.css

@@ -110,6 +110,58 @@
   padding: var(--spacing-5) var(--spacing-6);
 }
 
+/* A heading with controls beside its button (an item's actions, a toggle
+   button): the row takes the heading's padding and its shades, and the
+   button inside it takes what is left. */
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+}
+
+.header_trigger {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border-radius: var(--radius-sm);
+
+  &:focus-visible {
+    box-shadow: var(--shadow-ring);
+  }
+}
+
+.header_bordered,
+.header_minimal {
+  &:has(> .header_trigger:hover:not(:disabled)) {
+    background: var(--color-muted);
+  }
+}
+
+.header_minimal {
+  border-radius: inherit;
+}
+
+.actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.toggle {
+  flex-shrink: 0;
+
+  & svg {
+    transition: transform var(--transition-base);
+  }
+
+  &.toggle_open svg {
+    transform: rotate(var(--accordion-icon-rotation, 180deg));
+  }
+}
+
 .title {
   flex: 1;
   min-width: 0;