Piyush/enhancements #6

piyushryn · 2026-01-27T11:21:41Z

Adds

Features like trim , color-replace , border, sharpen, unsharpen mask to base image
and trim adjustment , border, sharpen & unsharpen mask to layers

…d functionality

…n into schema

…ma with validation and integration

… with enhanced validation and default values

Copilot

Pull request overview

This PR adds image enhancement features to both base images and layers, including trim, color replace, border, and sharpen transformations.

Changes:

Added four new adjustment transformations for base images: Border, Trim, Color Replace, and Sharpen
Extended layer transformations with trim threshold, border, and sharpen capabilities
Enhanced ColorPickerField component to accept and apply fieldProps configuration

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
packages/imagekit-editor-dev/src/schema/index.ts	Added schema definitions for new transformations (border, trim, color-replace, sharpen) and updated layer transformation handling
packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx	Added fieldProps prop to ColorPickerField component
packages/imagekit-editor-dev/src/components/common/ColorPickerField.tsx	Updated to accept and spread fieldProps into the ColorPicker component

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/imagekit-editor-dev/src/schema/index.ts

Copilot · 2026-01-27T11:23:17Z

packages/imagekit-editor-dev/src/schema/index.ts

+  {
+    key: "ai",
+    name: "AI Transformations",
+    items: [{


Inconsistent formatting: the opening bracket should be on a new line to match the formatting pattern used elsewhere in this array (see line 1578 and others).

@copilot open a new pull request to apply changes based on this feedback

Copilot · 2026-01-27T11:23:18Z

packages/imagekit-editor-dev/src/schema/index.ts

+        overlayTransform.sharpen = values.sharpen
+      }
+    }
+    if ((values.borderWidth && typeof values.borderWidth === "number" && values.borderWidth > 0) && (values.borderColor && typeof values.borderColor === "string")) {


Excessive nested parentheses reduce readability. Consider extracting conditions into named boolean variables or simplifying the expression structure.

Suggested change

if ((values.borderWidth && typeof values.borderWidth === "number" && values.borderWidth > 0) && (values.borderColor && typeof values.borderColor === "string")) {

const hasValidBorderWidth =

typeof values.borderWidth === "number" && values.borderWidth > 0

const hasValidBorderColor =

typeof values.borderColor === "string" && values.borderColor.length > 0

if (hasValidBorderWidth && hasValidBorderColor) {

packages/imagekit-editor-dev/src/components/common/ColorPickerField.tsx

Co-authored-by: Copilot <[email protected]>

Copilot · 2026-01-27T11:24:35Z

@piyushryn I've opened a new pull request, #7, to work on those changes. Once the pull request is ready, I'll request review from you.

…Field.tsx Co-authored-by: Copilot <[email protected]>

Co-authored-by: piyushryn <[email protected]>

Fix inconsistent array formatting in AI transformations schema

…se union type and improve visibility logic

…th validation and integration

… logic

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-30T05:13:50Z

packages/imagekit-editor-dev/src/schema/transformation.ts

+
+
+export const optionalPositiveFloatNumberValidator = z.preprocess(
+  (val) => (val === "" || val === undefined || val === null) ? undefined : val,


The preprocessor function returns undefined for empty strings, undefined, and null, but the validator chain already includes .optional(). This makes the undefined return redundant. Consider simplifying to just handle empty strings: (val) => (val === '') ? undefined : val

Suggested change

(val) => (val === "" || val === undefined || val === null) ? undefined : val,

(val) => (val === "" || val === null) ? undefined : val,

Copilot · 2026-01-30T05:13:51Z

packages/imagekit-editor-dev/src/schema/index.ts

+        defaultTransformation: {},
+        schema: z
+          .object({
+            borderWidth: z.union([widthValidator, heightValidator]).optional(),


Using heightValidator for borderWidth is confusing. Consider creating a dedicated borderWidthValidator or using just widthValidator if the validation logic is identical.

Suggested change

borderWidth: z.union([widthValidator, heightValidator]).optional(),

borderWidth: widthValidator.optional(),

Copilot · 2026-01-30T05:13:51Z

packages/imagekit-editor-dev/src/schema/index.ts

+              return false
+            },
+            {
+              message: "Border width and color are required",


The error message states both width and color are required, but the schema makes both optional and the refine check passes if either is provided. The message should be 'At least one of border width or color is required' to match the validation logic.

Suggested change

message: "Border width and color are required",

message: "At least one of border width or color is required",

Copilot · 2026-01-30T05:13:51Z

packages/imagekit-editor-dev/src/schema/index.ts

+          unsharpenMaskRadius: z.coerce.number().positive({ message: "Should be a positive floating point number." }),
+          unsharpenMaskSigma: z.coerce.number().positive({ message: "Should be a positive floating point number." }),
+          unsharpenMaskAmount: z.coerce.number().positive({ message: "Should be a positive floating point number." }),
+          unsharpenMaskThreshold: z.coerce.number().positive({ message: "Should be a positive floating point number." }),


These four fields have identical validation logic. Consider extracting this as a reusable validator (similar to optionalPositiveFloatNumberValidator) to reduce duplication and improve maintainability.

Copilot · 2026-01-30T05:13:51Z

packages/imagekit-editor-dev/src/schema/index.ts

+            isTransformation: false,
+            transformationGroup: "imageLayer",
+            helpText:
+              "Toggle to unsharpen the overlay image to remove the edges and finer details within an image.",


The help text incorrectly describes unsharpen mask as removing edges and details, when it actually enhances them. Based on the description at line 1850, it should read: 'Toggle to apply unsharpen mask to the overlay image to enhance edge contrast and make details appear clearer.'

Suggested change

"Toggle to unsharpen the overlay image to remove the edges and finer details within an image.",

"Toggle to apply unsharpen mask to the overlay image to enhance edge contrast and make details appear clearer.",

Copilot · 2026-01-30T05:13:52Z

packages/imagekit-editor-dev/src/schema/index.ts

+      const offsetX = Number(shadowOffsetX)
+      if (!Number.isNaN(offsetX) && offsetX < 0) {
+        params.push(`x-N${Math.abs(offsetX)}`)
      } else {
-        params.push(`x-${shadowOffsetX}`)
+        params.push(`x-${offsetX}`)


When offsetX is NaN (e.g., if shadowOffsetX is a non-numeric string), the code pushes x-NaN to params. Add an early return or guard to skip processing when the conversion results in NaN.

Copilot · 2026-01-30T05:13:52Z

packages/imagekit-editor-dev/src/schema/index.ts

+      const offsetY = Number(shadowOffsetY)
+      if (!Number.isNaN(offsetY) && offsetY < 0) {
+        params.push(`y-N${Math.abs(offsetY)}`)
      } else {
-        params.push(`y-${shadowOffsetY}`)
+        params.push(`y-${offsetY}`)


When offsetY is NaN (e.g., if shadowOffsetY is a non-numeric string), the code pushes y-NaN to params. Add an early return or guard to skip processing when the conversion results in NaN.

Copilot · 2026-01-30T05:13:52Z

packages/imagekit-editor-dev/src/schema/index.ts

+    const { unsharpenMaskRadius, unsharpenMaskSigma, unsharpenMaskAmount, unsharpenMaskThreshold } = values as {
+      unsharpenMaskRadius: number
+      unsharpenMaskSigma: number
+      unsharpenMaskAmount: number
+      unsharpenMaskThreshold: number
+    }


The formatter unconditionally builds the transform string even when the required fields may be undefined. This could produce invalid transforms like undefined-undefined-undefined-undefined. Add validation to ensure all four parameters exist before constructing the transform, or check if unsharpenMask is enabled.

Suggested change

const { unsharpenMaskRadius, unsharpenMaskSigma, unsharpenMaskAmount, unsharpenMaskThreshold } = values as {

unsharpenMaskRadius: number

unsharpenMaskSigma: number

unsharpenMaskAmount: number

unsharpenMaskThreshold: number

}

const {

unsharpenMaskRadius,

unsharpenMaskSigma,

unsharpenMaskAmount,

unsharpenMaskThreshold,

} = values as {

unsharpenMaskRadius: number

unsharpenMaskSigma: number

unsharpenMaskAmount: number

unsharpenMaskThreshold: number

}

if (

typeof unsharpenMaskRadius !== "number" ||

typeof unsharpenMaskSigma !== "number" ||

typeof unsharpenMaskAmount !== "number" ||

typeof unsharpenMaskThreshold !== "number"

) {

return

}

…ns, and improve validation logic

…nd remove debug log

piyushryn added 5 commits January 20, 2026 17:23

feat: add trim transformation support

5ad6ab7

fix: update trim transformation schema and default values for improve…

6293e83

…d functionality

feat: add color replace transformation with validation and integratio…

d7fdd83

…n into schema

feat: add border and sharpen transformations to image processing sche…

bc2da35

…ma with validation and integration

refactor: improve transformation schema for border, trim, and sharpen…

0cac58c

… with enhanced validation and default values

piyushryn requested a review from Copilot January 27, 2026 11:21

Copilot AI reviewed Jan 27, 2026

View reviewed changes

piyushryn and others added 2 commits January 27, 2026 16:54

Update packages/imagekit-editor-dev/src/schema/index.ts

a5e7fef

Co-authored-by: Copilot <[email protected]>

Initial plan

cc2aeb3

Copilot AI mentioned this pull request Jan 27, 2026

Fix inconsistent array formatting in AI transformations schema #7

Merged

piyushryn and others added 5 commits January 27, 2026 16:55

Update packages/imagekit-editor-dev/src/components/common/ColorPicker…

87a681a

…Field.tsx Co-authored-by: Copilot <[email protected]>

fix: correct formatting for items array opening bracket at line 1855

d04269d

Co-authored-by: piyushryn <[email protected]>

Merge pull request #7 from imagekit-developer/copilot/sub-pr-6

6996dd3

Fix inconsistent array formatting in AI transformations schema

refactor: update borderWidth validation in transformation schema to u…

16ec40a

…se union type and improve visibility logic

feat: add unsharpen mask transformation to image processing schema wi…

825b3c4

…th validation and integration

piyushryn changed the base branch from main to IK-2461/enhancements January 29, 2026 07:22

feat: integrate unsharpen mask transformation into overlay processing…

c0fa40b

… logic

piyushryn requested a review from Copilot January 30, 2026 05:12

Copilot AI reviewed Jan 30, 2026

View reviewed changes

piyushryn added 2 commits January 30, 2026 12:22

feat: enhance transformation schema with new lineHeight and dpr optio…

a132fb9

…ns, and improve validation logic

fix: update trimEnabled transformation property to disable trimming a…

8839de5

…nd remove debug log

-    if ((values.borderWidth && typeof values.borderWidth === "number" && values.borderWidth > 0) && (values.borderColor && typeof values.borderColor === "string")) {
+    const hasValidBorderWidth =
+      typeof values.borderWidth === "number" && values.borderWidth > 0
+    const hasValidBorderColor =
+      typeof values.borderColor === "string" && values.borderColor.length > 0
+    if (hasValidBorderWidth && hasValidBorderColor) {



		export const optionalPositiveFloatNumberValidator = z.preprocess(
		(val) => (val === "" \|\| val === undefined \|\| val === null) ? undefined : val,

	(val) => (val === "" \|\| val === undefined \|\| val === null) ? undefined : val,
	(val) => (val === "" \|\| val === null) ? undefined : val,

	borderWidth: z.union([widthValidator, heightValidator]).optional(),
	borderWidth: widthValidator.optional(),

	message: "Border width and color are required",
	message: "At least one of border width or color is required",

	"Toggle to unsharpen the overlay image to remove the edges and finer details within an image.",
	"Toggle to apply unsharpen mask to the overlay image to enhance edge contrast and make details appear clearer.",

Piyush/enhancements #6

Are you sure you want to change the base?

Piyush/enhancements #6

Uh oh!

Conversation

piyushryn commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Adds

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

piyushryn Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Jan 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

piyushryn commented Jan 27, 2026 •

edited

Loading