hackathon changes

Author: Yashaswi Agrawal

examples/react-example/src/index.tsx

@@ -18,6 +18,7 @@ type StoredTemplateRecord = {
   isPinned: boolean
   name: string
   transformations: Omit<Transformation, "id">[]
+  kind?: "template" | "overlay"
   createdBy: { userId: string; name: string; email: string }
   updatedBy: { userId: string; name: string; email: string }
   createdAt: number
@@ -70,6 +71,7 @@ function createLocalTemplateStorage(): TemplateStorageProvider {
         isPinned: input.isPinned ?? existing?.isPinned ?? false,
         name: input.name,
         transformations: input.transformations,
+        kind: input.kind ?? existing?.kind ?? "template",
         createdBy: input.createdBy ??
           existing?.createdBy ?? {
             userId: session.userId,

packages/imagekit-editor-dev/src/ImageKitEditor.tsx

@@ -140,6 +140,7 @@ function ImageKitEditorImpl<M extends RequiredMetadata>(
         transformations: state.transformations.map(
           ({ id: _id, ...rest }) => rest,
         ),
+        kind: state._internalState.overlayMode ? "overlay" : "template",
         ...(state.templateIsPrivate !== null
           ? { isPrivate: state.templateIsPrivate }
           : {}),

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

@@ -58,11 +58,27 @@ const GradientPickerField = ({
   setValue,
   value,
   errors,
+  renderSubfieldVariableToggle,
+  renderSubfieldVariableNameInput,
 }: {
   fieldName: string
   setValue: (name: string, value: GradientPickerState | string) => void
   value?: GradientPickerState | null
   errors?: FieldErrors<Record<string, unknown>>
+  /**
+   * Optional render-prop for the small "is variable" toggle shown next to the
+   * `from` / `to` color label.
+   */
+  renderSubfieldVariableToggle?: (
+    subfield: "from" | "to",
+  ) => React.ReactNode
+  /**
+   * Optional render-prop for the Variable Name input rendered below the
+   * `from` / `to` color input when the corresponding toggle is on.
+   */
+  renderSubfieldVariableNameInput?: (
+    subfield: "from" | "to",
+  ) => React.ReactNode
 }) => {
   function getLinearGradientString(value: GradientPickerState): string {
     let direction = ""
@@ -222,9 +238,12 @@ const GradientPickerField = ({
       </Popover>
 
       <Box>
-        <FormLabel htmlFor="from_color" fontSize="sm">
-          From Color
-        </FormLabel>
+        <Flex justify="space-between" align="center" mb={2}>
+          <FormLabel htmlFor="from_color" fontSize="sm" mb={0}>
+            From Color
+          </FormLabel>
+          {renderSubfieldVariableToggle?.("from")}
+        </Flex>
         <Input
           size="md"
           value={localValue.from}
@@ -244,12 +263,16 @@ const GradientPickerField = ({
         <Text fontSize="xs" color={errorRed}>
           {errors?.[fieldName]?.from?.message}
         </Text>
+        {renderSubfieldVariableNameInput?.("from")}
       </Box>
 
       <Box>
-        <FormLabel htmlFor="to_color" fontSize="sm">
-          To Color
-        </FormLabel>
+        <Flex justify="space-between" align="center" mb={2}>
+          <FormLabel htmlFor="to_color" fontSize="sm" mb={0}>
+            To Color
+          </FormLabel>
+          {renderSubfieldVariableToggle?.("to")}
+        </Flex>
         <Input
           size="md"
           value={localValue.to}
@@ -269,6 +292,7 @@ const GradientPickerField = ({
         <Text fontSize="xs" color={errorRed}>
           {errors?.[fieldName]?.to?.message}
         </Text>
+        {renderSubfieldVariableNameInput?.("to")}
       </Box>
 
       <Box>

packages/imagekit-editor-dev/src/components/editor/ActionBar.tsx

@@ -39,7 +39,9 @@ export const ActionBar: FC<ActionBarProps> = ({
     originalImageList,
     showOriginal,
     setShowOriginal,
+    _internalState,
   } = useEditorStore()
+  const overlayMode = _internalState.overlayMode
 
   const imageDimensions = useMemo(() => {
     const idx = imageList.findIndex((img) => img === currentImage)
@@ -61,18 +63,20 @@ export const ActionBar: FC<ActionBarProps> = ({
       alignItems="center"
     >
       <HStack spacing={2} flex="1" minW={0} mr={8}>
-        <Button
-          variant="ghost"
-          size="md"
-          fontWeight="normal"
-          leftIcon={<Icon boxSize={4} as={PiImageSquare} />}
-          _hover={{ bg: "gray.100" }}
-          onClick={() => setShowOriginal(!showOriginal)}
-        >
-          {showOriginal ? "Show Transformed" : "Show Original"}
-        </Button>
+        {!overlayMode && (
+          <Button
+            variant="ghost"
+            size="md"
+            fontWeight="normal"
+            leftIcon={<Icon boxSize={4} as={PiImageSquare} />}
+            _hover={{ bg: "gray.100" }}
+            onClick={() => setShowOriginal(!showOriginal)}
+          >
+            {showOriginal ? "Show Transformed" : "Show Original"}
+          </Button>
+        )}
 
-        {viewMode === "list" && imageDimensions && (
+        {!overlayMode && viewMode === "list" && imageDimensions && (
           <>
             <Divider
               orientation="vertical"
@@ -157,6 +161,8 @@ export const ActionBar: FC<ActionBarProps> = ({
               />
             }
             onClick={() => setViewMode(viewMode === "grid" ? "list" : "grid")}
+            isDisabled={overlayMode}
+            visibility={overlayMode ? "hidden" : "visible"}
           />
         </Tooltip>
       </HStack>

packages/imagekit-editor-dev/src/components/editor/ListView.tsx

@@ -18,6 +18,7 @@ export const ListView: FC<ListViewProps> = ({ onAddImage }) => {
     setImageDimensions,
     _internalState,
   } = useEditorStore()
+  const overlayMode = _internalState.overlayMode
 
   return (
     <>
@@ -68,12 +69,14 @@ export const ListView: FC<ListViewProps> = ({ onAddImage }) => {
           />
         </Flex>
       </Flex>
-      <Toolbar
-        onAddImage={onAddImage}
-        onSelectImage={(imageSrc: string) => {
-          setCurrentImage(imageSrc)
-        }}
-      />
+      {!overlayMode && (
+        <Toolbar
+          onAddImage={onAddImage}
+          onSelectImage={(imageSrc: string) => {
+            setCurrentImage(imageSrc)
+          }}
+        />
+      )}
     </>
   )
 }

packages/imagekit-editor-dev/src/components/editor/layout.tsx

@@ -2,6 +2,7 @@ import { Box, Flex } from "@chakra-ui/react"
 import { useEffect, useState } from "react"
 import { useAutoSaveTemplate } from "../../hooks/useAutoSaveTemplate"
 import { useSaveTemplate } from "../../hooks/useSaveTemplate"
+import { useEditorStore } from "../../store"
 import { Header, type HeaderProps } from "../header"
 import { Sidebar } from "../sidebar"
 import { TemplatesLibraryView } from "../templates/TemplatesLibraryView"
@@ -19,6 +20,8 @@ export function EditorLayout({ onAddImage, onClose, exportOptions }: Props) {
   const [viewMode, setViewMode] = useState<"list" | "grid">("list")
   const [gridImageSize, setGridImageSize] = useState<number>(300)
   const [isTemplatesOpen, setIsTemplatesOpen] = useState(false)
+  const overlayMode = useEditorStore((s) => s._internalState.overlayMode)
+  const effectiveViewMode: "list" | "grid" = overlayMode ? "list" : viewMode
 
   // Close templates modal on Escape while it's open
   useEffect(() => {
@@ -56,13 +59,13 @@ export function EditorLayout({ onAddImage, onClose, exportOptions }: Props) {
           position="relative"
         >
           <ActionBar
-            viewMode={viewMode}
+            viewMode={effectiveViewMode}
             setViewMode={setViewMode}
             gridImageSize={gridImageSize}
             setGridImageSize={setGridImageSize}
           />
-          {viewMode === "list" && <ListView onAddImage={onAddImage} />}
-          {viewMode === "grid" && (
+          {effectiveViewMode === "list" && <ListView onAddImage={onAddImage} />}
+          {effectiveViewMode === "grid" && (
             <GridView imageSize={gridImageSize} onAddImage={onAddImage} />
           )}
         </Flex>