From 7d854ad0488dea4eeaf07b07cc121e81b2eab8e8 Mon Sep 17 00:00:00 2001
From: Abhinav Dhiman <abhinav@imagekit.io>
Date: Tue, 14 Oct 2025 16:00:55 +0530
Subject: [PATCH 1/6] feat: add object detection focus options and
 coordinate-based positioning for image transformations

---
 examples/react-example/src/index.tsx          |   6 +
 .../src/ImageKitEditor.tsx                    |  10 +-
 .../sidebar/transformation-config-sidebar.tsx | 106 +++++---
 packages/imagekit-editor-dev/src/index.tsx    |   1 +
 .../imagekit-editor-dev/src/schema/index.ts   | 239 +++++++++++++++++-
 packages/imagekit-editor-dev/src/store.ts     |  11 +
 6 files changed, 330 insertions(+), 43 deletions(-)

diff --git a/examples/react-example/src/index.tsx b/examples/react-example/src/index.tsx
index c227ce9..2100c20 100644
--- a/examples/react-example/src/index.tsx
+++ b/examples/react-example/src/index.tsx
@@ -36,6 +36,12 @@ function App() {
             requireSignedUrl: false,
           },
         },
+        {
+          url: "https://ik.imagekit.io/v3sxk1svj/brown%20bear%20plush%20toy%20on%20whi....jpg?updatedAt=1760432666859",
+          metadata: {
+            requireSignedUrl: false,
+          },
+        },
         // ...Array.from({ length: 10000 }).map((_, i) => ({
         //   url: `https://ik.imagekit.io/v3sxk1svj/placeholder.jpg?updatedAt=${Date.now()}&v=${i}`,
         //   metadata: {
diff --git a/packages/imagekit-editor-dev/src/ImageKitEditor.tsx b/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
index bd9f3db..886a512 100644
--- a/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
+++ b/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
@@ -4,6 +4,7 @@ import merge from "lodash/merge"
 import React, { forwardRef, useImperativeHandle } from "react"
 import { EditorLayout, EditorWrapper } from "./components/editor"
 import type { HeaderProps } from "./components/header"
+import type { DEFAULT_FOCUS_OBJECTS } from "./schema"
 import {
   type FileElement,
   type RequiredMetadata,
@@ -24,7 +25,9 @@ interface EditorProps<Metadata extends RequiredMetadata = RequiredMetadata> {
   signer?: Signer<Metadata>
   onAddImage?: () => void
   exportOptions?: HeaderProps["exportOptions"]
-
+  focusObjects?: ReadonlyArray<
+    (typeof DEFAULT_FOCUS_OBJECTS)[number] | (string & {})
+  >
   onClose: (args: { dirty: boolean; destroy: () => void }) => void
 }
 
@@ -32,7 +35,7 @@ function ImageKitEditorImpl<M extends RequiredMetadata>(
   props: EditorProps<M>,
   ref: React.Ref<ImageKitEditorRef>,
 ) {
-  const { theme, initialImages, signer } = props
+  const { theme, initialImages, signer, focusObjects } = props
   const {
     addImage,
     addImages,
@@ -62,8 +65,9 @@ function ImageKitEditorImpl<M extends RequiredMetadata>(
     initialize({
       imageList: initialImages,
       signer,
+      focusObjects,
     })
-  }, [initialImages, signer, initialize])
+  }, [initialImages, signer, focusObjects, initialize])
 
   useImperativeHandle(
     ref,
diff --git a/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx b/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx
index 294187d..24a8bb6 100644
--- a/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx
+++ b/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx
@@ -37,13 +37,14 @@ import { PiArrowLeft } from "@react-icons/all-files/pi/PiArrowLeft"
 import { PiCaretDown } from "@react-icons/all-files/pi/PiCaretDown"
 import { PiInfo } from "@react-icons/all-files/pi/PiInfo"
 import { PiX } from "@react-icons/all-files/pi/PiX"
+import startCase from "lodash/startCase"
 import { useEffect, useMemo } from "react"
 import { Controller, type SubmitHandler, useForm } from "react-hook-form"
 import Select from "react-select"
 import CreateableSelect from "react-select/creatable"
 import { z } from "zod/v3"
 import type { TransformationField } from "../../schema"
-import { transformationSchema } from "../../schema"
+import { DEFAULT_FOCUS_OBJECTS, transformationSchema } from "../../schema"
 import { useEditorStore } from "../../store"
 import { isStepAligned } from "../../utils"
 import AnchorField from "../common/AnchorField"
@@ -61,6 +62,7 @@ export const TransformationConfigSidebar: React.FC = () => {
     addTransformation,
     updateTransformation,
     imageList,
+    focusObjects,
     _setSidebarState,
     _internalState,
     _setTransformationToEdit,
@@ -296,40 +298,74 @@ export const TransformationConfigSidebar: React.FC = () => {
                 <Controller
                   name={field.name}
                   control={control}
-                  render={({ field: controllerField }) => (
-                    <Select
-                      id={field.name}
-                      placeholder="Select"
-                      menuPlacement="auto"
-                      options={field.fieldProps?.options?.map((option) => ({
-                        value: option.value,
-                        label: option.label,
-                      }))}
-                      value={field.fieldProps?.options?.find(
-                        (option) => option.value === controllerField.value,
-                      )}
-                      onChange={(selectedOption) =>
-                        controllerField.onChange(selectedOption?.value)
-                      }
-                      onBlur={controllerField.onBlur}
-                      styles={{
-                        control: (base) => ({
-                          ...base,
-                          fontSize: "12px",
-                          minHeight: "32px",
-                          borderColor: "#E2E8F0",
-                        }),
-                        menu: (base) => ({
-                          ...base,
-                          zIndex: 10,
-                        }),
-                        option: (base) => ({
-                          ...base,
-                          fontSize: "12px",
-                        }),
-                      }}
-                    />
-                  )}
+                  render={({ field: controllerField }) => {
+                    // For focusObject field, use focusObjects from store or default list
+                    const selectOptions =
+                      field.name === "focusObject"
+                        ? (focusObjects || DEFAULT_FOCUS_OBJECTS).map(
+                            (obj) => ({
+                              value: obj,
+                              label: startCase(obj),
+                            }),
+                          )
+                        : field.fieldProps?.options?.map((option) => ({
+                            value: option.value,
+                            label: option.label,
+                          }))
+
+                    const isCreatable = field.fieldProps?.isCreatable === true
+                    const SelectComponent = isCreatable
+                      ? CreateableSelect
+                      : Select
+
+                    // For creatable selects, find the value in options or create a custom one
+                    const selectedValue = isCreatable
+                      ? selectOptions?.find(
+                          (option) => option.value === controllerField.value,
+                        ) ||
+                        (controllerField.value
+                          ? {
+                              value: controllerField.value as string,
+                              label: startCase(controllerField.value as string),
+                            }
+                          : null)
+                      : selectOptions?.find(
+                          (option) => option.value === controllerField.value,
+                        )
+
+                    return (
+                      <SelectComponent
+                        id={field.name}
+                        formatCreateLabel={(inputValue) =>
+                          `Use "${inputValue}"`
+                        }
+                        placeholder="Select"
+                        menuPlacement="auto"
+                        options={selectOptions}
+                        value={selectedValue}
+                        onChange={(selectedOption) =>
+                          controllerField.onChange(selectedOption?.value)
+                        }
+                        onBlur={controllerField.onBlur}
+                        styles={{
+                          control: (base) => ({
+                            ...base,
+                            fontSize: "12px",
+                            minHeight: "32px",
+                            borderColor: "#E2E8F0",
+                          }),
+                          menu: (base) => ({
+                            ...base,
+                            zIndex: 10,
+                          }),
+                          option: (base) => ({
+                            ...base,
+                            fontSize: "12px",
+                          }),
+                        }}
+                      />
+                    )
+                  }}
                 />
               ) : null}
               {field.fieldType === "select-creatable" ? (
diff --git a/packages/imagekit-editor-dev/src/index.tsx b/packages/imagekit-editor-dev/src/index.tsx
index b6f4f0d..5d74dfd 100644
--- a/packages/imagekit-editor-dev/src/index.tsx
+++ b/packages/imagekit-editor-dev/src/index.tsx
@@ -1,3 +1,4 @@
 export type { ImageKitEditorProps, ImageKitEditorRef } from "./ImageKitEditor"
 export { ImageKitEditor } from "./ImageKitEditor"
+export { DEFAULT_FOCUS_OBJECTS } from "./schema"
 export type { FileElement, Signer } from "./store"
diff --git a/packages/imagekit-editor-dev/src/schema/index.ts b/packages/imagekit-editor-dev/src/schema/index.ts
index 7950283..bb4ccea 100644
--- a/packages/imagekit-editor-dev/src/schema/index.ts
+++ b/packages/imagekit-editor-dev/src/schema/index.ts
@@ -22,6 +22,90 @@ import {
   widthValidator,
 } from "./transformation"
 
+// Based on ImageKit's supported object list
+export const DEFAULT_FOCUS_OBJECTS = [
+  "person",
+  "bicycle",
+  "car",
+  "motorcycle",
+  "airplane",
+  "bus",
+  "train",
+  "truck",
+  "boat",
+  "trafficLight",
+  "fireHydrant",
+  "stopSign",
+  "parkingMeter",
+  "bench",
+  "bird",
+  "cat",
+  "dog",
+  "horse",
+  "sheep",
+  "cow",
+  "elephant",
+  "bear",
+  "zebra",
+  "giraffe",
+  "backpack",
+  "umbrella",
+  "handbag",
+  "tie",
+  "suitcase",
+  "frisbee",
+  "skis",
+  "snowboard",
+  "sportsBall",
+  "kite",
+  "baseballBat",
+  "baseballGlove",
+  "skateboard",
+  "surfboard",
+  "tennisRacket",
+  "bottle",
+  "wineGlass",
+  "cup",
+  "fork",
+  "knife",
+  "spoon",
+  "bowl",
+  "banana",
+  "apple",
+  "sandwich",
+  "orange",
+  "broccoli",
+  "carrot",
+  "hotDog",
+  "pizza",
+  "donut",
+  "cake",
+  "chair",
+  "couch",
+  "pottedPlant",
+  "bed",
+  "diningTable",
+  "toilet",
+  "tv",
+  "laptop",
+  "mouse",
+  "remote",
+  "keyboard",
+  "cellPhone",
+  "microwave",
+  "oven",
+  "toaster",
+  "sink",
+  "refrigerator",
+  "book",
+  "clock",
+  "vase",
+  "scissors",
+  "teddyBear",
+  "hairDrier",
+  "toothbrush",
+] as const
+
 export interface TransformationItem {
   key: string
   name: string
@@ -48,6 +132,7 @@ export interface TransformationField {
       value: string
     }[]
     autoOption?: boolean
+    isCreatable?: boolean
     min?: number
     max?: number
     step?: number
@@ -404,9 +489,14 @@ export const transformationSchema: TransformationSchema[] = [
           {
             label: "Focus Object",
             name: "focusObject",
-            fieldType: "input",
+            fieldType: "select",
             isTransformation: true,
             transformationGroup: "focus",
+            fieldProps: {
+              isCreatable: false,
+            },
+            helpText:
+              "Select an object to focus on. The crop will center on this object.",
             isVisible: ({ focus }) => focus === "object",
           },
         ],
@@ -506,9 +596,14 @@ export const transformationSchema: TransformationSchema[] = [
           {
             label: "Focus Object",
             name: "focusObject",
-            fieldType: "input",
+            fieldType: "select",
             isTransformation: true,
             transformationGroup: "focus",
+            fieldProps: {
+              isCreatable: false,
+            },
+            helpText:
+              "Select an object to focus on. The crop will center on this object.",
             isVisible: ({ focus }) => focus === "object",
           },
         ],
@@ -706,6 +801,11 @@ export const transformationSchema: TransformationSchema[] = [
             focus: z.string().optional(),
             focusAnchor: z.string().optional(),
             focusObject: z.string().optional(),
+            coordinateMethod: z.string().optional(),
+            x: z.string().optional(),
+            y: z.string().optional(),
+            xc: z.string().optional(),
+            yc: z.string().optional(),
           })
           .refine(
             (val) => {
@@ -722,7 +822,53 @@ export const transformationSchema: TransformationSchema[] = [
               message: "At least one value is required",
               path: [],
             },
-          ),
+          )
+          .superRefine((val, ctx) => {
+            if (val.focus === "object" && !val.focusObject) {
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: "Focus object is required",
+                path: ["focusObject"],
+              })
+            }
+            if (val.focus === "anchor" && !val.focusAnchor) {
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: "Focus anchor is required",
+                path: ["focusAnchor"],
+              })
+            }
+            if (val.focus === "coordinates") {
+              const hasXY = val.x || val.y
+              const hasXCYC = val.xc || val.yc
+
+              if (hasXY && hasXCYC) {
+                ctx.addIssue({
+                  code: z.ZodIssueCode.custom,
+                  message: "Choose either x/y or xc/yc, not both",
+                  path: [],
+                })
+              }
+
+              if (val.coordinateMethod === "topleft") {
+                if (!val.x && !val.y) {
+                  ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: "At least one coordinate (x or y) is required",
+                    path: [],
+                  })
+                }
+              } else if (val.coordinateMethod === "center") {
+                if (!val.xc && !val.yc) {
+                  ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: "At least one coordinate (xc or yc) is required",
+                    path: [],
+                  })
+                }
+              }
+            }
+          }),
         transformations: [
           {
             label: "Width",
@@ -756,8 +902,12 @@ export const transformationSchema: TransformationSchema[] = [
                 { label: "Anchor", value: "anchor" },
                 { label: "Face", value: "face" },
                 { label: "Object", value: "object" },
+                { label: "Custom", value: "custom" },
+                { label: "Coordinates", value: "coordinates" },
               ],
             },
+            helpText:
+              "Choose how to position the extracted region. Custom uses a saved focus area from Media Library.",
           },
           {
             label: "Focus Anchor",
@@ -783,11 +933,81 @@ export const transformationSchema: TransformationSchema[] = [
           {
             label: "Focus Object",
             name: "focusObject",
-            fieldType: "input",
+            fieldType: "select",
             isTransformation: true,
             transformationGroup: "focus",
+            fieldProps: {
+              isCreatable: false,
+            },
+            helpText:
+              "Select an object to focus on during extraction. The crop will center on this object.",
             isVisible: ({ focus }) => focus === "object",
           },
+          {
+            label: "Coordinate Method",
+            name: "coordinateMethod",
+            fieldType: "radio-card",
+            isTransformation: false,
+            transformationGroup: "focus",
+            fieldProps: {
+              options: [
+                { label: "Top-left (x, y)", value: "topleft" },
+                { label: "Center (xc, yc)", value: "center" },
+              ],
+              defaultValue: "topleft",
+            },
+            helpText:
+              "Choose whether coordinates are relative to the top-left corner or the center of the image.",
+            isVisible: ({ focus }) => focus === "coordinates",
+          },
+          {
+            label: "X (Horizontal)",
+            name: "x",
+            fieldType: "input",
+            isTransformation: true,
+            transformationGroup: "focus",
+            helpText:
+              "Horizontal position from the top-left. Use an integer or expression (e.g., iw_mul_0.4).",
+            examples: ["100", "iw_mul_0.4"],
+            isVisible: ({ focus, coordinateMethod }) =>
+              focus === "coordinates" && coordinateMethod === "topleft",
+          },
+          {
+            label: "Y (Vertical)",
+            name: "y",
+            fieldType: "input",
+            isTransformation: true,
+            transformationGroup: "focus",
+            helpText:
+              "Vertical position from the top-left. Use an integer or expression (e.g., ih_mul_0.4).",
+            examples: ["100", "ih_mul_0.4"],
+            isVisible: ({ focus, coordinateMethod }) =>
+              focus === "coordinates" && coordinateMethod === "topleft",
+          },
+          {
+            label: "XC (Horizontal Center)",
+            name: "xc",
+            fieldType: "input",
+            isTransformation: true,
+            transformationGroup: "focus",
+            helpText:
+              "Horizontal center position. Use an integer or expression (e.g., iw_mul_0.5).",
+            examples: ["200", "iw_mul_0.5"],
+            isVisible: ({ focus, coordinateMethod }) =>
+              focus === "coordinates" && coordinateMethod === "center",
+          },
+          {
+            label: "YC (Vertical Center)",
+            name: "yc",
+            fieldType: "input",
+            isTransformation: true,
+            transformationGroup: "focus",
+            helpText:
+              "Vertical center position. Use an integer or expression (e.g., ih_mul_0.5).",
+            examples: ["200", "ih_mul_0.5"],
+            isVisible: ({ focus, coordinateMethod }) =>
+              focus === "coordinates" && coordinateMethod === "center",
+          },
         ],
       },
       {
@@ -2527,7 +2747,7 @@ export const transformationFormatters: Record<
     }
   },
   focus: (values, transforms) => {
-    const { focus, focusAnchor, focusObject } = values
+    const { focus, focusAnchor, focusObject, x, y, xc, yc } = values
 
     if (focus === "auto" || focus === "face") {
       transforms.focus = focus
@@ -2535,6 +2755,15 @@ export const transformationFormatters: Record<
       transforms.focus = focusAnchor
     } else if (focus === "object") {
       transforms.focus = focusObject
+    } else if (focus === "custom") {
+      transforms.focus = "custom"
+    } else if (focus === "coordinates") {
+      // Handle coordinate-based focus
+      // x/y are top-left coordinates, xc/yc are center coordinates
+      if (x) transforms.x = x
+      if (y) transforms.y = y
+      if (xc) transforms.xc = xc
+      if (yc) transforms.yc = yc
     }
   },
   shadow: (values, transforms) => {
diff --git a/packages/imagekit-editor-dev/src/store.ts b/packages/imagekit-editor-dev/src/store.ts
index ccfb5b2..2b02f0c 100644
--- a/packages/imagekit-editor-dev/src/store.ts
+++ b/packages/imagekit-editor-dev/src/store.ts
@@ -7,6 +7,7 @@ import {
 import { create } from "zustand"
 import { subscribeWithSelector } from "zustand/middleware"
 import {
+  type DEFAULT_FOCUS_OBJECTS,
   type TransformationField,
   transformationFormatters,
   transformationSchema,
@@ -71,6 +72,9 @@ export interface EditorState<
   signingAbortControllers: Record<string, AbortController>
   signedUrlCache: Record<string, string>
   currentTransformKey: string
+  focusObjects?: ReadonlyArray<
+    (typeof DEFAULT_FOCUS_OBJECTS)[number] | (string & {})
+  >
   _internalState: InternalState
 }
 
@@ -80,6 +84,9 @@ export type EditorActions<
   initialize: (initialData?: {
     imageList?: Array<string | FileElement<Metadata>>
     signer?: Signer<Metadata>
+    focusObjects?: ReadonlyArray<
+      (typeof DEFAULT_FOCUS_OBJECTS)[number] | (string & {})
+    >
   }) => void
   destroy: () => void
   setCurrentImage: (imageSrc: string | undefined) => void
@@ -155,6 +162,7 @@ const DEFAULT_STATE: EditorState = {
   signingAbortControllers: {},
   signedUrlCache: {},
   currentTransformKey: "",
+  focusObjects: undefined,
   _internalState: {
     sidebarState: "none",
     selectedTransformationKey: null,
@@ -177,6 +185,9 @@ const useEditorStore = create<EditorState & EditorActions>()(
       if (initialData?.signer) {
         updates.signer = initialData.signer
       }
+      if (initialData?.focusObjects) {
+        updates.focusObjects = initialData.focusObjects
+      }
       if (Object.keys(updates).length > 0) {
         set(updates as EditorState)
       }

From be9f682f3c89e465c3633ba1fcdbe4d26c2d8982 Mon Sep 17 00:00:00 2001
From: Abhinav Dhiman <abhinav@imagekit.io>
Date: Tue, 14 Oct 2025 16:25:06 +0530
Subject: [PATCH 2/6] release: bump @imagekit/editor version to 1.1.0

---
 examples/react-example/package.json   | 2 +-
 packages/imagekit-editor/package.json | 2 +-
 yarn.lock                             | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/react-example/package.json b/examples/react-example/package.json
index 0587ae3..9acacc1 100644
--- a/examples/react-example/package.json
+++ b/examples/react-example/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@imagekit/editor": "1.0.0",
+    "@imagekit/editor": "1.1.0",
     "@types/node": "^20.11.24",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
diff --git a/packages/imagekit-editor/package.json b/packages/imagekit-editor/package.json
index c852535..1a859e7 100644
--- a/packages/imagekit-editor/package.json
+++ b/packages/imagekit-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imagekit/editor",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Image Editor powered by ImageKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
diff --git a/yarn.lock b/yarn.lock
index 32d0f6b..4c7f56a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1651,7 +1651,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@imagekit/editor@npm:1.0.0, @imagekit/editor@workspace:packages/imagekit-editor":
+"@imagekit/editor@npm:1.1.0, @imagekit/editor@workspace:packages/imagekit-editor":
   version: 0.0.0-use.local
   resolution: "@imagekit/editor@workspace:packages/imagekit-editor"
   peerDependencies:
@@ -4188,7 +4188,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-example@workspace:examples/react-example"
   dependencies:
-    "@imagekit/editor": "npm:1.0.0"
+    "@imagekit/editor": "npm:1.1.0"
     "@types/node": "npm:^20.11.24"
     "@types/react": "npm:^17.0.2"
     "@types/react-dom": "npm:^17.0.2"

From 087c9c793ee2e34248300f27fd2683de46679002 Mon Sep 17 00:00:00 2001
From: Abhinav Dhiman <abhinav@imagekit.io>
Date: Thu, 16 Oct 2025 13:26:30 +0530
Subject: [PATCH 3/6] tweak: simplify help text descriptions for focus position
 fields by removing parenthetical examples

---
 packages/imagekit-editor-dev/src/schema/index.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/imagekit-editor-dev/src/schema/index.ts b/packages/imagekit-editor-dev/src/schema/index.ts
index bb4ccea..94fec2b 100644
--- a/packages/imagekit-editor-dev/src/schema/index.ts
+++ b/packages/imagekit-editor-dev/src/schema/index.ts
@@ -967,7 +967,7 @@ export const transformationSchema: TransformationSchema[] = [
             isTransformation: true,
             transformationGroup: "focus",
             helpText:
-              "Horizontal position from the top-left. Use an integer or expression (e.g., iw_mul_0.4).",
+              "Horizontal position from the top-left. Use an integer or expression.",
             examples: ["100", "iw_mul_0.4"],
             isVisible: ({ focus, coordinateMethod }) =>
               focus === "coordinates" && coordinateMethod === "topleft",
@@ -979,7 +979,7 @@ export const transformationSchema: TransformationSchema[] = [
             isTransformation: true,
             transformationGroup: "focus",
             helpText:
-              "Vertical position from the top-left. Use an integer or expression (e.g., ih_mul_0.4).",
+              "Vertical position from the top-left. Use an integer or expression.",
             examples: ["100", "ih_mul_0.4"],
             isVisible: ({ focus, coordinateMethod }) =>
               focus === "coordinates" && coordinateMethod === "topleft",
@@ -991,7 +991,7 @@ export const transformationSchema: TransformationSchema[] = [
             isTransformation: true,
             transformationGroup: "focus",
             helpText:
-              "Horizontal center position. Use an integer or expression (e.g., iw_mul_0.5).",
+              "Horizontal center position. Use an integer or expression.",
             examples: ["200", "iw_mul_0.5"],
             isVisible: ({ focus, coordinateMethod }) =>
               focus === "coordinates" && coordinateMethod === "center",
@@ -1002,8 +1002,7 @@ export const transformationSchema: TransformationSchema[] = [
             fieldType: "input",
             isTransformation: true,
             transformationGroup: "focus",
-            helpText:
-              "Vertical center position. Use an integer or expression (e.g., ih_mul_0.5).",
+            helpText: "Vertical center position. Use an integer or expression.",
             examples: ["200", "ih_mul_0.5"],
             isVisible: ({ focus, coordinateMethod }) =>
               focus === "coordinates" && coordinateMethod === "center",

From 31c907713982bbce3a524cf59e7ccfee3994334b Mon Sep 17 00:00:00 2001
From: Abhinav Dhiman <abhinav@imagekit.io>
Date: Thu, 16 Oct 2025 13:27:26 +0530
Subject: [PATCH 4/6] chore: bump @imagekit/editor version to 1.1.0-1 and add
 stableVersion field

---
 examples/react-example/package.json   | 2 +-
 packages/imagekit-editor/package.json | 5 +++--
 yarn.lock                             | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/examples/react-example/package.json b/examples/react-example/package.json
index 9acacc1..527db01 100644
--- a/examples/react-example/package.json
+++ b/examples/react-example/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@imagekit/editor": "1.1.0",
+    "@imagekit/editor": "1.1.0-1",
     "@types/node": "^20.11.24",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
diff --git a/packages/imagekit-editor/package.json b/packages/imagekit-editor/package.json
index 1a859e7..f493899 100644
--- a/packages/imagekit-editor/package.json
+++ b/packages/imagekit-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imagekit/editor",
-  "version": "1.1.0",
+  "version": "1.1.0-1",
   "description": "Image Editor powered by ImageKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -28,5 +28,6 @@
     "react-dom": "^17.0.2",
     "react-select": "^5.2.1"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "stableVersion": "1.1.0"
 }
diff --git a/yarn.lock b/yarn.lock
index 4c7f56a..e67a850 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1651,7 +1651,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@imagekit/editor@npm:1.1.0, @imagekit/editor@workspace:packages/imagekit-editor":
+"@imagekit/editor@npm:1.1.0-1, @imagekit/editor@workspace:packages/imagekit-editor":
   version: 0.0.0-use.local
   resolution: "@imagekit/editor@workspace:packages/imagekit-editor"
   peerDependencies:
@@ -4188,7 +4188,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-example@workspace:examples/react-example"
   dependencies:
-    "@imagekit/editor": "npm:1.1.0"
+    "@imagekit/editor": "npm:1.1.0-1"
     "@types/node": "npm:^20.11.24"
     "@types/react": "npm:^17.0.2"
     "@types/react-dom": "npm:^17.0.2"

From 4495ffdbe790b8f51a438762703de17316c6dc01 Mon Sep 17 00:00:00 2001
From: Abhinav Dhiman <abhinav@imagekit.io>
Date: Thu, 23 Oct 2025 12:04:28 +0530
Subject: [PATCH 5/6] release: bump @imagekit/editor from v1.1.0-1 to v1.1.0

---
 examples/react-example/package.json   | 2 +-
 packages/imagekit-editor/package.json | 5 ++---
 yarn.lock                             | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/examples/react-example/package.json b/examples/react-example/package.json
index 527db01..9acacc1 100644
--- a/examples/react-example/package.json
+++ b/examples/react-example/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@imagekit/editor": "1.1.0-1",
+    "@imagekit/editor": "1.1.0",
     "@types/node": "^20.11.24",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
diff --git a/packages/imagekit-editor/package.json b/packages/imagekit-editor/package.json
index f493899..1a859e7 100644
--- a/packages/imagekit-editor/package.json
+++ b/packages/imagekit-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imagekit/editor",
-  "version": "1.1.0-1",
+  "version": "1.1.0",
   "description": "Image Editor powered by ImageKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -28,6 +28,5 @@
     "react-dom": "^17.0.2",
     "react-select": "^5.2.1"
   },
-  "license": "MIT",
-  "stableVersion": "1.1.0"
+  "license": "MIT"
 }
diff --git a/yarn.lock b/yarn.lock
index e67a850..3360b87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1651,7 +1651,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@imagekit/editor@npm:1.1.0-1, @imagekit/editor@workspace:packages/imagekit-editor":
+"@imagekit/editor@npm:1.1.0, @imagekit/editor@workspace:packages/imagekit-editor":
   version: 0.0.0-use.local
   resolution: "@imagekit/editor@workspace:packages/imagekit-editor"
   peerDependencies:
@@ -4188,7 +4188,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-example@workspace:examples/react-example"
   dependencies:
-    "@imagekit/editor": "npm:1.1.0-1"
+    "@imagekit/editor": "npm:1.2.0"
     "@types/node": "npm:^20.11.24"
     "@types/react": "npm:^17.0.2"
     "@types/react-dom": "npm:^17.0.2"

From 1351eeade608ede8cee9993641f20addf9c29387 Mon Sep 17 00:00:00 2001
From: Abhinav Dhiman <abhinav@imagekit.io>
Date: Thu, 23 Oct 2025 12:55:51 +0530
Subject: [PATCH 6/6] docs: add focusObjects prop for customizing object-based
 focus selections

---
 README.md                                          | 14 ++++++++++++++
 .../imagekit-editor-dev/src/ImageKitEditor.tsx     |  5 ++---
 packages/imagekit-editor-dev/src/store.ts          | 12 ++++++------
 yarn.lock                                          |  2 +-
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 4b64ad9..1358919 100644
--- a/README.md
+++ b/README.md
@@ -130,6 +130,7 @@ export default ImageEditor;
 | `signer` | `Signer` | ❌ | Function to generate signed URLs for private images |
 | `onAddImage` | `() => void` | ❌ | Callback function for adding new images |
 | `exportOptions` | `ExportOptions` | ❌ | Configuration for export functionality |
+| `focusObjects` | `string[]` | ❌ | Custom list of selectable focus objects for object-based focus |
 
 ### ImageKitEditor Ref Methods
 
@@ -181,6 +182,19 @@ exportOptions={{
 }}
 ```
 
+### Focus Objects
+
+You can override the list of selectable focus objects used when a transformation's focus is set to "Object" (e.g., Maintain Aspect Ratio, Forced Crop, Extract). If not provided, the editor defaults to ImageKit's supported objects (e.g., person, bicycle, car, dog, etc.).
+
+See the supported object list in the ImageKit docs: https://imagekit.io/docs/image-resize-and-crop#supported-object-list
+
+```tsx
+<ImageKitEditor
+  focusObjects={["person", "cat", "car", "customObject"]}
+  // ... other props
+/>
+```
+
 ### File Element Interface
 
 For advanced use cases with metadata and signed URLs:
diff --git a/packages/imagekit-editor-dev/src/ImageKitEditor.tsx b/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
index 886a512..87ad4d2 100644
--- a/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
+++ b/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
@@ -7,6 +7,7 @@ import type { HeaderProps } from "./components/header"
 import type { DEFAULT_FOCUS_OBJECTS } from "./schema"
 import {
   type FileElement,
+  type FocusObjects,
   type RequiredMetadata,
   type Signer,
   useEditorStore,
@@ -25,9 +26,7 @@ interface EditorProps<Metadata extends RequiredMetadata = RequiredMetadata> {
   signer?: Signer<Metadata>
   onAddImage?: () => void
   exportOptions?: HeaderProps["exportOptions"]
-  focusObjects?: ReadonlyArray<
-    (typeof DEFAULT_FOCUS_OBJECTS)[number] | (string & {})
-  >
+  focusObjects?: ReadonlyArray<FocusObjects>
   onClose: (args: { dirty: boolean; destroy: () => void }) => void
 }
 
diff --git a/packages/imagekit-editor-dev/src/store.ts b/packages/imagekit-editor-dev/src/store.ts
index 2b02f0c..5fbad49 100644
--- a/packages/imagekit-editor-dev/src/store.ts
+++ b/packages/imagekit-editor-dev/src/store.ts
@@ -58,6 +58,10 @@ interface InternalState {
     | null
 }
 
+export type FocusObjects =
+  | (typeof DEFAULT_FOCUS_OBJECTS)[number]
+  | (string & {})
+
 export interface EditorState<
   Metadata extends RequiredMetadata = RequiredMetadata,
 > {
@@ -72,9 +76,7 @@ export interface EditorState<
   signingAbortControllers: Record<string, AbortController>
   signedUrlCache: Record<string, string>
   currentTransformKey: string
-  focusObjects?: ReadonlyArray<
-    (typeof DEFAULT_FOCUS_OBJECTS)[number] | (string & {})
-  >
+  focusObjects?: ReadonlyArray<FocusObjects>
   _internalState: InternalState
 }
 
@@ -84,9 +86,7 @@ export type EditorActions<
   initialize: (initialData?: {
     imageList?: Array<string | FileElement<Metadata>>
     signer?: Signer<Metadata>
-    focusObjects?: ReadonlyArray<
-      (typeof DEFAULT_FOCUS_OBJECTS)[number] | (string & {})
-    >
+    focusObjects?: ReadonlyArray<FocusObjects>
   }) => void
   destroy: () => void
   setCurrentImage: (imageSrc: string | undefined) => void
diff --git a/yarn.lock b/yarn.lock
index 3360b87..4c7f56a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4188,7 +4188,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-example@workspace:examples/react-example"
   dependencies:
-    "@imagekit/editor": "npm:1.2.0"
+    "@imagekit/editor": "npm:1.1.0"
     "@types/node": "npm:^20.11.24"
     "@types/react": "npm:^17.0.2"
     "@types/react-dom": "npm:^17.0.2"