aplance-ui 1.4.0 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplance-ui",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "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.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

@@ -232,11 +232,11 @@ export const Popover: FC<PopoverProps> = ({
   // 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();
@@ -247,21 +247,20 @@ 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.
   useIsomorphicLayoutEffect(() => {
-    if (shouldRender && menuRef.current) {
-      calculatePosition();
-
-      if (typeof ResizeObserver === "undefined") {
-        return () => setIsMeasured(false);
-      }
+    if (!shouldRender || !menuRef.current) return;
+    calculatePosition();
 
-      const observer = new ResizeObserver(() => calculatePosition());
-      observer.observe(menuRef.current);
-      if (popoverRef.current) observer.observe(popoverRef.current);
-      return () => {
-        observer.disconnect();
-        setIsMeasured(false);
-      };
+    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

package/registry/components/primitives/scroll-rail/scroll-rail.module.css

@@ -0,0 +1,148 @@
+/* ------------------------------------------------------------
+   Scroll rail: a row that scrolls sideways
+   Each end fades only while there is more past it, and a chevron sits in
+   that end. The fades are a mask, as InfiniteScroll's are, so the row
+   dissolves into whatever is behind it. Their widths are registered
+   properties, so an end eases in and out instead of snapping.
+------------------------------------------------------------ */
+
+@property --scroll-rail-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-rail-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+.rail {
+  /* How wide each end's fade is, beyond the room its chevron takes: a little
+     over a control's corner, so a control passes under the edge rather than
+     being cut at it, and narrow enough that a short rail still shows its row. */
+  --scroll-rail-fade: var(--spacing-8);
+  --scroll-rail-control: calc(var(--spacing-10) + var(--spacing-2));
+
+  position: relative;
+  display: flex;
+  min-width: 0;
+}
+
+.rail_without_controls {
+  --scroll-rail-control: 0px;
+}
+
+/* The scroller. It shows no scrollbar, so the row never changes height, and
+   pads like a toolbar so its controls' focus rings show, since a scroller
+   clips both axes. */
+.track {
+  --scroll-rail-start: 0px;
+  --scroll-rail-end: 0px;
+
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  padding-block: var(--spacing-1);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent calc(var(--scroll-rail-start) - var(--scroll-rail-fade)),
+    #000 var(--scroll-rail-start),
+    #000 calc(100% - var(--scroll-rail-end)),
+    transparent calc(100% - var(--scroll-rail-end) + var(--scroll-rail-fade))
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent calc(var(--scroll-rail-start) - var(--scroll-rail-fade)),
+    #000 var(--scroll-rail-start),
+    #000 calc(100% - var(--scroll-rail-end)),
+    transparent calc(100% - var(--scroll-rail-end) + var(--scroll-rail-fade))
+  );
+  transition:
+    --scroll-rail-start var(--transition-fast),
+    --scroll-rail-end var(--transition-fast);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* An end with more past it: clear under its chevron, then the fade. */
+.rail_start .track {
+  --scroll-rail-start: calc(
+    var(--scroll-rail-control) + var(--scroll-rail-fade)
+  );
+}
+
+.rail_end .track {
+  --scroll-rail-end: calc(var(--scroll-rail-control) + var(--scroll-rail-fade));
+}
+
+/* The items, at their own widths: the row scrolls rather than squeezing them. */
+.content {
+  display: flex;
+  align-items: center;
+  width: max-content;
+
+  > * {
+    flex-shrink: 0;
+  }
+}
+
+/* A chevron, over the clear edge of its fade, on the row's middle. The
+   primitive owns only neutral button chrome; native props let a caller replace
+   the icon, label, classes, and inline styles without depending on Button. */
+.control {
+  position: absolute;
+  top: 50%;
+  translate: 0 -50%;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  padding: 0;
+  appearance: none;
+  font: inherit;
+  color: var(--color-foreground);
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition:
+    color var(--transition-base),
+    background-color var(--transition-base),
+    border-color var(--transition-base),
+    opacity var(--transition-base);
+
+  &:hover:not(:disabled) {
+    background-color: var(--color-muted);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  > svg {
+    pointer-events: none;
+  }
+}
+
+.control_start {
+  left: 0;
+}
+
+.control_end {
+  right: 0;
+}

package/registry/components/primitives/scroll-rail/scroll-rail.tsx

@@ -0,0 +1,214 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  type Ref,
+} from "react";
+import clsx from "clsx";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import s from "./scroll-rail.module.css";
+
+// A row that scrolls sideways, as a row of chips or tabs does on a phone:
+//
+// - It shows no scrollbar, as a tab list shows none, so it never changes the
+//   height of what holds it.
+// - Each end fades only while there is more past it: a fade at an end the row
+//   has reached would claim content that is not there.
+// - A chevron sits in each faded end and scrolls the row on by most of its
+//   width, so the item that was at the edge stays in view as an anchor. It is
+//   mounted only while there is more that way: a button left over the last
+//   item would take its clicks. Keyboard focus also scrolls a control into
+//   view, while the labelled chevrons offer an explicit alternative.
+// - A mouse wheel turned over it moves it across, while it has further to go
+//   that way; past its ends the page scrolls as usual. A swipe moves it as
+//   any scroller.
+
+/** How far a chevron scrolls, in widths of the row. */
+const PAGE = 0.8;
+
+export type ScrollRailControlProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "type"
+>;
+
+export type ScrollRailControls = {
+  /** Class shared by both arrow buttons. */
+  className?: string;
+  /** Native button props for the previous arrow. `children` replaces its icon. */
+  previous?: ScrollRailControlProps;
+  /** Native button props for the next arrow. `children` replaces its icon. */
+  next?: ScrollRailControlProps;
+};
+
+export type ScrollRailProps = Omit<
+  ComponentPropsWithoutRef<"div">,
+  "children"
+> & {
+  children: ReactNode;
+  /** The rail's own box, as a flex item where it sits. */
+  className?: string;
+  /** Class merged onto the horizontal scroller. */
+  trackClassName?: string;
+  /** The row's layout around its items, such as their gap. */
+  contentClassName?: string;
+  /**
+   * Customize the overflow arrows with native button props, or hide them with
+   * `false`. A custom onClick runs first and can prevent the built-in scroll.
+   */
+  controls?: false | ScrollRailControls;
+  /** The scroller, for a caller that scrolls it itself, as Tabs keeps its
+   *  active tab in view. */
+  ref?: Ref<HTMLDivElement>;
+};
+
+type Ends = { start: boolean; end: boolean };
+
+// A wheel's step in pixels, by the unit it reports.
+const wheelUnit = (event: WheelEvent, track: HTMLElement) =>
+  event.deltaMode === WheelEvent.DOM_DELTA_LINE
+    ? 16
+    : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+      ? track.clientWidth
+      : 1;
+
+export const ScrollRail = ({
+  children,
+  className,
+  trackClassName,
+  contentClassName,
+  controls,
+  ref,
+  ...rootProps
+}: ScrollRailProps) => {
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const setTrack = useCallback(
+    (node: HTMLDivElement | null) => {
+      trackRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [ends, setEnds] = useState<Ends>({ start: false, end: false });
+
+  // Whether there is more past each end; a scroll renders only when one flips.
+  const measure = useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const left = track.scrollWidth - track.clientWidth - track.scrollLeft;
+    const start = track.scrollLeft > 1;
+    const end = left > 1;
+    setEnds((was) =>
+      was.start === start && was.end === end ? was : { start, end },
+    );
+  }, []);
+
+  // The row's width and its items' change apart: a resize of either.
+  useResizeObserver(trackRef, measure);
+  useResizeObserver(contentRef, measure);
+
+  // Measure once after mount as well. ResizeObserver reports later size
+  // changes, but its initial notification is not synchronous in every host.
+  useEffect(() => {
+    measure();
+  }, [measure]);
+
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const onWheel = (event: WheelEvent) => {
+      // A sideways swipe moves it natively.
+      if (Math.abs(event.deltaX) >= Math.abs(event.deltaY)) return;
+      const max = track.scrollWidth - track.clientWidth;
+      const left = Math.min(
+        max,
+        Math.max(0, track.scrollLeft + event.deltaY * wheelUnit(event, track)),
+      );
+      if (left === track.scrollLeft) return;
+      event.preventDefault();
+      track.scrollLeft = left;
+    };
+    track.addEventListener("wheel", onWheel, { passive: false });
+    return () => track.removeEventListener("wheel", onWheel);
+  }, []);
+
+  const page = (direction: -1 | 1) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    track.scrollBy({
+      left: direction * track.clientWidth * PAGE,
+      behavior: still ? "auto" : "smooth",
+    });
+  };
+
+  const renderControl = (direction: -1 | 1) => {
+    const visible = direction === -1 ? ends.start : ends.end;
+    if (!visible || controls === false) return null;
+
+    const control = direction === -1 ? controls?.previous : controls?.next;
+    const {
+      children: controlIcon,
+      className: controlClassName,
+      onClick,
+      "aria-label": ariaLabel,
+      ...controlProps
+    } = control ?? {};
+    const label = direction === -1 ? "Scroll left" : "Scroll right";
+
+    return (
+      <button
+        {...controlProps}
+        type="button"
+        className={clsx(
+          s.control,
+          direction === -1 ? s.control_start : s.control_end,
+          controls?.className,
+          controlClassName,
+        )}
+        aria-label={ariaLabel ?? label}
+        onClick={(event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) page(direction);
+        }}
+      >
+        {controlIcon ??
+          (direction === -1 ? (
+            <IconChevronLeft size={14} stroke={2} />
+          ) : (
+            <IconChevronRight size={14} stroke={2} />
+          ))}
+      </button>
+    );
+  };
+
+  return (
+    <div
+      {...rootProps}
+      className={clsx(
+        s.rail,
+        ends.start && s.rail_start,
+        ends.end && s.rail_end,
+        controls === false && s.rail_without_controls,
+        className,
+      )}
+    >
+      <div
+        ref={setTrack}
+        className={clsx(s.track, trackClassName)}
+        onScroll={measure}
+      >
+        <div ref={contentRef} className={clsx(s.content, contentClassName)}>
+          {children}
+        </div>
+      </div>
+      {renderControl(-1)}
+      {renderControl(1)}
+    </div>
+  );
+};

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;