@open-mercato/core 0.6.6-develop.6176.1.4507b99c2f → 0.6.6-develop.6198.1.0822f97cc6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/dist/modules/auth/frontend/login.js +5 -5
  3. package/dist/modules/auth/frontend/login.js.map +2 -2
  4. package/dist/modules/catalog/backend/catalog/products/MerchandisingAssistantSheet.js +3 -2
  5. package/dist/modules/catalog/backend/catalog/products/MerchandisingAssistantSheet.js.map +2 -2
  6. package/dist/modules/catalog/widgets/injection/product-seo/widget.client.js +26 -14
  7. package/dist/modules/catalog/widgets/injection/product-seo/widget.client.js.map +2 -2
  8. package/dist/modules/customers/api/deals/[id]/route.js +169 -149
  9. package/dist/modules/customers/api/deals/[id]/route.js.map +3 -3
  10. package/dist/modules/customers/components/detail/InlineEditors.js +9 -4
  11. package/dist/modules/customers/components/detail/InlineEditors.js.map +2 -2
  12. package/dist/modules/integrations/backend/integrations/[id]/page.js +13 -9
  13. package/dist/modules/integrations/backend/integrations/[id]/page.js.map +2 -2
  14. package/dist/modules/integrations/backend/integrations/detail-page-refresh.js +17 -0
  15. package/dist/modules/integrations/backend/integrations/detail-page-refresh.js.map +7 -0
  16. package/dist/modules/sales/components/documents/SalesDocumentForm.js +299 -297
  17. package/dist/modules/sales/components/documents/SalesDocumentForm.js.map +2 -2
  18. package/dist/modules/workflows/components/EdgeEditDialog.js +120 -141
  19. package/dist/modules/workflows/components/EdgeEditDialog.js.map +2 -2
  20. package/dist/modules/workflows/components/NodeEditDialog.js +114 -118
  21. package/dist/modules/workflows/components/NodeEditDialog.js.map +2 -2
  22. package/dist/modules/workflows/frontend/checkout-demo/page.js +155 -260
  23. package/dist/modules/workflows/frontend/checkout-demo/page.js.map +2 -2
  24. package/package.json +7 -7
  25. package/src/modules/auth/frontend/login.tsx +5 -5
  26. package/src/modules/catalog/backend/catalog/products/MerchandisingAssistantSheet.tsx +4 -3
  27. package/src/modules/catalog/widgets/injection/product-seo/widget.client.tsx +27 -17
  28. package/src/modules/customers/api/deals/[id]/route.ts +208 -174
  29. package/src/modules/customers/components/detail/InlineEditors.tsx +6 -10
  30. package/src/modules/integrations/backend/integrations/[id]/page.tsx +13 -9
  31. package/src/modules/integrations/backend/integrations/detail-page-refresh.ts +36 -0
  32. package/src/modules/sales/components/documents/SalesDocumentForm.tsx +351 -327
  33. package/src/modules/workflows/components/EdgeEditDialog.tsx +132 -157
  34. package/src/modules/workflows/components/NodeEditDialog.tsx +116 -121
  35. package/src/modules/workflows/frontend/checkout-demo/page.tsx +172 -239
  36. package/src/modules/workflows/i18n/de.json +2 -0
  37. package/src/modules/workflows/i18n/en.json +2 -0
  38. package/src/modules/workflows/i18n/es.json +2 -0
  39. package/src/modules/workflows/i18n/pl.json +2 -0
package/src/modules/workflows/components/NodeEditDialog.tsx CHANGED
@@ -5,6 +5,8 @@ import {useEffect, useState} from 'react'
5
5
  import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle} from '@open-mercato/ui/primitives/dialog'
6
6
  import {Button} from '@open-mercato/ui/primitives/button'
7
7
  import {Input} from '@open-mercato/ui/primitives/input'
8
+ import {Textarea} from '@open-mercato/ui/primitives/textarea'
9
+ import {Checkbox} from '@open-mercato/ui/primitives/checkbox'
8
10
  import {Badge} from '@open-mercato/ui/primitives/badge'
9
11
  import {
10
12
  Select,
@@ -287,7 +289,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
287
289
  required: false,
288
290
  placeholder: '',
289
291
  }
290
- setFormFields([...formFields, newField])
292
+ setFormFields(prev => [...prev, newField])
291
293
  // Auto-expand the new field
292
294
  const newExpanded = new Set(expandedFields)
293
295
  newExpanded.add(formFields.length)
@@ -300,7 +302,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
300
302
  variant: 'destructive',
301
303
  })
302
304
  if (confirmed) {
303
- setFormFields(formFields.filter((_, i) => i !== index))
305
+ setFormFields(prev => prev.filter((_, i) => i !== index))
304
306
  const newExpanded = new Set(expandedFields)
305
307
  newExpanded.delete(index)
306
308
  setExpandedFields(newExpanded)
@@ -562,7 +564,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
562
564
  <div className="space-y-4">
563
565
  {/* Step Name */}
564
566
  <div>
565
- <label className="block text-sm font-medium text-gray-700 mb-1">
567
+ <label className="block text-sm font-medium text-foreground mb-1">
566
568
  {t('workflows.form.stepName')} *
567
569
  </label>
568
570
  <Input
@@ -572,24 +574,23 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
572
574
  placeholder={t('workflows.form.placeholders.stepName')}
573
575
  autoFocus
574
576
  />
575
- <p className="text-xs text-gray-500 mt-1">
577
+ <p className="text-xs text-muted-foreground mt-1">
576
578
  {t('workflows.form.descriptions.stepName')}
577
579
  </p>
578
580
  </div>
579
581
 
580
582
  {/* Description */}
581
583
  <div>
582
- <label className="block text-sm font-medium text-gray-700 mb-1">
584
+ <label className="block text-sm font-medium text-foreground mb-1">
583
585
  {t('workflows.form.description')}
584
586
  </label>
585
- <textarea
587
+ <Textarea
586
588
  value={description}
587
589
  onChange={(e) => setDescription(e.target.value)}
588
590
  placeholder={t('workflows.form.placeholders.description')}
589
591
  rows={3}
590
- className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
591
592
  />
592
- <p className="text-xs text-gray-500 mt-1">
593
+ <p className="text-xs text-muted-foreground mt-1">
593
594
  {t('workflows.form.descriptions.description')}
594
595
  </p>
595
596
  </div>
@@ -598,7 +599,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
598
599
  (waitForTimer uses duration/until, waitForSignal uses signalConfig.timeout). */}
599
600
  {node.type !== 'waitForSignal' && node.type !== 'waitForTimer' && (
600
601
  <div>
601
- <label className="block text-sm font-medium text-gray-700 mb-1">
602
+ <label className="block text-sm font-medium text-foreground mb-1">
602
603
  {t('workflows.form.timeout')}
603
604
  </label>
604
605
  <Input
@@ -607,7 +608,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
607
608
  onChange={(e) => setTimeout(e.target.value)}
608
609
  placeholder={t('workflows.form.placeholders.timeout')}
609
610
  />
610
- <p className="text-xs text-gray-500 mt-1">
611
+ <p className="text-xs text-muted-foreground mt-1">
611
612
  {t('workflows.form.descriptions.timeout')}
612
613
  </p>
613
614
  </div>
@@ -616,14 +617,14 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
616
617
  {/* User Task Configuration */}
617
618
  {node.type === 'userTask' && (
618
619
  <>
619
- <div className="border-t border-gray-200 pt-4 mt-4">
620
+ <div className="border-t border-border pt-4 mt-4">
620
621
  <h3 className="text-sm font-semibold text-foreground mb-3">
621
622
  {t('workflows.nodeEditor.userTaskConfig')}
622
623
  </h3>
623
624
  </div>
624
625
 
625
626
  <div>
626
- <label className="block text-sm font-medium text-gray-700 mb-1">
627
+ <label className="block text-sm font-medium text-foreground mb-1">
627
628
  {t('workflows.form.assignedTo')}
628
629
  </label>
629
630
  <Input
@@ -632,13 +633,13 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
632
633
  onChange={(e) => setAssignedTo(e.target.value)}
633
634
  placeholder={t('workflows.form.placeholders.userId')}
634
635
  />
635
- <p className="text-xs text-gray-500 mt-1">
636
+ <p className="text-xs text-muted-foreground mt-1">
636
637
  {t('workflows.form.descriptions.assignedTo')}
637
638
  </p>
638
639
  </div>
639
640
 
640
641
  <div>
641
- <label className="block text-sm font-medium text-gray-700 mb-1">
642
+ <label className="block text-sm font-medium text-foreground mb-1">
642
643
  {t('workflows.form.assignedToRoles')}
643
644
  </label>
644
645
  <Input
@@ -647,13 +648,13 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
647
648
  onChange={(e) => setAssignedToRoles(e.target.value)}
648
649
  placeholder={t('workflows.form.placeholders.roles')}
649
650
  />
650
- <p className="text-xs text-gray-500 mt-1">
651
+ <p className="text-xs text-muted-foreground mt-1">
651
652
  {t('workflows.form.descriptions.assignedToRoles')}
652
653
  </p>
653
654
  </div>
654
655
 
655
656
  <div>
656
- <label className="block text-sm font-medium text-gray-700 mb-1">
657
+ <label className="block text-sm font-medium text-foreground mb-1">
657
658
  {t('workflows.form.formKey')}
658
659
  </label>
659
660
  <Input
@@ -662,19 +663,19 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
662
663
  onChange={(e) => setFormKey(e.target.value)}
663
664
  placeholder={t('workflows.form.placeholders.formKey')}
664
665
  />
665
- <p className="text-xs text-gray-500 mt-1">
666
+ <p className="text-xs text-muted-foreground mt-1">
666
667
  {t('workflows.form.descriptions.formKey')}
667
668
  </p>
668
669
  </div>
669
670
 
670
671
  {/* Form Schema Builder */}
671
- <div className="border-t border-gray-200 pt-4 mt-4">
672
+ <div className="border-t border-border pt-4 mt-4">
672
673
  <div className="flex items-center justify-between mb-3">
673
674
  <div>
674
675
  <h3 className="text-sm font-semibold text-foreground">
675
676
  {t('workflows.form.formFields', { count: formFields.length })}
676
677
  </h3>
677
- <p className="text-xs text-gray-500 mt-0.5">
678
+ <p className="text-xs text-muted-foreground mt-0.5">
678
679
  {t('workflows.form.descriptions.formFields')}
679
680
  </p>
680
681
  </div>
@@ -698,7 +699,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
698
699
  )}
699
700
 
700
701
  {formFields.length === 0 && (
701
- <div className="p-4 text-center text-sm text-gray-500 bg-gray-50 rounded-lg border border-gray-200">
702
+ <div className="p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border border-border">
702
703
  {t('workflows.nodeEditor.noFormFields')}
703
704
  </div>
704
705
  )}
@@ -707,11 +708,12 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
707
708
  {formFields.map((field, index) => {
708
709
  const isExpanded = expandedFields.has(index)
709
710
  return (
710
- <div key={index} className="border border-gray-200 rounded-lg bg-gray-50">
711
- <button
711
+ <div key={index} className="border border-border rounded-lg bg-muted">
712
+ <Button
712
713
  type="button"
714
+ variant="ghost"
713
715
  onClick={() => toggleFieldExpanded(index)}
714
- className="w-full px-4 py-3 text-left flex items-center justify-between hover:bg-gray-100 transition-colors rounded-t-lg"
716
+ className="h-auto w-full justify-between rounded-t-lg px-4 py-3 text-left hover:bg-muted/80"
715
717
  >
716
718
  <div className="flex-1">
717
719
  <div className="flex items-center gap-2">
@@ -722,25 +724,25 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
722
724
  {field.type}
723
725
  </Badge>
724
726
  {field.required && (
725
- <Badge variant="destructive" className="text-xs text-white">
727
+ <Badge variant="destructive" className="text-xs">
726
728
  {t('workflows.form.required')}
727
729
  </Badge>
728
730
  )}
729
731
  </div>
730
- <p className="text-xs text-gray-600 mt-1">
731
- Field name: <code className="bg-white px-1 rounded">{field.name}</code>
732
+ <p className="text-xs text-muted-foreground mt-1">
733
+ Field name: <code className="bg-background px-1 rounded">{field.name}</code>
732
734
  </p>
733
735
  </div>
734
736
  <ChevronDown
735
- className={`w-5 h-5 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
737
+ className={`size-5 text-muted-foreground transition-transform ${isExpanded ? 'rotate-180' : ''}`}
736
738
  />
737
- </button>
739
+ </Button>
738
740
 
739
741
  {isExpanded && (
740
- <div className="px-4 pb-4 space-y-3 border-t border-gray-200 bg-white">
742
+ <div className="px-4 pb-4 space-y-3 border-t border-border bg-background">
741
743
  {/* Field Name */}
742
744
  <div className="pt-3">
743
- <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.fieldName')} *</label>
745
+ <label className="block text-xs font-medium text-foreground mb-1">{t('workflows.form.fieldName')} *</label>
744
746
  <Input
745
747
  type="text"
746
748
  size="sm"
@@ -748,12 +750,12 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
748
750
  onChange={(e) => updateFormField(index, 'name', e.target.value)}
749
751
  placeholder={t('workflows.form.placeholders.fieldName')}
750
752
  />
751
- <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.fieldName')}</p>
753
+ <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.form.descriptions.fieldName')}</p>
752
754
  </div>
753
755
 
754
756
  {/* Field Label */}
755
757
  <div>
756
- <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.fieldLabel')} *</label>
758
+ <label className="block text-xs font-medium text-foreground mb-1">{t('workflows.form.fieldLabel')} *</label>
757
759
  <Input
758
760
  type="text"
759
761
  size="sm"
@@ -761,12 +763,12 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
761
763
  onChange={(e) => updateFormField(index, 'label', e.target.value)}
762
764
  placeholder={t('workflows.form.placeholders.fieldLabel')}
763
765
  />
764
- <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.fieldLabel')}</p>
766
+ <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.form.descriptions.fieldLabel')}</p>
765
767
  </div>
766
768
 
767
769
  {/* Field Type */}
768
770
  <div>
769
- <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.fieldType')} *</label>
771
+ <label className="block text-xs font-medium text-foreground mb-1">{t('workflows.form.fieldType')} *</label>
770
772
  <Select
771
773
  value={field.type}
772
774
  onValueChange={(value) => updateFormField(index, 'type', value)}
@@ -793,7 +795,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
793
795
 
794
796
  {/* Placeholder */}
795
797
  <div>
796
- <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.placeholder')}</label>
798
+ <label className="block text-xs font-medium text-foreground mb-1">{t('workflows.form.placeholder')}</label>
797
799
  <Input
798
800
  type="text"
799
801
  size="sm"
@@ -805,7 +807,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
805
807
 
806
808
  {/* Default Value */}
807
809
  <div>
808
- <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.defaultValue')}</label>
810
+ <label className="block text-xs font-medium text-foreground mb-1">{t('workflows.form.defaultValue')}</label>
809
811
  <Input
810
812
  type="text"
811
813
  size="sm"
@@ -818,7 +820,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
818
820
  {/* Options (for select/radio) */}
819
821
  {(field.type === 'select' || field.type === 'radio') && (
820
822
  <div>
821
- <label className="block text-xs font-medium text-gray-700 mb-1">{t('workflows.form.options')}</label>
823
+ <label className="block text-xs font-medium text-foreground mb-1">{t('workflows.form.options')}</label>
822
824
  <Input
823
825
  type="text"
824
826
  size="sm"
@@ -826,25 +828,23 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
826
828
  onChange={(e) => updateFormField(index, 'options', e.target.value.split(',').map(o => o.trim()).filter(Boolean))}
827
829
  placeholder={t('workflows.form.placeholders.options')}
828
830
  />
829
- <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.options')}</p>
831
+ <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.form.descriptions.options')}</p>
830
832
  </div>
831
833
  )}
832
834
 
833
835
  {/* Required Checkbox */}
834
836
  <div>
835
- <label className="flex items-center gap-2 text-xs font-medium text-gray-700">
836
- <input
837
- type="checkbox"
837
+ <label className="flex items-center gap-2 text-xs font-medium text-foreground">
838
+ <Checkbox
838
839
  checked={field.required}
839
- onChange={(e) => updateFormField(index, 'required', e.target.checked)}
840
- className="rounded border-gray-300 text-blue-600 focus-visible:ring-ring"
840
+ onCheckedChange={(checked) => updateFormField(index, 'required', checked === true)}
841
841
  />
842
842
  {t('workflows.form.requiredField')}
843
843
  </label>
844
844
  </div>
845
845
 
846
846
  {/* Delete Button */}
847
- <div className="border-t border-gray-200 pt-3">
847
+ <div className="border-t border-border pt-3">
848
848
  <Button
849
849
  type="button"
850
850
  variant="destructive"
@@ -868,13 +868,13 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
868
868
  {/* Automated Step Activities */}
869
869
  {node.type === 'automated' && (
870
870
  <>
871
- <div className="border-t border-gray-200 pt-4 mt-4">
871
+ <div className="border-t border-border pt-4 mt-4">
872
872
  <div className="flex items-center justify-between mb-3">
873
873
  <div>
874
874
  <h3 className="text-sm font-semibold text-foreground">
875
875
  {t('workflows.form.stepActivities', { count: stepActivities.length })}
876
876
  </h3>
877
- <p className="text-xs text-gray-500 mt-0.5">
877
+ <p className="text-xs text-muted-foreground mt-0.5">
878
878
  {t('workflows.form.descriptions.activities')}
879
879
  </p>
880
880
  </div>
@@ -900,7 +900,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
900
900
  </div>
901
901
 
902
902
  {stepActivities.length === 0 && (
903
- <div className="p-4 text-center text-sm text-gray-500 bg-gray-50 rounded-lg border border-gray-200">
903
+ <div className="p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border border-border">
904
904
  {t('workflows.nodeEditor.noActivities')}
905
905
  </div>
906
906
  )}
@@ -909,10 +909,11 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
909
909
  {stepActivities.map((activity, index) => {
910
910
  const isExpanded = expandedStepActivities.has(index)
911
911
  return (
912
- <div key={index} className="border border-gray-200 rounded-lg bg-gray-50">
912
+ <div key={index} className="border border-border rounded-lg bg-muted">
913
913
  {/* Activity Header (Collapsed) */}
914
- <button
914
+ <Button
915
915
  type="button"
916
+ variant="ghost"
916
917
  onClick={() => {
917
918
  const newExpanded = new Set(expandedStepActivities)
918
919
  if (isExpanded) {
@@ -922,7 +923,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
922
923
  }
923
924
  setExpandedStepActivities(newExpanded)
924
925
  }}
925
- className="w-full px-4 py-3 text-left flex items-center justify-between hover:bg-gray-100 transition-colors rounded-t-lg"
926
+ className="h-auto w-full justify-between rounded-t-lg px-4 py-3 text-left hover:bg-muted/80"
926
927
  >
927
928
  <div className="flex-1">
928
929
  <div className="flex items-center gap-2">
@@ -938,21 +939,21 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
938
939
  </Badge>
939
940
  )}
940
941
  </div>
941
- <p className="text-xs text-gray-600 mt-1">
942
- ID: <code className="bg-white px-1 rounded">{activity.activityId}</code>
942
+ <p className="text-xs text-muted-foreground mt-1">
943
+ ID: <code className="bg-background px-1 rounded">{activity.activityId}</code>
943
944
  </p>
944
945
  </div>
945
946
  <ChevronDown
946
- className={`w-5 h-5 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
947
+ className={`size-5 text-muted-foreground transition-transform ${isExpanded ? 'rotate-180' : ''}`}
947
948
  />
948
- </button>
949
+ </Button>
949
950
 
950
951
  {/* Activity Body (Expanded) */}
951
952
  {isExpanded && (
952
- <div className="px-4 pb-4 space-y-3 border-t border-gray-200 bg-white">
953
+ <div className="px-4 pb-4 space-y-3 border-t border-border bg-background">
953
954
  {/* Activity ID */}
954
955
  <div className="pt-3">
955
- <label className="block text-xs font-medium text-gray-700 mb-1">
956
+ <label className="block text-xs font-medium text-foreground mb-1">
956
957
  {t('workflows.form.activityId')} *
957
958
  </label>
958
959
  <Input
@@ -970,7 +971,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
970
971
 
971
972
  {/* Activity Name */}
972
973
  <div>
973
- <label className="block text-xs font-medium text-gray-700 mb-1">
974
+ <label className="block text-xs font-medium text-foreground mb-1">
974
975
  {t('workflows.form.activityName')} *
975
976
  </label>
976
977
  <Input
@@ -988,7 +989,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
988
989
 
989
990
  {/* Activity Type */}
990
991
  <div>
991
- <label className="block text-xs font-medium text-gray-700 mb-1">
992
+ <label className="block text-xs font-medium text-foreground mb-1">
992
993
  {t('workflows.form.activityType')} *
993
994
  </label>
994
995
  <Select
@@ -1016,7 +1017,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1016
1017
 
1017
1018
  {/* Timeout */}
1018
1019
  <div>
1019
- <label className="block text-xs font-medium text-gray-700 mb-1">
1020
+ <label className="block text-xs font-medium text-foreground mb-1">
1020
1021
  {t('workflows.form.timeout')}
1021
1022
  </label>
1022
1023
  <Input
@@ -1030,17 +1031,17 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1030
1031
  }}
1031
1032
  placeholder={t('workflows.form.placeholders.timeoutMs')}
1032
1033
  />
1033
- <p className="text-xs text-gray-500 mt-1">{t('workflows.form.descriptions.timeoutMs')}</p>
1034
+ <p className="text-xs text-muted-foreground mt-1">{t('workflows.form.descriptions.timeoutMs')}</p>
1034
1035
  </div>
1035
1036
 
1036
1037
  {/* Retry Policy Grid */}
1037
- <div className="border border-gray-200 rounded-lg p-3 bg-gray-50">
1038
- <label className="block text-xs font-semibold text-gray-700 mb-2">
1038
+ <div className="border border-border rounded-lg p-3 bg-muted">
1039
+ <label className="block text-xs font-semibold text-foreground mb-2">
1039
1040
  {t('workflows.form.retryPolicy')}
1040
1041
  </label>
1041
1042
  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
1042
1043
  <div>
1043
- <label className="block text-xs text-gray-600 mb-1">{t('workflows.form.maxAttempts')}</label>
1044
+ <label className="block text-xs text-muted-foreground mb-1">{t('workflows.form.maxAttempts')}</label>
1044
1045
  <Input
1045
1046
  type="number"
1046
1047
  size="sm"
@@ -1056,7 +1057,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1056
1057
  />
1057
1058
  </div>
1058
1059
  <div>
1059
- <label className="block text-xs text-gray-600 mb-1">{t('workflows.form.initialInterval')}</label>
1060
+ <label className="block text-xs text-muted-foreground mb-1">{t('workflows.form.initialInterval')}</label>
1060
1061
  <Input
1061
1062
  type="number"
1062
1063
  size="sm"
@@ -1070,7 +1071,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1070
1071
  />
1071
1072
  </div>
1072
1073
  <div>
1073
- <label className="block text-xs text-gray-600 mb-1">{t('workflows.form.backoffCoefficient')}</label>
1074
+ <label className="block text-xs text-muted-foreground mb-1">{t('workflows.form.backoffCoefficient')}</label>
1074
1075
  <Input
1075
1076
  type="number"
1076
1077
  size="sm"
@@ -1085,7 +1086,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1085
1086
  />
1086
1087
  </div>
1087
1088
  <div>
1088
- <label className="block text-xs text-gray-600 mb-1">{t('workflows.form.maxInterval')}</label>
1089
+ <label className="block text-xs text-muted-foreground mb-1">{t('workflows.form.maxInterval')}</label>
1089
1090
  <Input
1090
1091
  type="number"
1091
1092
  size="sm"
@@ -1104,17 +1105,15 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1104
1105
  {/* Activity Flags */}
1105
1106
  <div className="flex gap-4">
1106
1107
  <label className="flex items-center gap-2 cursor-pointer">
1107
- <input
1108
- type="checkbox"
1108
+ <Checkbox
1109
1109
  checked={activity.async || false}
1110
- onChange={(e) => {
1110
+ onCheckedChange={(checked) => {
1111
1111
  const updated = [...stepActivities]
1112
- updated[index].async = e.target.checked
1112
+ updated[index].async = checked === true
1113
1113
  setStepActivities(updated)
1114
1114
  }}
1115
- className="w-4 h-4 text-blue-600 border-gray-300 rounded focus-visible:ring-ring"
1116
1115
  />
1117
- <span className="text-xs text-gray-700">{t('workflows.form.executeAsync')}</span>
1116
+ <span className="text-xs text-foreground">{t('workflows.form.executeAsync')}</span>
1118
1117
  </label>
1119
1118
  </div>
1120
1119
 
@@ -1122,7 +1121,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1122
1121
  {activity.activityType === 'WAIT' && (
1123
1122
  <div className="space-y-3">
1124
1123
  <div>
1125
- <label className="block text-xs font-medium text-gray-700 mb-1">
1124
+ <label className="block text-xs font-medium text-foreground mb-1">
1126
1125
  {t('workflows.activities.waitDuration')}
1127
1126
  </label>
1128
1127
  <Input
@@ -1140,7 +1139,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1140
1139
  </div>
1141
1140
  <div className="text-xs text-center text-muted-foreground">{t('workflows.activities.waitOr')}</div>
1142
1141
  <div>
1143
- <label className="block text-xs font-medium text-gray-700 mb-1">
1142
+ <label className="block text-xs font-medium text-foreground mb-1">
1144
1143
  {t('workflows.activities.waitUntil')}
1145
1144
  </label>
1146
1145
  <Input
@@ -1161,7 +1160,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1161
1160
  {/* Activity Config JSON (hidden for WAIT) */}
1162
1161
  {activity.activityType !== 'WAIT' && (
1163
1162
  <div>
1164
- <label className="block text-xs font-medium text-gray-700 mb-1">
1163
+ <label className="block text-xs font-medium text-foreground mb-1">
1165
1164
  {t('workflows.form.configuration')}
1166
1165
  </label>
1167
1166
  <JsonBuilder
@@ -1172,14 +1171,14 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1172
1171
  setStepActivities(updated)
1173
1172
  }}
1174
1173
  />
1175
- <p className="text-xs text-gray-500 mt-1">
1174
+ <p className="text-xs text-muted-foreground mt-1">
1176
1175
  {t('workflows.form.descriptions.activityConfig')}
1177
1176
  </p>
1178
1177
  </div>
1179
1178
  )}
1180
1179
 
1181
1180
  {/* Delete Button */}
1182
- <div className="pt-3 border-t border-gray-100">
1181
+ <div className="pt-3 border-t border-border">
1183
1182
  <Button
1184
1183
  type="button"
1185
1184
  variant="destructive"
@@ -1208,14 +1207,14 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1208
1207
  {/* Sub-Workflow Configuration (Phase 8) */}
1209
1208
  {node.type === 'subWorkflow' && (
1210
1209
  <>
1211
- <div className="border-t border-gray-200 pt-4 mt-4">
1210
+ <div className="border-t border-border pt-4 mt-4">
1212
1211
  <h3 className="text-sm font-semibold text-foreground mb-3">
1213
1212
  {t('workflows.form.subWorkflowConfig')}
1214
1213
  </h3>
1215
1214
  </div>
1216
1215
 
1217
1216
  <div>
1218
- <label className="block text-sm font-medium text-gray-700 mb-1">
1217
+ <label className="block text-sm font-medium text-foreground mb-1">
1219
1218
  {t('workflows.form.workflowToInvoke')} *
1220
1219
  </label>
1221
1220
  <div className="flex gap-2">
@@ -1235,13 +1234,13 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1235
1234
  {t('workflows.form.browse')}
1236
1235
  </Button>
1237
1236
  </div>
1238
- <p className="text-xs text-gray-500 mt-1">
1237
+ <p className="text-xs text-muted-foreground mt-1">
1239
1238
  {t('workflows.form.descriptions.subWorkflowId')}
1240
1239
  </p>
1241
1240
  </div>
1242
1241
 
1243
1242
  <div>
1244
- <label className="block text-sm font-medium text-gray-700 mb-1">
1243
+ <label className="block text-sm font-medium text-foreground mb-1">
1245
1244
  {t('workflows.form.version')}
1246
1245
  </label>
1247
1246
  <Input
@@ -1250,26 +1249,26 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1250
1249
  onChange={(e) => setSubWorkflowVersion(e.target.value)}
1251
1250
  placeholder={t('workflows.form.placeholders.version')}
1252
1251
  />
1253
- <p className="text-xs text-gray-500 mt-1">
1252
+ <p className="text-xs text-muted-foreground mt-1">
1254
1253
  {t('workflows.form.descriptions.subWorkflowVersion')}
1255
1254
  </p>
1256
1255
  </div>
1257
1256
 
1258
1257
  {/* Input Mapping */}
1259
- <div className="border-t border-gray-200 pt-4 mt-4">
1258
+ <div className="border-t border-border pt-4 mt-4">
1260
1259
  <div className="flex items-center justify-between mb-3">
1261
1260
  <div>
1262
1261
  <h4 className="text-sm font-semibold text-foreground">
1263
1262
  {t('workflows.form.inputMapping', { count: inputMappings.length })}
1264
1263
  </h4>
1265
- <p className="text-xs text-gray-500 mt-0.5">
1264
+ <p className="text-xs text-muted-foreground mt-0.5">
1266
1265
  {t('workflows.form.descriptions.inputMapping')}
1267
1266
  </p>
1268
1267
  </div>
1269
1268
  <Button
1270
1269
  type="button"
1271
1270
  size="sm"
1272
- onClick={() => setInputMappings([...inputMappings, { key: '', value: '' }])}
1271
+ onClick={() => setInputMappings(prev => [...prev, { key: '', value: '' }])}
1273
1272
  >
1274
1273
  <Plus className="size-3 mr-1" />
1275
1274
  {t('workflows.form.addMapping')}
@@ -1277,7 +1276,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1277
1276
  </div>
1278
1277
 
1279
1278
  {inputMappings.length === 0 ? (
1280
- <p className="text-sm text-gray-500 italic">
1279
+ <p className="text-sm text-muted-foreground italic">
1281
1280
  {t('workflows.nodeEditor.noInputMappings')}
1282
1281
  </p>
1283
1282
  ) : (
@@ -1295,9 +1294,9 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1295
1294
  }}
1296
1295
  placeholder={t('workflows.form.placeholders.childKey')}
1297
1296
  />
1298
- <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.childKey')}</p>
1297
+ <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.form.descriptions.childKey')}</p>
1299
1298
  </div>
1300
- <span className="text-gray-400 mt-2">→</span>
1299
+ <span className="text-muted-foreground mt-2">→</span>
1301
1300
  <div className="flex-1">
1302
1301
  <Input
1303
1302
  type="text"
@@ -1309,14 +1308,14 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1309
1308
  }}
1310
1309
  placeholder={t('workflows.form.placeholders.parentPath')}
1311
1310
  />
1312
- <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.parentPath')}</p>
1311
+ <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.form.descriptions.parentPath')}</p>
1313
1312
  </div>
1314
1313
  <Button
1315
1314
  type="button"
1316
1315
  size="sm"
1317
1316
  variant="ghost"
1318
1317
  onClick={() => {
1319
- setInputMappings(inputMappings.filter((_, i) => i !== index))
1318
+ setInputMappings(prev => prev.filter((_, i) => i !== index))
1320
1319
  }}
1321
1320
  className="mt-1"
1322
1321
  >
@@ -1329,20 +1328,20 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1329
1328
  </div>
1330
1329
 
1331
1330
  {/* Output Mapping */}
1332
- <div className="border-t border-gray-200 pt-4 mt-4">
1331
+ <div className="border-t border-border pt-4 mt-4">
1333
1332
  <div className="flex items-center justify-between mb-3">
1334
1333
  <div>
1335
1334
  <h4 className="text-sm font-semibold text-foreground">
1336
1335
  {t('workflows.form.outputMapping', { count: outputMappings.length })}
1337
1336
  </h4>
1338
- <p className="text-xs text-gray-500 mt-0.5">
1337
+ <p className="text-xs text-muted-foreground mt-0.5">
1339
1338
  {t('workflows.form.descriptions.outputMapping')}
1340
1339
  </p>
1341
1340
  </div>
1342
1341
  <Button
1343
1342
  type="button"
1344
1343
  size="sm"
1345
- onClick={() => setOutputMappings([...outputMappings, { key: '', value: '' }])}
1344
+ onClick={() => setOutputMappings(prev => [...prev, { key: '', value: '' }])}
1346
1345
  >
1347
1346
  <Plus className="size-3 mr-1" />
1348
1347
  {t('workflows.form.addMapping')}
@@ -1350,7 +1349,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1350
1349
  </div>
1351
1350
 
1352
1351
  {outputMappings.length === 0 ? (
1353
- <p className="text-sm text-gray-500 italic">
1352
+ <p className="text-sm text-muted-foreground italic">
1354
1353
  {t('workflows.nodeEditor.noOutputMappings')}
1355
1354
  </p>
1356
1355
  ) : (
@@ -1368,9 +1367,9 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1368
1367
  }}
1369
1368
  placeholder={t('workflows.form.placeholders.parentKey')}
1370
1369
  />
1371
- <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.parentKey')}</p>
1370
+ <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.form.descriptions.parentKey')}</p>
1372
1371
  </div>
1373
- <span className="text-gray-400 mt-2">←</span>
1372
+ <span className="text-muted-foreground mt-2">←</span>
1374
1373
  <div className="flex-1">
1375
1374
  <Input
1376
1375
  type="text"
@@ -1382,14 +1381,14 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1382
1381
  }}
1383
1382
  placeholder={t('workflows.form.placeholders.childPath')}
1384
1383
  />
1385
- <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.childPath')}</p>
1384
+ <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.form.descriptions.childPath')}</p>
1386
1385
  </div>
1387
1386
  <Button
1388
1387
  type="button"
1389
1388
  size="sm"
1390
1389
  variant="ghost"
1391
1390
  onClick={() => {
1392
- setOutputMappings(outputMappings.filter((_, i) => i !== index))
1391
+ setOutputMappings(prev => prev.filter((_, i) => i !== index))
1393
1392
  }}
1394
1393
  className="mt-1"
1395
1394
  >
@@ -1406,14 +1405,14 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1406
1405
  {/* Wait for Signal Configuration */}
1407
1406
  {node.type === 'waitForSignal' && (
1408
1407
  <>
1409
- <div className="border-t border-gray-200 pt-4 mt-4">
1408
+ <div className="border-t border-border pt-4 mt-4">
1410
1409
  <h3 className="text-sm font-semibold text-foreground mb-3">
1411
1410
  {t('workflows.form.signalConfig')}
1412
1411
  </h3>
1413
1412
  </div>
1414
1413
 
1415
1414
  <div>
1416
- <label className="block text-sm font-medium text-gray-700 mb-1">
1415
+ <label className="block text-sm font-medium text-foreground mb-1">
1417
1416
  {t('workflows.form.signalName')} *
1418
1417
  </label>
1419
1418
  <Input
@@ -1422,13 +1421,13 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1422
1421
  onChange={(e) => setSignalName(e.target.value)}
1423
1422
  placeholder={t('workflows.form.placeholders.signalName')}
1424
1423
  />
1425
- <p className="text-xs text-gray-500 mt-1">
1424
+ <p className="text-xs text-muted-foreground mt-1">
1426
1425
  {t('workflows.form.descriptions.signalName')}
1427
1426
  </p>
1428
1427
  </div>
1429
1428
 
1430
1429
  <div>
1431
- <label className="block text-sm font-medium text-gray-700 mb-1">
1430
+ <label className="block text-sm font-medium text-foreground mb-1">
1432
1431
  {t('workflows.form.timeout')}
1433
1432
  </label>
1434
1433
  <Input
@@ -1450,7 +1449,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1450
1449
  {fieldErrors.signalTimeout}
1451
1450
  </p>
1452
1451
  ) : (
1453
- <p className="text-xs text-gray-500 mt-1">
1452
+ <p className="text-xs text-muted-foreground mt-1">
1454
1453
  {t('workflows.form.descriptions.signalTimeout')}
1455
1454
  </p>
1456
1455
  )}
@@ -1461,14 +1460,14 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1461
1460
  {/* Wait for Timer Configuration */}
1462
1461
  {node.type === 'waitForTimer' && (
1463
1462
  <>
1464
- <div className="border-t border-gray-200 pt-4 mt-4">
1463
+ <div className="border-t border-border pt-4 mt-4">
1465
1464
  <h3 className="text-sm font-semibold text-foreground mb-3">
1466
1465
  {t('workflows.steps.types.WAIT_FOR_TIMER')}
1467
1466
  </h3>
1468
1467
  </div>
1469
1468
 
1470
1469
  <div>
1471
- <label className="block text-sm font-medium text-gray-700 mb-1">
1470
+ <label className="block text-sm font-medium text-foreground mb-1">
1472
1471
  {t('workflows.activities.waitDuration')}
1473
1472
  </label>
1474
1473
  <Input
@@ -1491,14 +1490,14 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1491
1490
  {fieldErrors.timerDuration}
1492
1491
  </p>
1493
1492
  ) : (
1494
- <p className="text-xs text-gray-500 mt-1">
1493
+ <p className="text-xs text-muted-foreground mt-1">
1495
1494
  {t('workflows.activities.waitDurationDescription')}
1496
1495
  </p>
1497
1496
  )}
1498
1497
  </div>
1499
1498
 
1500
1499
  <div>
1501
- <label className="block text-sm font-medium text-gray-700 mb-1">
1500
+ <label className="block text-sm font-medium text-foreground mb-1">
1502
1501
  {t('workflows.activities.waitUntil')}
1503
1502
  </label>
1504
1503
  <Input
@@ -1522,7 +1521,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1522
1521
  {fieldErrors.timerUntil}
1523
1522
  </p>
1524
1523
  ) : (
1525
- <p className="text-xs text-gray-500 mt-1">
1524
+ <p className="text-xs text-muted-foreground mt-1">
1526
1525
  {t('workflows.activities.waitUntilDescription')}
1527
1526
  </p>
1528
1527
  )}
@@ -1531,31 +1530,27 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
1531
1530
  )}
1532
1531
 
1533
1532
  {/* Advanced Configuration */}
1534
- <div className="border-t border-gray-200 pt-4 mt-4">
1535
- <button
1533
+ <div className="border-t border-border pt-4 mt-4">
1534
+ <Button
1536
1535
  type="button"
1536
+ variant="ghost"
1537
1537
  onClick={() => setShowAdvanced(!showAdvanced)}
1538
- className="flex items-center justify-between w-full text-left"
1538
+ className="h-auto w-full justify-between px-0 py-0 text-left hover:bg-transparent"
1539
1539
  >
1540
1540
  <h3 className="text-sm font-semibold text-foreground">
1541
1541
  {t('workflows.form.advancedConfiguration')}
1542
1542
  </h3>
1543
- <svg
1544
- className={`w-5 h-5 transition-transform ${showAdvanced ? 'rotate-180' : ''}`}
1545
- fill="none"
1546
- stroke="currentColor"
1547
- viewBox="0 0 24 24"
1548
- >
1549
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
1550
- </svg>
1551
- </button>
1543
+ <ChevronDown
1544
+ className={`size-5 transition-transform ${showAdvanced ? 'rotate-180' : ''}`}
1545
+ />
1546
+ </Button>
1552
1547
  {showAdvanced && (
1553
1548
  <div className="mt-3">
1554
1549
  <JsonBuilder
1555
1550
  value={advancedConfig}
1556
1551
  onChange={setAdvancedConfig}
1557
1552
  />
1558
- <p className="text-xs text-gray-500 mt-1">
1553
+ <p className="text-xs text-muted-foreground mt-1">
1559
1554
  {t('workflows.form.descriptions.advancedConfig')}
1560
1555
  </p>
1561
1556
  </div>