@l3mpire/ui 3.5.0 → 3.6.0

package/USAGE.md

@@ -156,13 +156,15 @@ icon-spin classes are the load-bearing ones; the rest are decorative.
 
 | Class | Usage |
 |---|---|
-| `bg-ai-gradient` | Brand AI gradient (blue → violet → indigo, 125deg) |
+| `bg-ai-gradient` | Decorative brand AI gradient (blue → violet → indigo, 125deg) |
+| `bg-ai-subtle` / `-hover` / `-pressed` | Translucent AI wash (ghost AI surfaces) |
+| `bg-ai-strong` / `-hover` / `-pressed` | Vivid AI gradient (solid AI fill) |
+| `ai-grad-text` | Gradient-clipped text/icons (outlined/ghost AI); follows `[data-ai-text]` host hover/pressed |
 | `ai-shimmer-text` | Text with a tertiary → info → tertiary sweep (2.1s) |
 | `ai-icon-spin` | Wrapper that rotates its child icon (see FA Kit caveat below) |
 | `ai-skeleton` | Surface skeleton with a horizontal sheen sweep |
 | `ai-cell-reveal` | One-shot blur(3px) → clear, 320ms fade-in for cells |
 | `ai-pulse` | Breathing scale + opacity for dot indicators |
-| `ai-gradient-text` | Flat info-blue accent for AI labels |
 | `ai-orb` | Decorative gradient disc with a soft glow |
 | `ai-halo` | Conic-gradient halo that rotates around an orb |
 | `ai-ring` | Pulsing concentric ring |
@@ -236,12 +238,19 @@ import { faPaperPlaneOutline } from "@l3mpire/icons";
 <Button appearance="solid" intent="brand" size="md" badge={99}>
   Notifications
 </Button>
+
+{/* AI intent — brand→violet gradient. Solid = vivid fill + white label;
+    outlined/ghost = gradient-clipped label & icons. No disabled-specific
+    art (falls back to the appearance's disabled style). */}
+<Button appearance="solid" intent="ai" leftIcon={faStarsOutline}>Ask AI</Button>
+<Button appearance="outlined" intent="ai" leftIcon={faStarsOutline}>Ask AI</Button>
+<Button appearance="ghost" intent="ai" leftIcon={faStarsOutline}>Ask AI</Button>
 ```
 
 | Prop | Values |
 |---|---|
 | `appearance` | `"solid"`, `"outlined"`, `"ghost"` |
-| `intent` | `"brand"`, `"alert"` |
+| `intent` | `"brand"`, `"alert"`, `"ai"` |
 | `size` | `"sm"` (24px), `"md"` (32px, radius 10px), `"lg"` (40px, radius 12px) |
 | `leftIcon` | `IconDefinition` |
 | `rightIcon` | `IconDefinition` |

package/dist/index.d.mts

@@ -489,7 +489,7 @@ declare const BrowserTab: React.ForwardRefExoticComponent<BrowserTabProps & Reac
 
 declare const buttonVariants: (props?: ({
     appearance?: "solid" | "outlined" | "ghost" | null | undefined;
-    intent?: "alert" | "brand" | null | undefined;
+    intent?: "alert" | "brand" | "ai" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     iconOnly?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
@@ -652,7 +652,7 @@ interface InputLabelProps extends React.ComponentPropsWithoutRef<typeof LabelPri
 declare const InputLabel: React.ForwardRefExoticComponent<InputLabelProps & React.RefAttributes<HTMLLabelElement>>;
 
 declare const infoMessageVariants: (props?: ({
-    type?: "alert" | "success" | "warning" | "info" | "ai" | "empty" | null | undefined;
+    type?: "alert" | "success" | "warning" | "ai" | "info" | "empty" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InfoMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof infoMessageVariants> {
     title: React.ReactNode;

package/dist/index.d.ts

@@ -489,7 +489,7 @@ declare const BrowserTab: React.ForwardRefExoticComponent<BrowserTabProps & Reac
 
 declare const buttonVariants: (props?: ({
     appearance?: "solid" | "outlined" | "ghost" | null | undefined;
-    intent?: "alert" | "brand" | null | undefined;
+    intent?: "alert" | "brand" | "ai" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     iconOnly?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
@@ -652,7 +652,7 @@ interface InputLabelProps extends React.ComponentPropsWithoutRef<typeof LabelPri
 declare const InputLabel: React.ForwardRefExoticComponent<InputLabelProps & React.RefAttributes<HTMLLabelElement>>;
 
 declare const infoMessageVariants: (props?: ({
-    type?: "alert" | "success" | "warning" | "info" | "ai" | "empty" | null | undefined;
+    type?: "alert" | "success" | "warning" | "ai" | "info" | "empty" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InfoMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof infoMessageVariants> {
     title: React.ReactNode;

package/dist/index.js

@@ -700,7 +700,8 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
       },
       intent: {
         brand: [],
-        alert: []
+        alert: [],
+        ai: []
       },
       size: {
         sm: [
@@ -822,6 +823,48 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
           "active:text-btn-ghost-alert-text-pressed"
         ]
       },
+      // ── Solid + AI ─────────────────────────────────────────────────────
+      // Vivid brand→violet gradient fill, white label/icons, violet outer
+      // border + a translucent-white inner border (via inset shadow).
+      {
+        appearance: "solid",
+        intent: "ai",
+        class: [
+          "bg-ai-strong",
+          "text-[var(--core-text-main-invert-primary)]",
+          "border-[var(--violet-500)]",
+          "shadow-[inset_0_0_0_1px_rgb(255_255_255/0.6),0_1px_3px_0_var(--shadow-4)]",
+          "hover:bg-ai-strong-hover",
+          "active:bg-ai-strong-pressed"
+        ]
+      },
+      // ── Outlined + AI ──────────────────────────────────────────────────
+      // Neutral surface (same as outlined brand), brand-blue border that
+      // deepens per state; label/icons are gradient-clipped (see component).
+      {
+        appearance: "outlined",
+        intent: "ai",
+        class: [
+          "bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default",
+          "border-[var(--interactive-bg-primary-dark-default)]",
+          "shadow-[0_1px_3px_0_var(--shadow-4)]",
+          "hover:from-btn-outlined-neutral-bg-hover hover:from-[0%] hover:to-btn-outlined-neutral-bg-gradient-to-hover",
+          "hover:border-[var(--interactive-bg-primary-dark-hover)]",
+          "active:from-btn-outlined-neutral-bg-pressed active:to-btn-outlined-neutral-bg-gradient-to-pressed",
+          "active:border-[var(--interactive-bg-primary-dark-pressed)]"
+        ]
+      },
+      // ── Ghost + AI ─────────────────────────────────────────────────────
+      // Subtle translucent gradient wash, no border; gradient-clipped text.
+      {
+        appearance: "ghost",
+        intent: "ai",
+        class: [
+          "bg-ai-subtle border-transparent",
+          "hover:bg-ai-subtle-hover",
+          "active:bg-ai-subtle-pressed"
+        ]
+      },
       // ── Icon-only size overrides ───────────────────────────────────────
       { size: "sm", iconOnly: true, class: "w-6 min-w-0 px-0" },
       { size: "md", iconOnly: true, class: "w-8 min-w-0 px-0" },
@@ -884,6 +927,8 @@ var Button = React6.forwardRef(
     const isDisabled = disabled || loading;
     const isIconOnly = iconOnlyProp ?? !children;
     const iconSize = iconSizeMap[resolvedSize];
+    const aiGradientText = intent === "ai" && appearance !== "solid" && !isDisabled;
+    const aiTextClass = aiGradientText ? "ai-grad-text" : void 0;
     const variantClasses = buttonVariants({
       appearance,
       intent,
@@ -893,7 +938,7 @@ var Button = React6.forwardRef(
       className
     });
     const labelNode = !isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: textWrapperClass(resolvedSize), children: [
-      children,
+      aiGradientText ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: aiTextClass, children }) : children,
       badge != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonBadge, { size: resolvedSize, intent, children: badge })
     ] }) : null;
     if (asChild) {
@@ -906,11 +951,12 @@ var Button = React6.forwardRef(
         className: cn(variantClasses),
         disabled: isDisabled,
         "aria-busy": loading || void 0,
+        "data-ai-text": aiGradientText || void 0,
         ...props,
         children: [
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: import_icons5.faSpinnerSolid, size: iconSize, className: "animate-spin" }) : leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: leftIcon, size: iconSize }) : null,
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: import_icons5.faSpinnerSolid, size: iconSize, className: "animate-spin" }) : leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: leftIcon, size: iconSize, className: aiTextClass }) : null,
           labelNode,
-          rightIcon && !loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: rightIcon, size: iconSize })
+          rightIcon && !loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons5.Icon, { icon: rightIcon, size: iconSize, className: aiTextClass })
         ]
       }
     );
@@ -7268,6 +7314,18 @@ function ColumnFilterPopover({
     ) })
   ] });
 }
+function pinnedStickyStyle(pinned, offset, zIndex) {
+  if (pinned === "left") return { position: "sticky", left: offset, zIndex };
+  if (pinned === "right") return { position: "sticky", right: offset, zIndex };
+  return {};
+}
+function pinnedDividerClass(pinned) {
+  if (pinned === "left")
+    return "shadow-[1px_0_0_0_var(--core-border-main-primary)]";
+  if (pinned === "right")
+    return "shadow-[-1px_0_0_0_var(--core-border-main-primary)]";
+  return "";
+}
 function DraggableHeaderCell({
   header,
   enableSorting,
@@ -7295,6 +7353,7 @@ function DraggableHeaderCell({
     disabled: !canDrag
   });
   const pinned = header.column.getIsPinned();
+  const pinOffset = pinned === "left" ? header.column.getStart("left") : pinned === "right" ? header.column.getAfter("right") : void 0;
   const style = {
     width: enableColumnResizing ? header.getSize() : void 0,
     minWidth: enableColumnResizing ? header.column.columnDef.minSize : void 0,
@@ -7305,18 +7364,7 @@ function DraggableHeaderCell({
     // Pinning sticky positioning — must override the default `relative` we
     // also use for the resize handle. The resize handle is still absolutely
     // positioned because it references `right: 0` relative to the cell.
-    ...pinned === "left" ? {
-      position: "sticky",
-      left: header.column.getStart("left"),
-      zIndex: isDragging ? 5 : 3
-    } : pinned === "right" ? {
-      position: "sticky",
-      right: header.column.getAfter("right"),
-      zIndex: isDragging ? 5 : 3
-    } : {
-      position: "relative",
-      zIndex: isDragging ? 1 : void 0
-    }
+    ...pinned ? pinnedStickyStyle(pinned, pinOffset, isDragging ? 5 : 3) : { position: "relative", zIndex: isDragging ? 1 : void 0 }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     TableHead,
@@ -7330,8 +7378,7 @@ function DraggableHeaderCell({
         // Pinned columns keep their bg so the scrolling content can pass
         // under them. The default `bg-table-head-bg-default` is already on
         // <th> so we only need to add a divider on the boundary.
-        pinned === "left" && "shadow-[1px_0_0_0_var(--core-border-main-primary)]",
-        pinned === "right" && "shadow-[-1px_0_0_0_var(--core-border-main-primary)]"
+        pinnedDividerClass(pinned)
       ),
       onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
       onMouseEnter: () => setIsHovered(true),
@@ -7560,15 +7607,22 @@ function DataTableInner({
     }).filter(Boolean),
     [columns]
   );
+  const lastSyncedColumnIdsRef = React54.useRef(null);
   React54.useEffect(() => {
     if (!enableColumnDrag) return;
+    const signature = allColumnIds.join(" ");
+    if (signature === lastSyncedColumnIdsRef.current) return;
+    lastSyncedColumnIdsRef.current = signature;
     if (columnOrder.length === 0) {
       setColumnOrder(allColumnIds);
       return;
     }
-    const missing = allColumnIds.filter((id) => !columnOrder.includes(id));
-    if (missing.length > 0) {
-      setColumnOrder([...columnOrder, ...missing]);
+    const pruned = columnOrder.filter((id) => allColumnIds.includes(id));
+    const missing = allColumnIds.filter((id) => !pruned.includes(id));
+    const next = [...pruned, ...missing];
+    const changed = next.length !== columnOrder.length || next.some((id, i) => id !== columnOrder[i]);
+    if (changed) {
+      setColumnOrder(next);
     }
   }, [enableColumnDrag, columnOrder, allColumnIds, setColumnOrder]);
   const table = (0, import_react_table.useReactTable)({
@@ -7685,6 +7739,16 @@ function DataTableInner({
     return vars;
   }, [enableColumnResizing, table.getState().columnSizing]);
   const totalSize = enableColumnResizing ? table.getTotalSize() : void 0;
+  const pinnedOffsets = React54.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const col of table.getVisibleLeafColumns()) {
+      const p = col.getIsPinned();
+      if (p === "left") map.set(col.id, { side: "left", offset: col.getStart("left") });
+      else if (p === "right")
+        map.set(col.id, { side: "right", offset: col.getAfter("right") });
+    }
+    return map;
+  }, [table, table.getState().columnPinning, table.getState().columnSizing]);
   const tableContent = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cn("w-full", className), style: columnSizeVars, children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       Table,
@@ -7760,17 +7824,10 @@ function DataTableInner({
               "data-state": row.getIsSelected() ? "selected" : void 0,
               children: row.getVisibleCells().map((cell) => {
                 const cellPinned = cell.column.getIsPinned();
+                const pin = cellPinned ? pinnedOffsets.get(cell.column.id) : void 0;
                 const cellStyle = {
                   ...enableColumnResizing ? { width: `var(--col-${cell.column.id}-size)` } : {},
-                  ...cellPinned === "left" ? {
-                    position: "sticky",
-                    left: cell.column.getStart("left"),
-                    zIndex: 2
-                  } : cellPinned === "right" ? {
-                    position: "sticky",
-                    right: cell.column.getAfter("right"),
-                    zIndex: 2
-                  } : {}
+                  ...pinnedStickyStyle(cellPinned, pin?.offset, 2)
                 };
                 return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                   TableCell,
@@ -7781,8 +7838,8 @@ function DataTableInner({
                       enableColumnResizing && "truncate",
                       // Pinned cells need an opaque background so scrolled
                       // content does not show through.
-                      cellPinned === "left" && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected shadow-[1px_0_0_0_var(--core-border-main-primary)]",
-                      cellPinned === "right" && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected shadow-[-1px_0_0_0_var(--core-border-main-primary)]"
+                      cellPinned && "bg-table-row-bg-default group-hover/row:bg-table-row-bg-hover data-[state=selected]:bg-table-row-bg-selected",
+                      pinnedDividerClass(cellPinned)
                     ),
                     children: (0, import_react_table.flexRender)(
                       cell.column.columnDef.cell,