@actioneer/ads 0.7.0 → 0.8.0

package/components/drawer.d.ts

@@ -4,12 +4,9 @@ declare const panelVariants: (props?: ({
     side?: "bottom" | "left" | "right" | null | undefined;
     size?: "xl" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type DrawerAppearance = "flat" | "floating";
 export interface DrawerProps extends VariantProps<typeof panelVariants> {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    /** Flat joins a canvas layout; floating adds an NG3 stroke and shadow 400. */
-    appearance?: DrawerAppearance;
     /** Whether Escape and the built-in close button can dismiss the drawer. */
     dismissible?: boolean;
     /** Accessible label for the drawer landmark. */
@@ -60,18 +57,9 @@ export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size,
  *
  * This mirrors the shell's main + chat layout — white panels on the canvas.
  * If the panel doesn't read, fix the ground; never add a border or shadow to
- * force it (that fights principle 1). Use `FloatingDrawer` when the surface is
- * intentionally inset and should read as an elevated utility panel.
+ * force it (that fights principle 1).
  */
-export declare function Drawer({ open, onOpenChange, appearance, dismissible, side: sideProp, size, containerClassName, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
-export type FloatingDrawerProps = Omit<DrawerProps, "appearance">;
-/**
- * FloatingDrawer — an inset utility drawer with a card surface, NG3 stroke,
- * and shadow 400. It keeps the Drawer interaction and motion model while
- * providing the elevated treatment used for chat history, section trees, and
- * property inspectors.
- */
-export declare function FloatingDrawer(props: FloatingDrawerProps): React.JSX.Element;
+export declare function Drawer({ open, onOpenChange, dismissible, side: sideProp, size, containerClassName, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
 /** @deprecated Alias for `Drawer` — the canonical drawer is now the inline
  *  variant. Kept for any code still importing `InlineDrawer`. */
 export declare const InlineDrawer: typeof Drawer;

package/components/drawer.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as i, jsxs as y } from "react/jsx-runtime";
-import * as s from "react";
-import { createPortal as R } from "react-dom";
-import { MotionConfig as z, AnimatePresence as D, motion as g } from "motion/react";
-import { Close as j } from "../lib/icons.js";
-import { cva as F } from "class-variance-authority";
+import * as a from "react";
+import { createPortal as E } from "react-dom";
+import { MotionConfig as z, AnimatePresence as N, motion as w } from "motion/react";
+import { Close as R } from "../lib/icons.js";
+import { cva as j } from "class-variance-authority";
 import { cn as n } from "../lib/cn.js";
-import { springSheet as l, drawerOffset as v, drawerBackdropVariants as A } from "../lib/motion.js";
-const N = F(
+import { springSheet as l, drawerOffset as h, drawerBackdropVariants as F } from "../lib/motion.js";
+const k = j(
   [
     "relative flex flex-col",
     "bg-elevated text-foreground",
@@ -43,25 +43,25 @@ const N = F(
     ],
     defaultVariants: { side: "right", size: "md" }
   }
-), B = {
+), A = {
   right: "justify-end items-stretch",
   left: "justify-start items-stretch",
   bottom: "justify-center items-end"
-}, L = {
+}, B = {
   sm: "25%",
   md: "33.333333%",
   lg: "50%",
   xl: "66.666667%"
 };
-function k({
-  onClick: e,
-  className: t
+function D({
+  onClick: t,
+  className: e
 }) {
   return /* @__PURE__ */ i(
     "button",
     {
       type: "button",
-      onClick: e,
+      onClick: t,
       "aria-label": "Close",
       className: n(
         "absolute inline-flex size-8 items-center justify-center",
@@ -70,75 +70,75 @@ function k({
         "active:scale-[0.97] motion-reduce:active:scale-100",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "[&_svg]:size-4 [&_svg]:shrink-0",
-        t
+        e
       ),
-      children: /* @__PURE__ */ i(j, { "aria-hidden": !0 })
+      children: /* @__PURE__ */ i(R, { "aria-hidden": !0 })
     }
   );
 }
 function G({
-  open: e,
-  onOpenChange: t,
-  side: o,
-  size: c,
-  className: x,
-  children: m,
-  "aria-label": p
+  open: t,
+  onOpenChange: e,
+  side: r,
+  size: v,
+  className: c,
+  children: x,
+  "aria-label": g
 }) {
-  const d = o ?? "right", f = s.useRef(null), u = s.useRef(null);
-  return s.useEffect(() => {
-    if (!e) return;
-    u.current = document.activeElement;
-    const a = document.body.style.overflow;
+  const d = r ?? "right", m = a.useRef(null), s = a.useRef(null);
+  return a.useEffect(() => {
+    if (!t) return;
+    s.current = document.activeElement;
+    const p = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const w = (r) => {
-      r.key === "Escape" && (r.stopPropagation(), t(!1));
+    const f = (o) => {
+      o.key === "Escape" && (o.stopPropagation(), e(!1));
     };
-    document.addEventListener("keydown", w);
-    const b = requestAnimationFrame(() => {
-      var r;
-      (r = f.current) == null || r.focus();
+    document.addEventListener("keydown", f);
+    const u = requestAnimationFrame(() => {
+      var o;
+      (o = m.current) == null || o.focus();
     });
     return () => {
-      var r, h;
-      document.removeEventListener("keydown", w), document.body.style.overflow = a, cancelAnimationFrame(b), (h = (r = u.current) == null ? void 0 : r.focus) == null || h.call(r);
+      var o, b;
+      document.removeEventListener("keydown", f), document.body.style.overflow = p, cancelAnimationFrame(u), (b = (o = s.current) == null ? void 0 : o.focus) == null || b.call(o);
     };
-  }, [e, t]), R(
-    /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(D, { children: e && /* @__PURE__ */ y("div", { className: n("fixed inset-0 z-50 flex", B[d]), children: [
+  }, [t, e]), E(
+    /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(N, { children: t && /* @__PURE__ */ y("div", { className: n("fixed inset-0 z-50 flex", A[d]), children: [
       /* @__PURE__ */ i(
-        g.div,
+        w.div,
         {
-          variants: A,
+          variants: F,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
           className: "absolute inset-0 bg-overlay",
-          onClick: () => t(!1),
+          onClick: () => e(!1),
           "aria-hidden": !0
         },
         "backdrop"
       ),
       /* @__PURE__ */ y(
-        g.div,
+        w.div,
         {
-          ref: f,
-          initial: v[d],
+          ref: m,
+          initial: h[d],
           animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
-          exit: { ...v[d], pointerEvents: "none", transition: l },
+          exit: { ...h[d], pointerEvents: "none", transition: l },
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": p,
+          "aria-label": g,
           tabIndex: -1,
-          className: n(N({ side: d, size: c }), "relative outline-none", x),
+          className: n(k({ side: d, size: v }), "relative outline-none", c),
           children: [
             /* @__PURE__ */ i(
-              k,
+              D,
               {
-                onClick: () => t(!1),
+                onClick: () => e(!1),
                 className: "right-4 top-4"
               }
             ),
-            m
+            x
           ]
         },
         "panel"
@@ -147,61 +147,59 @@ function G({
     document.body
   );
 }
-function E({
-  open: e,
-  onOpenChange: t,
-  appearance: o = "flat",
-  dismissible: c = !0,
-  side: x,
-  size: m,
-  containerClassName: p,
-  className: d,
-  children: f,
-  "aria-label": u
+function L({
+  open: t,
+  onOpenChange: e,
+  dismissible: r = !0,
+  side: v,
+  size: c,
+  containerClassName: x,
+  className: g,
+  children: d,
+  "aria-label": m
 }) {
-  const a = x ?? "right", w = m ?? "md", b = s.useRef(null);
-  return s.useEffect(() => {
-    if (!e || !c) return;
-    const r = (h) => {
-      h.key === "Escape" && t(!1);
+  const s = v ?? "right", p = c ?? "md", f = a.useRef(null);
+  return a.useEffect(() => {
+    if (!t || !r) return;
+    const u = (o) => {
+      o.key === "Escape" && e(!1);
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [e, t, c]), /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(D, { initial: !1, children: e && /* @__PURE__ */ i(
-    g.div,
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [t, e, r]), /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(N, { initial: !1, children: t && /* @__PURE__ */ i(
+    w.div,
     {
-      initial: a === "bottom" ? { height: "0%" } : { width: 0 },
-      animate: a === "bottom" ? { height: L[w], transition: l } : { width: "auto", transition: l },
-      exit: a === "bottom" ? { height: "0%", pointerEvents: "none", transition: l } : { width: 0, pointerEvents: "none", transition: l },
+      initial: s === "bottom" ? { height: "0%" } : { width: 0 },
+      animate: s === "bottom" ? { height: B[p], transition: l } : { width: "auto", transition: l },
+      exit: s === "bottom" ? { height: "0%", pointerEvents: "none", transition: l } : { width: 0, pointerEvents: "none", transition: l },
       className: n(
         "shrink-0 overflow-hidden",
-        a === "bottom" ? "w-full" : "h-full",
-        p
+        s === "bottom" ? "w-full" : "h-full",
+        x
       ),
       children: /* @__PURE__ */ y(
-        g.aside,
+        w.aside,
         {
-          ref: b,
-          initial: v[a],
+          ref: f,
+          initial: h[s],
           animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
-          exit: { ...v[a], pointerEvents: "none", transition: l },
+          exit: { ...h[s], pointerEvents: "none", transition: l },
           role: "complementary",
-          "aria-label": u,
+          "aria-label": m,
           className: n(
-            N({ side: a, size: m }),
-            "relative shrink-0 overflow-hidden rounded-lg bg-card outline-none",
-            o === "floating" ? "border border-ng3 shadow-400" : "border-0 shadow-none",
-            a === "bottom" && "h-full",
-            d
+            k({ side: s, size: c }),
+            "relative shrink-0 overflow-hidden rounded-lg border-0 bg-card shadow-none outline-none",
+            s === "bottom" && "h-full",
+            g
           ),
           children: [
-            c && /* @__PURE__ */ i(
-              k,
+            r && /* @__PURE__ */ i(
+              D,
               {
-                onClick: () => t(!1),
+                onClick: () => e(!1),
                 className: "right-2 top-1"
               }
             ),
-            f
+            d
           ]
         }
       )
@@ -209,56 +207,52 @@ function E({
     "inline-drawer-slot"
   ) }) });
 }
-function J(e) {
-  return /* @__PURE__ */ i(E, { ...e, appearance: "floating" });
-}
-const Q = E, M = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ i(
+const J = L, M = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
-    ref: o,
-    className: n("flex flex-col gap-1 px-6 py-4 pr-14", e),
-    ...t
+    ref: r,
+    className: n("flex flex-col gap-1 px-6 py-4 pr-14", t),
+    ...e
   }
 ));
 M.displayName = "DrawerHeader";
-const V = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ i(
+const V = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "h2",
   {
-    ref: o,
-    className: n("text-lg font-medium text-foreground", e),
-    ...t
+    ref: r,
+    className: n("text-lg font-medium text-foreground", t),
+    ...e
   }
 ));
 V.displayName = "DrawerTitle";
-const I = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ i(
+const I = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
-    ref: o,
+    ref: r,
     tabIndex: 0,
-    className: n("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", e),
-    ...t
+    className: n("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", t),
+    ...e
   }
 ));
 I.displayName = "DrawerBody";
-const P = s.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ i(
+const P = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
-    ref: o,
+    ref: r,
     className: n(
       "flex items-center justify-end gap-2 px-6 py-4",
-      e
+      t
     ),
-    ...t
+    ...e
   }
 ));
 P.displayName = "DrawerFooter";
 export {
-  E as Drawer,
+  L as Drawer,
   I as DrawerBody,
   P as DrawerFooter,
   M as DrawerHeader,
   V as DrawerTitle,
-  J as FloatingDrawer,
-  Q as InlineDrawer,
+  J as InlineDrawer,
   G as ModalDrawer
 };

package/components/field.js

@@ -7,8 +7,8 @@ const L = i(
   // Border WIDTH only — no border-color utility. ads-interactive owns the
   // color (rest = --glow-border-rest below); a `border-input` utility here
   // would out-cascade the shared hover/focus rules.
-  "flex w-full rounded-md border bg-elevated text-on-white-tertiary",
-  "px-3 text-m font-medium hover:text-on-white-secondary focus:text-on-white-primary",
+  "flex w-full rounded-md border bg-elevated text-on-white-secondary",
+  "px-3 text-m font-medium focus:text-on-white-primary",
   "placeholder:text-on-white-tertiary hover:placeholder:text-on-white-secondary focus:placeholder:text-transparent",
   "outline-none",
   // Text/placeholder color changes are intentionally immediate. Interpolating
@@ -41,7 +41,7 @@ const L = i(
   }
 ));
 w.displayName = "Label";
-const h = a.forwardRef(({ className: r, ...e }, o) => /* @__PURE__ */ l(
+const y = a.forwardRef(({ className: r, ...e }, o) => /* @__PURE__ */ l(
   "p",
   {
     ref: o,
@@ -49,8 +49,8 @@ const h = a.forwardRef(({ className: r, ...e }, o) => /* @__PURE__ */ l(
     ...e
   }
 ));
-h.displayName = "FieldDescription";
-const y = a.forwardRef(
+y.displayName = "FieldDescription";
+const h = a.forwardRef(
   ({ className: r, children: e, ...o }, t) => e ? /* @__PURE__ */ l(
     "p",
     {
@@ -61,7 +61,7 @@ const y = a.forwardRef(
     }
   ) : null
 );
-y.displayName = "FieldError";
+h.displayName = "FieldError";
 const D = a.forwardRef(
   ({ className: r, label: e, description: o, error: t, required: d, htmlFor: g, errorId: s, descriptionId: c, children: n, ...N }, F) => {
     const m = a.useId(), p = s ?? `${m}-error`, f = c ?? `${m}-description`, u = t ? p : o ? f : void 0, E = s == null && c == null;
@@ -76,15 +76,15 @@ const D = a.forwardRef(
     return /* @__PURE__ */ v("div", { ref: F, className: i("flex flex-col gap-1.5", r), ...N, children: [
       e && /* @__PURE__ */ l(w, { htmlFor: g, required: d, children: e }),
       x,
-      t ? /* @__PURE__ */ l(y, { id: p, children: t }) : o ? /* @__PURE__ */ l(h, { id: f, children: o }) : null
+      t ? /* @__PURE__ */ l(h, { id: p, children: t }) : o ? /* @__PURE__ */ l(y, { id: f, children: o }) : null
     ] });
   }
 );
 D.displayName = "Field";
 export {
   D as Field,
-  h as FieldDescription,
-  y as FieldError,
+  y as FieldDescription,
+  h as FieldError,
   w as Label,
   L as inputBaseClass
 };