@firecms/core 3.0.1 → 3.1.0-canary.1df3b2c

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.1",
+  "version": "3.1.0-canary.1df3b2c",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,15 +53,16 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.1",
-    "@firecms/formex": "^3.0.1",
-    "@firecms/ui": "^3.0.1",
+    "@firecms/editor": "^3.1.0-canary.1df3b2c",
+    "@firecms/formex": "^3.1.0-canary.1df3b2c",
+    "@firecms/ui": "^3.1.0-canary.1df3b2c",
     "@radix-ui/react-portal": "^1.1.10",
     "clsx": "^2.1.1",
     "compressorjs": "^1.2.1",
     "date-fns": "^3.6.0",
     "fuse.js": "^7.1.0",
     "history": "^5.3.0",
+    "json-logic-js": "^2.0.5",
     "markdown-it": "^14.1.0",
     "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
@@ -72,7 +73,7 @@
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
     "vite-plugin-static-copy": "3.1.4",
-    "yup": "^0.32.11"
+    "yup": "^1.7.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -85,6 +86,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
+    "@types/json-logic-js": "^2.0.8",
     "@types/node": "^20.19.17",
     "@types/object-hash": "^3.0.6",
     "@types/react": "^18.3.24",
@@ -109,7 +111,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "72d951d01d15ef5a7efcde6c63839f65964d2f7a",
+  "gitHead": "5074584b15be0d0507a4dadc148f03d82e9fe495",
   "publishConfig": {
     "access": "public"
   },
@@ -134,7 +136,8 @@
     ],
     "testEnvironment": "node",
     "moduleNameMapper": {
-      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
+      "^@firecms/editor$": "<rootDir>/test/__mocks__/editorMock.js"
     }
   }
 }

package/src/app/Scaffold.tsx

@@ -123,7 +123,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                     <main
                         className="flex flex-col flex-grow overflow-auto">
 
-                        {hasAppBar && <DrawerHeader/>}
+                        {hasAppBar && <DrawerHeader />}
 
                         <div
                             className={cls(defaultBorderMixin, "flex-grow overflow-auto m-0 ", {
@@ -174,9 +174,9 @@ function DrawerWrapper(props: {
 
         {!props.open && props.displayed && (
             <Tooltip title="Open menu"
-                     side="right"
-                     sideOffset={12}
-                     asChild={true}>
+                side="right"
+                sideOffset={12}
+                asChild={true}>
                 <div
                     className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
                     <IconButton
@@ -185,21 +185,20 @@ function DrawerWrapper(props: {
                         onClick={() => props.setDrawerOpen(true)}
                         size="large"
                     >
-                        <MenuIcon/>
+                        <MenuIcon size="small" />
                     </IconButton>
                 </div>
             </Tooltip>
         )}
 
         <div
-            className={`z-20 absolute right-0 top-4 ${
-                props.open ? "opacity-100" : "opacity-0 invisible"
-            } transition-opacity duration-200 ease-in-out`}>
+            className={`z-20 absolute right-0 top-4 ${props.open ? "opacity-100" : "opacity-0 invisible"
+                } transition-opacity duration-200 ease-in-out`}>
             <IconButton
                 aria-label="Close drawer"
                 onClick={() => props.setDrawerOpen(false)}
             >
-                <ChevronLeftIcon/>
+                <ChevronLeftIcon />
             </IconButton>
         </div>
 
@@ -221,14 +220,14 @@ function DrawerWrapper(props: {
                 size="large"
                 className="absolute sm:top-2 sm:left-4 top-1 left-2"
             >
-                <MenuIcon/>
+                <MenuIcon />
             </IconButton>
             <Sheet side={"left"}
-                   transparent={true}
-                   open={props.open}
-                   onOpenChange={props.setDrawerOpen}
-                   title={"Navigation drawer"}
-                   overlayClassName={"bg-white bg-opacity-80"}
+                transparent={true}
+                open={props.open}
+                onOpenChange={props.setDrawerOpen}
+                title={"Navigation drawer"}
+                overlayClassName={"bg-white bg-opacity-80 bg-white/80"}
             >
                 {innerDrawer}
             </Sheet>

package/src/components/AIIcon.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { AutoAwesomeIcon } from "@firecms/ui";
+
+export interface AIIconProps {
+    size?: "smallest" | "small" | "medium" | "large";
+    className?: string;
+}
+
+/**
+ * AI-styled AutoAwesome icon with gradient coloring.
+ * Used consistently across AI features for visual identification.
+ */
+export function AIIcon({ size = "small", className }: AIIconProps) {
+    return (
+        <AutoAwesomeIcon
+            size={size}
+            className={className}
+            style={{
+                background: "linear-gradient(to right, var(--color-primary), var(--color-secondary))",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+                backgroundClip: "text"
+            }}
+        />
+    );
+}
+
+/**
+ * Small animated dot indicator for AI-modified elements.
+ * Shows a pulsing gradient dot.
+ */
+export function AIModifiedIndicator({ className }: { className?: string }) {
+    return (
+        <div
+            className={`w-2 h-2 rounded-full bg-gradient-to-r from-primary to-secondary animate-pulse ${className ?? ""}`}
+            title="AI modified"
+        />
+    );
+}

package/src/components/ArrayContainer.tsx

@@ -186,7 +186,7 @@ export function ArrayContainerItem({
         <div
             ref={nodeRef}
             style={style}
-            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`}
+            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20 dark\\:hover\\:bg-surface-800/20" : ""} rounded-md opacity-100`}
         >
             <div className="flex items-start">
                 <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
@@ -484,11 +484,9 @@ export function ArrayContainer<T>({
                             <Button
                                 variant={"text"}
                                 size={size === "small" ? "small" : "medium"}
-                                color="primary"
                                 disabled={disabled || (value?.length ?? 0) >= max}
                                 startIcon={<AddIcon/>}
                                 onClick={insertInEnd}
-                                className={"ml-3.5"}
                             >
                                 {addLabel ?? "Add"}
                             </Button>
@@ -527,7 +525,6 @@ export function ArrayContainer<T>({
                     <Button
                         variant={"text"}
                         size={size === "small" ? "small" : "medium"}
-                        color="primary"
                         disabled={disabled || (value?.length ?? 0) >= max}
                         startIcon={<AddIcon/>}
                         onClick={insertInEnd}

package/src/components/ClearFilterSortButton.tsx

@@ -1,10 +1,10 @@
-import { Button, FilterListOffIcon } from "@firecms/ui";
+import { FilterListOffIcon, Button, Tooltip } from "@firecms/ui";
 import { EntityTableController } from "../types";
 
 export function ClearFilterSortButton({
-                                          tableController,
-                                          enabled
-                                      }: {
+    tableController,
+    enabled
+}: {
     enabled: boolean;
     tableController: EntityTableController
 }) {
@@ -24,18 +24,21 @@ export function ClearFilterSortButton({
         } else {
             label = "Clear sort";
         }
-        return <Button
-            variant={"outlined"}
-            className="h-fit-content"
-            aria-label="filter clear"
-            onClick={() => {
-                tableController.clearFilter?.();
-                tableController.setSortBy?.(undefined);
-            }}
-            size={"small"}>
-            <FilterListOffIcon/>
-            {label}
-        </Button>
+        return (
+            <Tooltip title={label}>
+                <Button
+                    size={"small"}
+                    variant={"text"}
+                    aria-label={label}
+                    onClick={() => {
+                        tableController.clearFilter?.();
+                        tableController.setSortBy?.(undefined);
+                    }}
+                >
+                    <FilterListOffIcon size="small" />
+                </Button>
+            </Tooltip>
+        );
     }
     return null;
 }

package/src/components/ConfirmationDialog.tsx

@@ -29,13 +29,11 @@ export function ConfirmationDialog({
 
             <DialogActions>
                 <Button
-                    color={"primary"}
                     variant={"text"}
                     onClick={onCancel}
                     autoFocus>Cancel</Button>
 
                 <LoadingButton
-                    color="primary"
                     type="submit"
                     loading={loading}
                     onClick={onAccept}

package/src/components/DeleteEntityDialog.tsx

@@ -187,16 +187,14 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
 
                 <Button onClick={handleCancel}
                         disabled={loading}
-                        variant="text"
-                        color="primary">
+                        variant="text">
                     Cancel
                 </Button>
                 <Button
                     autoFocus
                     disabled={loading}
                     onClick={handleOk}
-                    variant="filled"
-                    color="primary">
+                    variant="filled">
                     Ok
                 </Button>
             </DialogActions>

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -20,41 +20,52 @@ import { getLocalChangesBackup } from "../../util";
  * @group Collection components
  */
 export const EntityCollectionRowActions = function EntityCollectionRowActions({
-                                                                                  entity,
-                                                                                  collection,
-                                                                                  fullPath,
-                                                                                  fullIdPath,
-                                                                                  width,
-                                                                                  frozen,
-                                                                                  isSelected,
-                                                                                  selectionEnabled,
-                                                                                  size,
-                                                                                  highlightEntity,
-                                                                                  onCollectionChange,
-                                                                                  unhighlightEntity,
-                                                                                  actions = [],
-                                                                                  hideId,
-                                                                                  selectionController,
-                                                                                  openEntityMode
-                                                                              }:
-                                                                              {
-                                                                                  entity: Entity<any>,
-                                                                                  collection?: EntityCollection<any>,
-                                                                                  fullPath?: string,
-                                                                                  fullIdPath?: string,
-                                                                                  width: number,
-                                                                                  frozen?: boolean,
-                                                                                  size: CollectionSize,
-                                                                                  isSelected?: boolean,
-                                                                                  selectionEnabled?: boolean,
-                                                                                  actions?: EntityAction[],
-                                                                                  hideId?: boolean,
-                                                                                  onCollectionChange?: () => void,
-                                                                                  selectionController?: SelectionController;
-                                                                                  highlightEntity?: (entity: Entity<any>) => void;
-                                                                                  unhighlightEntity?: (entity: Entity<any>) => void;
-                                                                                  openEntityMode: "side_panel" | "full_screen";
-                                                                              }) {
+    entity,
+    collection,
+    fullPath,
+    fullIdPath,
+    width,
+    frozen,
+    isSelected,
+    selectionEnabled,
+    size,
+    highlightEntity,
+    onCollectionChange,
+    unhighlightEntity,
+    actions = [],
+    hideId,
+    selectionController,
+    openEntityMode,
+    sortableNodeRef,
+    sortableStyle,
+    sortableAttributes,
+    isDragging,
+    isDraggable
+}:
+    {
+        entity: Entity<any>,
+        collection?: EntityCollection<any>,
+        fullPath?: string,
+        fullIdPath?: string,
+        width: number,
+        frozen?: boolean,
+        size: CollectionSize,
+        isSelected?: boolean,
+        selectionEnabled?: boolean,
+        actions?: EntityAction[],
+        hideId?: boolean,
+        onCollectionChange?: () => void,
+        selectionController?: SelectionController;
+        highlightEntity?: (entity: Entity<any>) => void;
+        unhighlightEntity?: (entity: Entity<any>) => void;
+        openEntityMode: "side_panel" | "full_screen";
+        // Sortable props for dnd-kit integration
+        sortableNodeRef?: (node: HTMLElement | null) => void;
+        sortableStyle?: React.CSSProperties;
+        sortableAttributes?: Record<string, any>;
+        isDragging?: boolean;
+        isDraggable?: boolean;
+    }) {
 
     const largeLayout = useLargeLayout();
 
@@ -72,10 +83,11 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
     const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
     const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
-    return (
+
+    const content = (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: any) => {
@@ -124,8 +136,8 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                         }
                         return (
                             <Tooltip key={index}
-                                     title={tooltip}
-                                     asChild={true}>
+                                title={tooltip}
+                                asChild={true}>
                                 {iconButton}
                             </Tooltip>
                         );
@@ -135,7 +147,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                         <Menu
                             trigger={<IconButton
                                 size={iconSize}>
-                                <MoreVertIcon/>
+                                <MoreVertIcon />
                             </IconButton>}>
                             {collapsedActions.map((action, index) => (
                                 <MenuItem
@@ -183,7 +195,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                     <span className="min-w-0 truncate text-center">
                         {entity
                             ? entity.id
-                            : <Skeleton/>
+                            : <Skeleton />
                         }
                     </span>
                 </div>
@@ -192,4 +204,25 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
         </div>
     );
 
+    // Wrap with sortable outer div when sortable props are provided
+    // Remove tabIndex from attributes to avoid capturing focus before cell content
+    if (sortableNodeRef) {
+        const { tabIndex: _tabIndex, ...sortableAttrsWithoutTabIndex } = sortableAttributes ?? {};
+        return (
+            <div
+                ref={sortableNodeRef}
+                style={sortableStyle}
+                className={cls(
+                    "flex-shrink-0",
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-950"
+                )}
+                {...sortableAttrsWithoutTabIndex}
+            >
+                {content}
+            </div>
+        );
+    }
+
+    return content;
+
 };