aplance-ui 1.4.0 → 1.5.0

package/package.json

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

package/registry/components/ui/accordion/accordion.tsx

@@ -9,6 +9,7 @@ import {
 import clsx from "clsx";
 import { IconChevronDown } from "@tabler/icons-react";
 import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import { Button } from "../button/button";
 import s from "./accordion.module.css";
 
 export type AccordionVariant = "bordered" | "minimal";
@@ -17,12 +18,23 @@ export type AccordionMode = "single" | "multiple";
 
 export type AccordionSize = "sm" | "md" | "lg";
 
+/**
+ * How an item opens. icon: the whole heading, with a chevron in it. button:
+ * the heading too, with a bordered chevron button at its end, as a table row
+ * ends in its menu button.
+ */
+export type AccordionToggle = "icon" | "button";
+
 export type AccordionItem = {
   id: string;
   title: ReactNode;
   content: ReactNode;
   disabled?: boolean;
   defaultOpen?: boolean;
+  /** Controls beside the heading, outside the button that opens it: a row's menu. */
+  actions?: ReactNode;
+  /** This item's own class, beside `itemClassName`: one marked apart from the rest. */
+  className?: string;
 };
 
 type AccordionBaseProps = {
@@ -35,6 +47,7 @@ type AccordionBaseProps = {
   size?: AccordionSize;
   icon?: ReactNode;
   iconRotation?: number;
+  toggle?: AccordionToggle;
 };
 
 type AccordionSingleProps = {
@@ -80,6 +93,7 @@ type ItemViewProps = {
   size: AccordionSize;
   variant: AccordionVariant;
   icon?: ReactNode;
+  toggle: AccordionToggle;
   itemClassName?: string;
   triggerClassName?: string;
   contentClassName?: string;
@@ -114,6 +128,7 @@ const AccordionItemView = ({
   size,
   variant,
   icon,
+  toggle,
   itemClassName,
   triggerClassName,
   contentClassName,
@@ -138,6 +153,13 @@ const AccordionItemView = ({
 
   useResizeObserver(contentRef, updateHeight, { enabled: isOpen });
 
+  const chevron = icon ?? (
+    <IconChevronDown size={size === "sm" ? 16 : size === "lg" ? 20 : 18} />
+  );
+  // With actions or a toggle button, the heading is a row: the button that
+  // opens the item, then the controls beside it, outside that button.
+  const row = toggle === "button" || item.actions !== undefined;
+
   return (
     <section
       className={clsx(
@@ -146,42 +168,90 @@ const AccordionItemView = ({
         isOpen && s.item_open,
         item.disabled && s.item_disabled,
         itemClassName,
+        item.className,
       )}
       data-state={isOpen ? "open" : "closed"}
     >
-      <button
-        id={triggerId}
-        type="button"
-        disabled={item.disabled}
-        aria-expanded={isOpen}
-        aria-controls={panelId}
-        onClick={onToggle}
-        className={clsx(
-          s.trigger,
-          s[`trigger_${size}`],
-          s[`trigger_${variant}`],
-          isOpen && s.trigger_open,
-          triggerClassName,
-        )}
-      >
-        <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
-        <span
-          className={clsx(s.icon, isOpen && s.icon_open)}
-          aria-hidden="true"
+      {row ? (
+        <div
+          className={clsx(
+            s.header,
+            s[`trigger_${size}`],
+            s[`header_${variant}`],
+            isOpen && s.trigger_open,
+          )}
         >
-          {icon ?? (
-            <IconChevronDown
-              size={size === "sm" ? 16 : size === "lg" ? 20 : 18}
-            />
+          <button
+            id={triggerId}
+            type="button"
+            disabled={item.disabled}
+            aria-expanded={isOpen}
+            aria-controls={panelId}
+            onClick={onToggle}
+            className={clsx(s.trigger, s.header_trigger, triggerClassName)}
+          >
+            <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
+            {toggle === "icon" ? (
+              <span
+                className={clsx(s.icon, isOpen && s.icon_open)}
+                aria-hidden="true"
+              >
+                {chevron}
+              </span>
+            ) : null}
+          </button>
+          {item.actions !== undefined ? (
+            <div className={s.actions}>{item.actions}</div>
+          ) : null}
+          {toggle === "button" ? (
+            <Button
+              type="button"
+              variant="bordered"
+              size="sm"
+              layout="box"
+              aria-label={isOpen ? "Collapse section" : "Expand section"}
+              aria-expanded={isOpen}
+              aria-controls={panelId}
+              disabled={item.disabled}
+              onClick={onToggle}
+              className={clsx(s.toggle, isOpen && s.toggle_open)}
+            >
+              {chevron}
+            </Button>
+          ) : null}
+        </div>
+      ) : (
+        <button
+          id={triggerId}
+          type="button"
+          disabled={item.disabled}
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          onClick={onToggle}
+          className={clsx(
+            s.trigger,
+            s[`trigger_${size}`],
+            s[`trigger_${variant}`],
+            isOpen && s.trigger_open,
+            triggerClassName,
           )}
-        </span>
-      </button>
+        >
+          <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
+          <span
+            className={clsx(s.icon, isOpen && s.icon_open)}
+            aria-hidden="true"
+          >
+            {chevron}
+          </span>
+        </button>
+      )}
 
       <div
         id={panelId}
         role="region"
         aria-labelledby={triggerId}
         aria-hidden={!isOpen}
+        inert={!isOpen}
         className={clsx(s.panel, isOpen && s.panel_open)}
         style={{ height: `${panelHeight}px` }}
       >
@@ -212,6 +282,7 @@ export const Accordion = ({
   size = "md",
   icon,
   iconRotation = 180,
+  toggle = "icon",
   ...variantProps
 }: AccordionProps) => {
   const uid = useId();
@@ -317,6 +388,7 @@ export const Accordion = ({
           size={size}
           variant={variant}
           icon={icon}
+          toggle={toggle}
           itemClassName={itemClassName}
           triggerClassName={triggerClassName}
           contentClassName={contentClassName}

package/registry/components/ui/avatar/avatar.tsx

@@ -17,10 +17,10 @@ const COLORS = [
   { bg: "oklch(0.92 0.06 85)", fg: "oklch(0.4 0.15 85)" },
   { bg: "oklch(0.92 0.05 25)", fg: "oklch(0.4 0.15 25)" },
   { bg: "oklch(0.92 0.05 330)", fg: "oklch(0.4 0.15 330)" },
-];
+] as const;
 
 export function Avatar({ name, size = "md", className }: AvatarProps) {
-  const color = COLORS[hashName(name) % COLORS.length];
+  const color = COLORS[hashName(name) % COLORS.length] ?? COLORS[0];
   const initials = getInitials(name) || "?";
   return (
     <div

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

@@ -9,8 +9,7 @@
   --breadcrumbs-color-current: var(--color-foreground);
   --breadcrumbs-color-separator: var(--color-muted-foreground);
   --breadcrumbs-font-size: var(--font-size-sm);
-  --breadcrumbs-gap: var(--spacing-3);
-  --breadcrumbs-padding: var(--spacing-2) var(--spacing-3);
+  --breadcrumbs-gap: var(--spacing-5);
 
   display: block;
   width: 100%;
@@ -22,8 +21,7 @@
 
 .size_sm {
   --breadcrumbs-font-size: var(--font-size-xs);
-  --breadcrumbs-gap: var(--spacing-2);
-  --breadcrumbs-padding: var(--spacing-1) var(--spacing-2);
+  --breadcrumbs-gap: var(--spacing-4);
 }
 
 /* ─── List ───────────────────────────────────────────────────────────────── */
@@ -45,15 +43,18 @@
   min-width: 0;
 }
 
-/* ─── Crumb (link / button / span) ───────────────────────────────────────── */
+/* ─── Crumb (link / button / span) ───────────────────────────────────────────
+   A text link, not a button: no padding or hover fill, so every crumb sits on
+   the same edge as the content under it. Hover darkens the text.
+   ─────────────────────────────────────────────────────────────────────────── */
 
 .crumb {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
   min-width: 0;
-  padding: var(--breadcrumbs-padding);
-  border-radius: var(--radius-md);
+  padding: 0;
+  border-radius: var(--radius-sm);
   color: inherit;
   background-color: transparent;
   font: inherit;
@@ -62,7 +63,7 @@
   white-space: nowrap;
   cursor: default;
   transition: var(--transition-fast);
-  transition-property: background-color, color;
+  transition-property: color;
 }
 
 .crumb_link {
@@ -71,7 +72,6 @@
 
   &:hover {
     color: var(--breadcrumbs-color-hover);
-    background-color: var(--color-muted);
   }
 
   &:focus-visible {

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

@@ -1,4 +1,4 @@
-.base {
+.base {
   --button-fg: var(--color-foreground);
   --button-placeholder: var(--button-fg);
   --button-icon: var(--button-fg);
@@ -11,7 +11,9 @@
   min-height: var(--spacing-11);
   border-radius: var(--radius-md);
   display: flex;
-  min-width: fit-content;
+  /* Never narrower than its label, unless the host sets the variable (a
+     full-width field trigger sets 0, so its label truncates). */
+  min-width: var(--button-min-width, fit-content);
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-4);
@@ -24,7 +26,7 @@
   outline: none;
   border: none;
 
-  line-height: 1.125;
+  line-height: 1.125;
 
   svg {
     cursor: pointer;
@@ -36,12 +38,16 @@
     font-size: var(--font-size-xs);
   }
 
-  &.box {
+  /* An icon button: as wide as it is high, its own size and never its
+     content's (the base keeps a button at least as wide as its content), so
+     a round one stays round; the icon sits in its middle. */
+  &.box {
     width: var(--spacing-11);
+    min-width: 0;
     min-height: unset;
     justify-content: center;
     height: var(--spacing-11);
-    padding: var(--spacing-2);
+    padding: 0;
 
     &.sm {
       width: var(--spacing-10);
@@ -183,6 +189,38 @@
   }
 }
 
+/* Same pattern - danger is the soft red a Badge's error tone uses, for an
+   action that cannot be taken back: deleting, purging, removing. It reads in
+   both themes from the error tokens alone. */
+:is(.danger, .tone_danger) {
+  --button-fg: var(--color-error-foreground);
+  --button-placeholder: var(--color-error-foreground);
+  --button-icon: var(--color-error-foreground);
+}
+
+.danger {
+  background-color: var(--color-error-subtle);
+  border: 1px solid
+    color-mix(in oklch, var(--color-error-foreground) 24%, var(--color-border));
+  color: var(--button-fg);
+  box-shadow: var(--shadow-sm);
+
+  svg {
+    color: var(--button-icon);
+  }
+
+  &:hover:not(.disabled),
+  &:active:not(.disabled),
+  &.input_focus:focus,
+  &.active {
+    background-color: color-mix(
+      in oklch,
+      var(--color-error-foreground) 14%,
+      var(--color-error-subtle)
+    );
+  }
+}
+
 /* Same pattern - ghost is transparent background; tone alias lets composing
    components inherit these vars without applying the full ghost layout rules. */
 :is(.ghost, .tone_ghost) {

package/registry/components/ui/button/button.tsx

@@ -12,7 +12,8 @@ export type ButtonVariant =
   | "secondary"
   | "bordered"
   | "border_b"
-  | "ghost";
+  | "ghost"
+  | "danger";
 export type ButtonSize = "default" | "sm";
 export type ButtonLayout = "default" | "box";
 export type AsProp = "button" | "div" | "span" | "link";

package/registry/components/ui/copy-button/copy-button.module.css

@@ -1,6 +1,8 @@
+/* A fixed control: long text beside it, as in a table cell, never squeezes it. */
 .base {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .icon {