@nadicodeai/ui 12.1.27 → 12.1.28

package/dist/.build-kind

@@ -0,0 +1 @@
+clean

package/dist/components/drawer.js

@@ -46,7 +46,7 @@ function DrawerContent({ className, children, ...props }) {
                     // Stack.
                     "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]", 
                     // Transitions.
-                    "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] motion-reduce:data-ending-style:transform-none motion-reduce:data-starting-style:transform-none", 
+                    "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] motion-reduce:data-ending-style:transform-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:opacity-0 motion-reduce:data-starting-style:opacity-0", 
                     // Axis: y.
                     "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", 
                     // Axis: x.

package/dist/eslint/index.js

@@ -20,6 +20,7 @@ import { noPairedSizeUtility } from "./rules/no-paired-size-utility.js";
 import { noRestingSettingsControl } from "./rules/no-resting-settings-control.js";
 import { oneControlHeight } from "./rules/one-control-height.js";
 import { overlayBodyOwnsScroll } from "./rules/overlay-body-owns-scroll.js";
+import { overlayMountsClosed } from "./rules/overlay-mounts-closed.js";
 import { tableColumnWrapsByMeta } from "./rules/table-column-wraps-by-meta.js";
 import { noShadcnAppearanceOverride } from "./rules/no-shadcn-appearance-override.js";
 import { noSubjectDerivedExpectation } from "./rules/no-subject-derived-expectation.js";
@@ -98,6 +99,7 @@ export const strictDesignSystemRules = {
   "nadicodeai/no-shadcn-appearance-override": "error",
   "nadicodeai/no-token-category-bypass": "error",
   "nadicodeai/overlay-body-owns-scroll": "error",
+  "nadicodeai/overlay-mounts-closed": "error",
   "nadicodeai/prefer-radio-for-few-static-options": "error",
 };
 
@@ -135,6 +137,7 @@ const plugin = {
     "no-token-category-bypass": noTokenCategoryBypass,
     "one-control-height": oneControlHeight,
     "overlay-body-owns-scroll": overlayBodyOwnsScroll,
+    "overlay-mounts-closed": overlayMountsClosed,
     "table-column-wraps-by-meta": tableColumnWrapsByMeta,
     "server-action-discipline": serverActionDiscipline,
     "settings-section-description": settingsSectionDescription,

package/dist/eslint/rules/overlay-mounts-closed.js

@@ -0,0 +1,102 @@
+/*
+ * An overlay is mounted closed and then opened, so its entry runs.
+ *
+ * A dialog, drawer, sheet or menu fades in from its starting style when its
+ * `open` turns true on a mounted element. One that first mounts already open
+ * has no earlier frame to transition from, so it appears at full opacity, and
+ * one that unmounts on dismissal never plays its exit. Three spellings mount an
+ * overlay open: an `open` fixed to true (its parent mounts it on demand), a
+ * truthy `defaultOpen`, and a `key` that changes per opening, which remounts it
+ * in the same render that opens it. A list key inside a `.map` callback and a
+ * literal key are an element's identity, not an opening.
+ *
+ * Standard tool checked first: `no-restricted-syntax` can match the attribute,
+ * but not the renamed import or the enclosing `.map` a list key sits in, so the
+ * shared component-name reader resolves it here.
+ */
+import { jsxComponentName } from "./jsx-class-utility.js";
+
+const OVERLAY = /Dialog|Drawer|Sheet|Popover|Menu|Tooltip|HoverCard|Combobox/;
+const PART =
+  /(Content|Trigger|Title|Description|Header|Footer|Body|Item|Group|Label|Separator|Close|Portal|Overlay|Backdrop)$/;
+const LIST_CALLBACK = new Set(["map", "flatMap"]);
+
+function attribute(node, name) {
+  return node.attributes.find(
+    (entry) =>
+      entry.type === "JSXAttribute" &&
+      entry.name.type === "JSXIdentifier" &&
+      entry.name.name === name,
+  );
+}
+
+function isTrue(entry) {
+  if (!entry) return false;
+  if (entry.value === null) return true;
+  return (
+    entry.value.type === "JSXExpressionContainer" &&
+    entry.value.expression.type === "Literal" &&
+    entry.value.expression.value === true
+  );
+}
+
+function isLiteralKey(entry) {
+  if (entry.value?.type === "Literal") return true;
+  const expression =
+    entry.value?.type === "JSXExpressionContainer" ? entry.value.expression : undefined;
+  return (
+    expression?.type === "Literal" ||
+    (expression?.type === "TemplateLiteral" && expression.expressions.length === 0)
+  );
+}
+
+function insideListCallback(node, context) {
+  return context.sourceCode
+    .getAncestors(node)
+    .some(
+      (ancestor) =>
+        (ancestor.type === "ArrowFunctionExpression" || ancestor.type === "FunctionExpression") &&
+        ancestor.parent?.type === "CallExpression" &&
+        ancestor.parent.arguments.includes(ancestor) &&
+        ancestor.parent.callee.type === "MemberExpression" &&
+        LIST_CALLBACK.has(ancestor.parent.callee.property.name),
+    );
+}
+
+export const overlayMountsClosed = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow an overlay that mounts already open, so its entry and exit transitions run",
+    },
+    schema: [],
+    messages: {
+      openFixed:
+        "<{{name}}> is given `open` fixed to true, so it only exists while open and neither its fade in nor its fade out runs. Keep it mounted and drive `open` from state.",
+      defaultOpen:
+        "<{{name}}> mounts open through `defaultOpen`, so its entry never runs. Mount it closed and open it from state.",
+      keyPerOpening:
+        "<{{name}}> takes a `key` that remounts it, so an opening that changes the key mounts it already open and its fade in never runs. Keep one mounted overlay and reset its content another way, such as a key on the content inside it.",
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const name = jsxComponentName(node, context);
+        if (!name || !OVERLAY.test(name) || PART.test(name)) return;
+
+        if (isTrue(attribute(node, "open"))) {
+          context.report({ node, messageId: "openFixed", data: { name } });
+        }
+        if (isTrue(attribute(node, "defaultOpen"))) {
+          context.report({ node, messageId: "defaultOpen", data: { name } });
+        }
+        const key = attribute(node, "key");
+        if (key && !isLiteralKey(key) && !insideListCallback(node, context)) {
+          context.report({ node, messageId: "keyPerOpening", data: { name } });
+        }
+      },
+    };
+  },
+};

package/dist/internal/assistant-ui/tool-fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-fallback.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-fallback.tsx"],"names":[],"mappings":"AAUA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,WAAW,EAA0C,MAAM,0BAA0B,CAAC;AAQ/F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GAAG;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAydF,QAAA,MAAM,YAAY,EAAwC,4BAA4B,CAAC;AAIvF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"tool-fallback.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-fallback.tsx"],"names":[],"mappings":"AAUA,OAAO,EAOL,KAAK,4BAA4B,EAClC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,WAAW,EAA0C,MAAM,0BAA0B,CAAC;AAO/F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GAAG;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAydF,QAAA,MAAM,YAAY,EAAwC,4BAA4B,CAAC;AAIvF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/internal/assistant-ui/tool-fallback.js

@@ -5,13 +5,13 @@ import { AlertCircleIcon, CheckIcon, ChevronDownIcon, CircleDotIcon, XCircleIcon
 import { useScrollLock, useToolCallElapsed, } from "@assistant-ui/react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
 import { cn } from "../../lib/utils.js";
+import { disclosureDuration, disclosureDurationMs } from "../../lib/motion.js";
 import { Button } from "../../components/button.js";
-const ANIMATION_DURATION = 200;
 const pressable = "active:scale-[0.98]";
 function ToolFallbackRoot({ className, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children, ...props }) {
     const collapsibleRef = useRef(null);
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-    const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+    const lockScroll = useScrollLock(collapsibleRef, disclosureDurationMs);
     const isControlled = controlledOpen !== undefined;
     const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
     const handleOpenChange = useCallback((open) => {
@@ -22,7 +22,7 @@ function ToolFallbackRoot({ className, open: controlledOpen, onOpenChange: contr
         controlledOnOpenChange?.(open);
     }, [lockScroll, isControlled, controlledOnOpenChange]);
     return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "tool-fallback-root", open: isOpen, onOpenChange: handleOpenChange, className: cn("aui-tool-fallback-root group/tool-fallback-root w-full", className), style: {
-            "--animation-duration": `${ANIMATION_DURATION}ms`,
+            "--animation-duration": disclosureDuration,
         }, ...props, children: children }));
 }
 const statusIconMap = {

package/dist/internal/assistant-ui/tool-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-group.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-group.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK/F,QAAA,MAAM,iBAAiB;;8EASrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAqCpB;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAwCA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAyBjD;AAED,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"tool-group.d.ts","sourceRoot":"","sources":["../../../src/internal/assistant-ui/tool-group.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI/F,QAAA,MAAM,iBAAiB;;8EASrB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,MAAM,GAAG,cAAc,CACxB,GACC,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,WAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAqCpB;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,MAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAwCA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,+BAyBjD;AAED,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/internal/assistant-ui/tool-group.js

@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
 import { useScrollLock } from "@assistant-ui/react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/collapsible.js";
 import { cn } from "../../lib/utils.js";
-const ANIMATION_DURATION = 200;
+import { disclosureDuration, disclosureDurationMs } from "../../lib/motion.js";
 const toolGroupVariants = cva("aui-tool-group-root group/tool-group w-full", {
     variants: {
         variant: {
@@ -20,7 +20,7 @@ const toolGroupVariants = cva("aui-tool-group-root group/tool-group w-full", {
 function ToolGroupRoot({ className, variant, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children, ...props }) {
     const collapsibleRef = useRef(null);
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-    const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
+    const lockScroll = useScrollLock(collapsibleRef, disclosureDurationMs);
     const isControlled = controlledOpen !== undefined;
     const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
     const handleOpenChange = useCallback((open) => {
@@ -31,7 +31,7 @@ function ToolGroupRoot({ className, variant, open: controlledOpen, onOpenChange:
         controlledOnOpenChange?.(open);
     }, [lockScroll, isControlled, controlledOnOpenChange]);
     return (_jsx(Collapsible, { ref: collapsibleRef, "data-slot": "tool-group-root", "data-variant": variant ?? "outline", open: isOpen, onOpenChange: handleOpenChange, className: cn(toolGroupVariants({ variant }), "group/tool-group-root", className), style: {
-            "--animation-duration": `${ANIMATION_DURATION}ms`,
+            "--animation-duration": disclosureDuration,
         }, ...props, children: children }));
 }
 function ToolGroupTrigger({ count, active = false, className, ...props }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.27",
+  "version": "12.1.28",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -76,7 +76,7 @@
     "@assistant-ui/react": "0.15.21",
     "@assistant-ui/react-markdown": "0.14.16",
     "@base-ui/react": "^1.8.0",
-    "@nadicodeai/design-system": "12.1.27",
+    "@nadicodeai/design-system": "12.1.28",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",