feat: creative automation

Author: abhinavr4

examples/react-example/src/index.tsx

@@ -254,6 +254,9 @@ function App() {
         return Promise.resolve(request.url)
       },
       templateStorage: createLocalTemplateStorage(),
+      initialTemplateId:
+        new URLSearchParams(window.location.search).get("templateId") ??
+        undefined,
     })
   }, [handleAddImage])
 

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

@@ -222,6 +222,36 @@ function ImageKitEditorImpl<M extends RequiredMetadata>(
     })
   }, [initialImages, signer, focusObjects, initialize])
 
+  // Load template by ID when initialTemplateId is provided or changes
+  const lastLoadedTemplateIdRef = React.useRef<string | null>(null)
+  React.useEffect(() => {
+    if (!props.initialTemplateId || !resolvedProvider) return
+    // Skip if we already loaded this exact template
+    if (lastLoadedTemplateIdRef.current === props.initialTemplateId) return
+    lastLoadedTemplateIdRef.current = props.initialTemplateId
+
+    let cancelled = false
+    resolvedProvider
+      .getTemplate(props.initialTemplateId)
+      .then((record) => {
+        if (cancelled || !record) return
+        loadTemplate(record.transformations)
+        useEditorStore.getState().hydrateTemplateMetadata({
+          templateId: record.id,
+          templateName: record.name,
+          templateIsPrivate:
+            typeof record.isPrivate === "boolean" ? record.isPrivate : null,
+        })
+      })
+      .catch((err) => {
+        if (cancelled) return
+        console.error("Failed to load initial template:", err)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [props.initialTemplateId, resolvedProvider, loadTemplate])
+
   useImperativeHandle(
     ref,
     () => ({

packages/imagekit-editor-dev/src/components/sidebar/VariableChip.tsx

@@ -0,0 +1,92 @@
+import {
+  Badge,
+  Box,
+  Flex,
+  IconButton,
+  Input,
+  Text,
+  Tooltip,
+} from "@chakra-ui/react"
+import { PiBracketsCurly } from "@react-icons/all-files/pi/PiBracketsCurly"
+import { PiX } from "@react-icons/all-files/pi/PiX"
+import { type FC } from "react"
+
+interface Props {
+  /** The variable label (human-readable). */
+  label: string
+  /** The variable's stable name (`$var`). Shown for reference. */
+  name: string
+  /** Optional default value the variable resolves to when no override exists. */
+  defaultValue: unknown
+  /** Called with the new default value when the user edits it inline. */
+  onDefaultValueChange: (next: string) => void
+  /** Remove the variable marker and restore the field to a plain input. */
+  onRemove: () => void
+}
+
+/**
+ * Renders in place of a regular field input when the field has been bound to
+ * a template variable. Shows the variable label/name, lets the user edit the
+ * default value inline, and offers a "remove variable" affordance.
+ */
+export const VariableChip: FC<Props> = ({
+  label,
+  name,
+  defaultValue,
+  onDefaultValueChange,
+  onRemove,
+}) => {
+  const defaultStr =
+    defaultValue == null || typeof defaultValue === "object"
+      ? ""
+      : String(defaultValue)
+
+  return (
+    <Box
+      borderWidth="1px"
+      borderColor="editorBlue.300"
+      bg="editorBlue.50"
+      borderRadius="md"
+      px={2}
+      py={2}
+    >
+      <Flex align="center" justify="space-between" mb={1}>
+        <Flex align="center" gap={1.5} minW={0}>
+          <PiBracketsCurly />
+          <Tooltip label={`{{${name}}}`} hasArrow placement="top">
+            <Badge
+              colorScheme="blue"
+              fontSize="xs"
+              textTransform="none"
+              maxW="180px"
+              overflow="hidden"
+              textOverflow="ellipsis"
+              whiteSpace="nowrap"
+            >
+              {label}
+            </Badge>
+          </Tooltip>
+        </Flex>
+        <Tooltip label="Remove variable" hasArrow placement="top">
+          <IconButton
+            aria-label="Remove variable"
+            icon={<PiX />}
+            size="xs"
+            variant="ghost"
+            onClick={onRemove}
+          />
+        </Tooltip>
+      </Flex>
+      <Text fontSize="xs" color="gray.600" mb={1}>
+        Default value
+      </Text>
+      <Input
+        size="sm"
+        value={defaultStr}
+        onChange={(e) => onDefaultValueChange(e.target.value)}
+        placeholder="No default — leave empty"
+        bg="white"
+      />
+    </Box>
+  )
+}

packages/imagekit-editor-dev/src/components/sidebar/VariableMarkerButton.tsx

@@ -41,31 +41,44 @@ export function canBeVariable(fieldType: string | undefined): boolean {
 interface Props {
   fieldLabel: string
   takenNames: Iterable<string>
-  onCreate: (variable: { name: string; label: string }) => void
+  /** Current value of the field, used to seed the default-value input. */
+  currentValue?: unknown
+  onCreate: (variable: {
+    name: string
+    label: string
+    defaultValue: string
+  }) => void
 }
 
 /**
  * A small button shown next to field labels in the sidebar. Clicking opens
- * a popover to name the variable. On save, it generates a collision-free
- * name and calls onCreate.
+ * a popover to name the variable and (optionally) supply a default value
+ * rendered when no row override exists.
  */
 export const VariableMarkerButton: FC<Props> = ({
   fieldLabel,
   takenNames,
+  currentValue,
   onCreate,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [label, setLabel] = useState(fieldLabel)
+  const [defaultValue, setDefaultValue] = useState("")
 
   const handleOpen = useCallback(() => {
     setLabel(fieldLabel)
+    setDefaultValue(
+      currentValue == null || typeof currentValue === "object"
+        ? ""
+        : String(currentValue),
+    )
     onOpen()
-  }, [fieldLabel, onOpen])
+  }, [fieldLabel, currentValue, onOpen])
 
   const handleSave = () => {
     const trimmed = label.trim() || fieldLabel
     const name = generateVariableName(trimmed, takenNames)
-    onCreate({ name, label: trimmed })
+    onCreate({ name, label: trimmed, defaultValue: defaultValue.trim() })
     onClose()
   }
 
@@ -82,7 +95,7 @@ export const VariableMarkerButton: FC<Props> = ({
           onClick={handleOpen}
         />
       </PopoverTrigger>
-      <PopoverContent w="260px">
+      <PopoverContent w="280px">
         <PopoverBody p={3}>
           <Flex justify="space-between" align="center" mb={2}>
             <Text fontSize="sm" fontWeight="600">
@@ -96,7 +109,7 @@ export const VariableMarkerButton: FC<Props> = ({
               onClick={onClose}
             />
           </Flex>
-          <FormControl>
+          <FormControl mb={2}>
             <FormLabel fontSize="xs">Label</FormLabel>
             <Input
               size="sm"
@@ -108,6 +121,18 @@ export const VariableMarkerButton: FC<Props> = ({
               }}
             />
           </FormControl>
+          <FormControl>
+            <FormLabel fontSize="xs">Default value</FormLabel>
+            <Input
+              size="sm"
+              value={defaultValue}
+              onChange={(e) => setDefaultValue(e.target.value)}
+              placeholder="Optional — used when no row override is supplied"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleSave()
+              }}
+            />
+          </FormControl>
           <Button
             size="sm"
             colorScheme="blue"

packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx

@@ -54,11 +54,13 @@ import {
 } from "../../schema"
 import { type SyncStatus, useEditorStore } from "../../store"
 import { isStepAligned } from "../../utils"
-import { walkVariableRefs } from "../../variables"
+import { isVariableRef, walkVariableRefs, type VariableRef } from "../../variables"
+import { makeVariableAwareResolver } from "../../variables/resolver"
 import AnchorField from "../common/AnchorField"
 import CheckboxCardField from "../common/CheckboxCardField"
 import ColorPickerField from "../common/ColorPickerField"
 import { canBeVariable, VariableMarkerButton } from "./VariableMarkerButton"
+import { VariableChip } from "./VariableChip"
 import RadiusInputField, {
   type RadiusErrors,
   type RadiusState,
@@ -248,7 +250,9 @@ export const TransformationConfigSidebar: React.FC = () => {
     control,
     trigger,
   } = useForm<Record<string, unknown>>({
-    resolver: zodResolver(selectedTransformation?.schema ?? z.object({})),
+    resolver: makeVariableAwareResolver(
+      zodResolver(selectedTransformation?.schema ?? z.object({})),
+    ),
     defaultValues: defaultValues,
   })
 
@@ -579,17 +583,55 @@ export const TransformationConfigSidebar: React.FC = () => {
                 <FormLabel htmlFor={field.name} fontSize="sm" mb={0}>
                   {field.label}
                 </FormLabel>
-                {canBeVariable(field.fieldType) && (
+                {canBeVariable(field.fieldType) && !isVariableRef(values[field.name]) && (
                   <VariableMarkerButton
                     fieldLabel={field.label}
                     takenNames={takenVariableNames}
+                    currentValue={values[field.name]}
                     onCreate={(variable) => {
-                      setValue(field.name, { $var: variable.name, label: variable.label } as any, { shouldDirty: true })
+                      setValue(
+                        field.name,
+                        {
+                          $var: variable.name,
+                          label: variable.label,
+                          ...(variable.defaultValue
+                            ? { defaultValue: variable.defaultValue }
+                            : {}),
+                        } as any,
+                        { shouldDirty: true },
+                      )
                     }}
                   />
                 )}
               </HStack>
-              {field.fieldType === "select" ? (
+              {isVariableRef(values[field.name]) ? (
+                <VariableChip
+                  label={(values[field.name] as VariableRef).label}
+                  name={(values[field.name] as VariableRef).$var}
+                  defaultValue={(values[field.name] as VariableRef).defaultValue}
+                  onDefaultValueChange={(next) => {
+                    const ref = values[field.name] as VariableRef
+                    setValue(
+                      field.name,
+                      {
+                        $var: ref.$var,
+                        label: ref.label,
+                        ...(next ? { defaultValue: next } : {}),
+                      } as any,
+                      { shouldDirty: true },
+                    )
+                  }}
+                  onRemove={() => {
+                    const ref = values[field.name] as VariableRef
+                    const restored =
+                      ref.defaultValue != null && typeof ref.defaultValue !== "object"
+                        ? ref.defaultValue
+                        : (field.fieldProps?.defaultValue ?? "")
+                    setValue(field.name, restored as any, { shouldDirty: true })
+                  }}
+                />
+              ) : null}
+              {!isVariableRef(values[field.name]) && field.fieldType === "select" ? (
                 <Controller
                   name={field.name}
                   control={control}
@@ -692,7 +734,7 @@ export const TransformationConfigSidebar: React.FC = () => {
                   }}
                 />
               ) : null}
-              {field.fieldType === "select-creatable" ? (
+              {!isVariableRef(values[field.name]) && field.fieldType === "select-creatable" ? (
                 <Controller
                   name={field.name}
                   control={control}
@@ -732,7 +774,7 @@ export const TransformationConfigSidebar: React.FC = () => {
                   )}
                 />
               ) : null}
-              {field.fieldType === "input" ? (
+              {!isVariableRef(values[field.name]) && field.fieldType === "input" ? (
                 <Input
                   id={field.name}
                   fontSize="sm"
@@ -755,22 +797,22 @@ export const TransformationConfigSidebar: React.FC = () => {
                   }
                 />
               ) : null}
-              {field.fieldType === "textarea" ? (
+              {!isVariableRef(values[field.name]) && field.fieldType === "textarea" ? (
                 <Textarea
                   id={field.name}
                   fontSize="sm"
                   {...register(field.name)}
                 />
               ) : null}
-              {field.fieldType === "switch" ? (
+              {!isVariableRef(values[field.name]) && field.fieldType === "switch" ? (
                 <Switch
                   id={field.name}
                   fontSize="sm"
                   isChecked={watch(field.name) === true}
                   {...register(field.name)}
                 />
               ) : null}
-              {field.fieldType === "slider" ? (
+              {!isVariableRef(values[field.name]) && field.fieldType === "slider" ? (
                 <Box pt={2} pb={2}>
                   <Flex justify="space-between" mb={1}>
                     <Input
@@ -935,7 +977,7 @@ export const TransformationConfigSidebar: React.FC = () => {
                   </Slider>
                 </Box>
               ) : null}
-              {field.fieldType === "color-picker" ? (
+              {!isVariableRef(values[field.name]) && field.fieldType === "color-picker" ? (
                 <ColorPickerField
                   fieldName={field.name}
                   value={watch(field.name) as string}
@@ -974,7 +1016,7 @@ export const TransformationConfigSidebar: React.FC = () => {
                   }
                 />
               ) : null}
-              {field.fieldType === "radio-card" ? (
+              {!isVariableRef(values[field.name]) && field.fieldType === "radio-card" ? (
                 <RadioCardField
                   value={watch(field.name) as string}
                   options={field.fieldProps?.options ?? []}
@@ -987,7 +1029,7 @@ export const TransformationConfigSidebar: React.FC = () => {
                   {...field.fieldProps}
                 />
               ) : null}
-              {field.fieldType === "checkbox-card" ? (
+              {!isVariableRef(values[field.name]) && field.fieldType === "checkbox-card" ? (
                 <CheckboxCardField
                   value={watch(field.name) as string[]}
                   options={field.fieldProps?.options ?? []}