@pos-360/horizon 0.2.0 → 0.2.1

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.
@@ -3,7 +3,8 @@ import { motion, AnimatePresence } from 'framer-motion';
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import * as React from 'react';
5
5
  import { forwardRef, useState, useEffect } from 'react';
6
- import { Info, ChevronDown, ChevronUp, LayoutGrid, List, Check, ExternalLink, AlertTriangle, X } from 'lucide-react';
6
+ import { Info, ChevronDown, ChevronUp, LayoutGrid, List, Check, ExternalLink, AlertTriangle, X, Moon, Rocket, Star, Globe, Orbit, Sparkles } from 'lucide-react';
7
+ export { Globe, Moon, Orbit, Rocket, Sparkles, Star } from 'lucide-react';
7
8
 
8
9
  var AnimatedButton = ({
9
10
  label,
@@ -342,16 +343,105 @@ var Input = forwardRef(
342
343
  }
343
344
  );
344
345
  Input.displayName = "Input";
346
+ var accentColors = {
347
+ blue: {
348
+ selected: "bg-blue-100/80 dark:bg-blue-900/30",
349
+ selectedBorder: "border-blue-500 dark:border-blue-400",
350
+ selectedGlow: "shadow-lg shadow-blue-500/20 dark:shadow-blue-400/20",
351
+ hoverBg: "group-hover:bg-blue-50/60 dark:group-hover:bg-blue-900/20",
352
+ hoverBgDark: "hover:bg-blue-50 dark:hover:bg-blue-900/30",
353
+ iconSelected: "text-blue-600 dark:text-blue-400",
354
+ iconHover: "group-hover:text-blue-500 dark:group-hover:text-blue-400",
355
+ checkBg: "bg-blue-500 border-blue-500 dark:bg-blue-400 dark:border-blue-400",
356
+ inputBorder: "border-blue-500 dark:border-blue-400",
357
+ inputRing: "focus:ring-blue-500/20",
358
+ textHover: "hover:text-blue-600 dark:hover:text-blue-400",
359
+ toggleActive: "text-blue-600 dark:text-blue-400"
360
+ },
361
+ violet: {
362
+ selected: "bg-violet-100/80 dark:bg-violet-900/30",
363
+ selectedBorder: "border-violet-500 dark:border-violet-400",
364
+ selectedGlow: "shadow-lg shadow-violet-500/20 dark:shadow-violet-400/20",
365
+ hoverBg: "group-hover:bg-violet-50/60 dark:group-hover:bg-violet-900/20",
366
+ hoverBgDark: "hover:bg-violet-50 dark:hover:bg-violet-900/30",
367
+ iconSelected: "text-violet-600 dark:text-violet-400",
368
+ iconHover: "group-hover:text-violet-500 dark:group-hover:text-violet-400",
369
+ checkBg: "bg-violet-500 border-violet-500 dark:bg-violet-400 dark:border-violet-400",
370
+ inputBorder: "border-violet-500 dark:border-violet-400",
371
+ inputRing: "focus:ring-violet-500/20",
372
+ textHover: "hover:text-violet-600 dark:hover:text-violet-400",
373
+ toggleActive: "text-violet-600 dark:text-violet-400"
374
+ },
375
+ emerald: {
376
+ selected: "bg-emerald-100/80 dark:bg-emerald-900/30",
377
+ selectedBorder: "border-emerald-500 dark:border-emerald-400",
378
+ selectedGlow: "shadow-lg shadow-emerald-500/20 dark:shadow-emerald-400/20",
379
+ hoverBg: "group-hover:bg-emerald-50/60 dark:group-hover:bg-emerald-900/20",
380
+ hoverBgDark: "hover:bg-emerald-50 dark:hover:bg-emerald-900/30",
381
+ iconSelected: "text-emerald-600 dark:text-emerald-400",
382
+ iconHover: "group-hover:text-emerald-500 dark:group-hover:text-emerald-400",
383
+ checkBg: "bg-emerald-500 border-emerald-500 dark:bg-emerald-400 dark:border-emerald-400",
384
+ inputBorder: "border-emerald-500 dark:border-emerald-400",
385
+ inputRing: "focus:ring-emerald-500/20",
386
+ textHover: "hover:text-emerald-600 dark:hover:text-emerald-400",
387
+ toggleActive: "text-emerald-600 dark:text-emerald-400"
388
+ },
389
+ rose: {
390
+ selected: "bg-rose-100/80 dark:bg-rose-900/30",
391
+ selectedBorder: "border-rose-500 dark:border-rose-400",
392
+ selectedGlow: "shadow-lg shadow-rose-500/20 dark:shadow-rose-400/20",
393
+ hoverBg: "group-hover:bg-rose-50/60 dark:group-hover:bg-rose-900/20",
394
+ hoverBgDark: "hover:bg-rose-50 dark:hover:bg-rose-900/30",
395
+ iconSelected: "text-rose-600 dark:text-rose-400",
396
+ iconHover: "group-hover:text-rose-500 dark:group-hover:text-rose-400",
397
+ checkBg: "bg-rose-500 border-rose-500 dark:bg-rose-400 dark:border-rose-400",
398
+ inputBorder: "border-rose-500 dark:border-rose-400",
399
+ inputRing: "focus:ring-rose-500/20",
400
+ textHover: "hover:text-rose-600 dark:hover:text-rose-400",
401
+ toggleActive: "text-rose-600 dark:text-rose-400"
402
+ },
403
+ amber: {
404
+ selected: "bg-amber-100/80 dark:bg-amber-900/30",
405
+ selectedBorder: "border-amber-500 dark:border-amber-400",
406
+ selectedGlow: "shadow-lg shadow-amber-500/20 dark:shadow-amber-400/20",
407
+ hoverBg: "group-hover:bg-amber-50/60 dark:group-hover:bg-amber-900/20",
408
+ hoverBgDark: "hover:bg-amber-50 dark:hover:bg-amber-900/30",
409
+ iconSelected: "text-amber-600 dark:text-amber-400",
410
+ iconHover: "group-hover:text-amber-500 dark:group-hover:text-amber-400",
411
+ checkBg: "bg-amber-500 border-amber-500 dark:bg-amber-400 dark:border-amber-400",
412
+ inputBorder: "border-amber-500 dark:border-amber-400",
413
+ inputRing: "focus:ring-amber-500/20",
414
+ textHover: "hover:text-amber-600 dark:hover:text-amber-400",
415
+ toggleActive: "text-amber-600 dark:text-amber-400"
416
+ }
417
+ };
418
+ var defaultIconMap = {
419
+ nebula: Sparkles,
420
+ andromeda: Orbit,
421
+ cosmos: Globe,
422
+ stellar: Star,
423
+ voyager: Rocket,
424
+ eclipse: Moon
425
+ };
426
+ var getTemplateIcon = (template) => {
427
+ if (template.icon) return template.icon;
428
+ const key = template.title.toLowerCase();
429
+ return defaultIconMap[key] || Star;
430
+ };
345
431
  var TemplateSelector = ({
346
432
  templates,
347
433
  value,
348
434
  onChange,
435
+ onNameChange,
349
436
  defaultView = "card",
350
437
  showViewToggle = true,
438
+ editable = false,
351
439
  className,
352
440
  cardClassName,
353
- columns = 3
441
+ columns = 3,
442
+ accentColor = "blue"
354
443
  }) => {
444
+ const colors = accentColors[accentColor];
355
445
  const [view, setView] = useState(defaultView);
356
446
  const [selectedId, setSelectedId] = useState(value);
357
447
  React.useEffect(() => {
@@ -365,24 +455,27 @@ var TemplateSelector = ({
365
455
  e.stopPropagation();
366
456
  window.open(previewUrl, "_blank", "noopener,noreferrer");
367
457
  };
458
+ const handleNameChange = (templateId, newName) => {
459
+ onNameChange?.(templateId, newName);
460
+ };
368
461
  const columnClasses = {
369
462
  2: "grid-cols-1 sm:grid-cols-2",
370
463
  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
371
464
  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
372
465
  };
373
466
  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
374
- showViewToggle && /* @__PURE__ */ jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex rounded-lg border border-neutral-200 dark:border-neutral-700 p-1 bg-neutral-50 dark:bg-neutral-800/50", children: [
467
+ showViewToggle && /* @__PURE__ */ jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex rounded-lg border border-neutral-200 dark:border-neutral-700 p-1 bg-neutral-100 dark:bg-neutral-800", children: [
375
468
  /* @__PURE__ */ jsx(
376
469
  "button",
377
470
  {
378
471
  type: "button",
379
472
  onClick: () => setView("card"),
380
473
  className: cn(
381
- "p-2 rounded-md transition-all duration-200",
382
- view === "card" ? "bg-white dark:bg-neutral-700 shadow-sm text-blue-600 dark:text-blue-400" : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300"
474
+ "p-2 rounded-md text-sm font-medium transition-all duration-200",
475
+ view === "card" ? `bg-white dark:bg-neutral-700 shadow-sm ${colors.toggleActive}` : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300"
383
476
  ),
384
477
  "aria-label": "Card view",
385
- children: /* @__PURE__ */ jsx(LayoutGrid, { size: 18 })
478
+ children: /* @__PURE__ */ jsx(LayoutGrid, { size: 16 })
386
479
  }
387
480
  ),
388
481
  /* @__PURE__ */ jsx(
@@ -391,11 +484,11 @@ var TemplateSelector = ({
391
484
  type: "button",
392
485
  onClick: () => setView("list"),
393
486
  className: cn(
394
- "p-2 rounded-md transition-all duration-200",
395
- view === "list" ? "bg-white dark:bg-neutral-700 shadow-sm text-blue-600 dark:text-blue-400" : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300"
487
+ "p-2 rounded-md text-sm font-medium transition-all duration-200",
488
+ view === "list" ? `bg-white dark:bg-neutral-700 shadow-sm ${colors.toggleActive}` : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300"
396
489
  ),
397
490
  "aria-label": "List view",
398
- children: /* @__PURE__ */ jsx(List, { size: 18 })
491
+ children: /* @__PURE__ */ jsx(List, { size: 16 })
399
492
  }
400
493
  )
401
494
  ] }) }),
@@ -414,7 +507,10 @@ var TemplateSelector = ({
414
507
  isSelected: selectedId === template.id,
415
508
  onSelect: handleSelect,
416
509
  onPreviewClick: handlePreviewClick,
417
- className: cardClassName
510
+ onNameChange: handleNameChange,
511
+ editable,
512
+ className: cardClassName,
513
+ colors
418
514
  },
419
515
  template.id
420
516
  ))
@@ -434,7 +530,10 @@ var TemplateSelector = ({
434
530
  template,
435
531
  isSelected: selectedId === template.id,
436
532
  onSelect: handleSelect,
437
- onPreviewClick: handlePreviewClick
533
+ onPreviewClick: handlePreviewClick,
534
+ onNameChange: handleNameChange,
535
+ editable,
536
+ colors
438
537
  },
439
538
  template.id
440
539
  ))
@@ -448,18 +547,54 @@ var TemplateCard = ({
448
547
  isSelected,
449
548
  onSelect,
450
549
  onPreviewClick,
451
- className
550
+ onNameChange,
551
+ editable,
552
+ className,
553
+ colors
452
554
  }) => {
555
+ const [isEditing, setIsEditing] = useState(false);
556
+ const [editValue, setEditValue] = useState(template.name || template.title);
557
+ const inputRef = React.useRef(null);
558
+ const displayName = template.name || template.title;
559
+ const IconComponent = getTemplateIcon(template);
560
+ const handleDoubleClick = (e) => {
561
+ if (editable) {
562
+ e.stopPropagation();
563
+ setIsEditing(true);
564
+ setEditValue(displayName);
565
+ }
566
+ };
567
+ const handleBlur = () => {
568
+ setIsEditing(false);
569
+ if (editValue.trim() && editValue !== displayName) {
570
+ onNameChange(template.id, editValue.trim());
571
+ }
572
+ };
573
+ const handleKeyDown = (e) => {
574
+ if (e.key === "Enter") {
575
+ handleBlur();
576
+ } else if (e.key === "Escape") {
577
+ setIsEditing(false);
578
+ setEditValue(displayName);
579
+ }
580
+ };
581
+ React.useEffect(() => {
582
+ if (isEditing && inputRef.current) {
583
+ inputRef.current.focus();
584
+ inputRef.current.select();
585
+ }
586
+ }, [isEditing]);
453
587
  return /* @__PURE__ */ jsxs(
454
588
  motion.div,
455
589
  {
456
- whileHover: { scale: 1.02 },
590
+ whileHover: { y: -4, scale: 1.02 },
457
591
  whileTap: { scale: 0.98 },
592
+ transition: { type: "spring", stiffness: 400, damping: 25 },
458
593
  onClick: () => onSelect(template.id),
459
594
  className: cn(
460
- "relative cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-200",
595
+ "group relative cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-300",
461
596
  "bg-white dark:bg-neutral-800",
462
- isSelected ? "border-blue-500 dark:border-blue-400 ring-2 ring-blue-500/20 dark:ring-blue-400/20" : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600",
597
+ isSelected ? `${colors.selectedBorder} ${colors.selectedGlow}` : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 hover:shadow-md",
463
598
  className
464
599
  ),
465
600
  children: [
@@ -467,10 +602,10 @@ var TemplateCard = ({
467
602
  "div",
468
603
  {
469
604
  className: cn(
470
- "absolute top-3 left-3 z-10 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200",
471
- isSelected ? "bg-blue-500 border-blue-500 dark:bg-blue-400 dark:border-blue-400" : "bg-white/80 dark:bg-neutral-800/80 border-neutral-300 dark:border-neutral-600 backdrop-blur-sm"
605
+ "absolute top-3 left-3 z-10 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
606
+ isSelected ? colors.checkBg : "bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600"
472
607
  ),
473
- children: isSelected && /* @__PURE__ */ jsx(Check, { size: 14, className: "text-white" })
608
+ children: isSelected && /* @__PURE__ */ jsx(Check, { size: 12, className: "text-white", strokeWidth: 3 })
474
609
  }
475
610
  ),
476
611
  /* @__PURE__ */ jsx(
@@ -479,26 +614,69 @@ var TemplateCard = ({
479
614
  type: "button",
480
615
  onClick: (e) => onPreviewClick(e, template.previewUrl),
481
616
  className: cn(
482
- "absolute top-3 right-3 z-10 p-2 rounded-lg transition-all duration-200",
483
- "bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm",
617
+ "absolute top-3 right-3 z-10 p-1.5 rounded-lg transition-all duration-200",
618
+ "bg-white dark:bg-neutral-700",
484
619
  "border border-neutral-200 dark:border-neutral-600",
485
- "text-neutral-600 dark:text-neutral-300",
486
- "hover:bg-white dark:hover:bg-neutral-700 hover:text-blue-600 dark:hover:text-blue-400",
487
- "hover:border-blue-300 dark:hover:border-blue-500"
620
+ "text-neutral-500 dark:text-neutral-400",
621
+ "opacity-0 group-hover:opacity-100",
622
+ "hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600"
488
623
  ),
489
- "aria-label": `Preview ${template.title}`,
490
- children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
624
+ "aria-label": `Preview ${displayName}`,
625
+ children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
491
626
  }
492
627
  ),
493
- /* @__PURE__ */ jsx("div", { className: "aspect-[16/10] overflow-hidden bg-neutral-100 dark:bg-neutral-900", children: /* @__PURE__ */ jsx(
494
- "img",
628
+ /* @__PURE__ */ jsx("div", { className: "aspect-[4/3] overflow-hidden bg-neutral-50 dark:bg-neutral-800/80 flex items-center justify-center", children: /* @__PURE__ */ jsx(
629
+ motion.div,
495
630
  {
496
- src: template.previewImage,
497
- alt: template.title,
498
- className: "w-full h-full object-cover object-top transition-transform duration-300 group-hover:scale-105"
631
+ initial: { scale: 0.9, opacity: 0.5 },
632
+ animate: { scale: 1, opacity: 1 },
633
+ className: cn(
634
+ "p-6 rounded-full transition-all duration-300",
635
+ isSelected ? colors.selected : `bg-neutral-100 dark:bg-neutral-700/50 ${colors.hoverBg}`
636
+ ),
637
+ children: /* @__PURE__ */ jsx(
638
+ IconComponent,
639
+ {
640
+ size: 48,
641
+ strokeWidth: 1.5,
642
+ className: cn(
643
+ "transition-colors duration-300",
644
+ isSelected ? colors.iconSelected : `text-neutral-400 dark:text-neutral-500 ${colors.iconHover}`
645
+ )
646
+ }
647
+ )
499
648
  }
500
649
  ) }),
501
- /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("h3", { className: "font-medium text-neutral-900 dark:text-neutral-100 truncate", children: template.title }) })
650
+ /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-neutral-100 dark:border-neutral-700", children: isEditing ? /* @__PURE__ */ jsx(
651
+ "input",
652
+ {
653
+ ref: inputRef,
654
+ type: "text",
655
+ value: editValue,
656
+ onChange: (e) => setEditValue(e.target.value),
657
+ onBlur: handleBlur,
658
+ onKeyDown: handleKeyDown,
659
+ onClick: (e) => e.stopPropagation(),
660
+ className: cn(
661
+ "w-full px-2 py-1 text-sm font-medium rounded",
662
+ "bg-neutral-100 dark:bg-neutral-700",
663
+ `border ${colors.inputBorder}`,
664
+ "text-neutral-900 dark:text-neutral-100",
665
+ `focus:outline-none focus:ring-2 ${colors.inputRing}`
666
+ )
667
+ }
668
+ ) : /* @__PURE__ */ jsx(
669
+ "h3",
670
+ {
671
+ onDoubleClick: handleDoubleClick,
672
+ className: cn(
673
+ "text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate",
674
+ editable && `cursor-text ${colors.textHover}`
675
+ ),
676
+ title: editable ? "Double-click to rename" : displayName,
677
+ children: displayName
678
+ }
679
+ ) })
502
680
  ]
503
681
  }
504
682
  );
@@ -507,18 +685,54 @@ var TemplateListItem = ({
507
685
  template,
508
686
  isSelected,
509
687
  onSelect,
510
- onPreviewClick
688
+ onPreviewClick,
689
+ onNameChange,
690
+ editable,
691
+ colors
511
692
  }) => {
693
+ const [isEditing, setIsEditing] = useState(false);
694
+ const [editValue, setEditValue] = useState(template.name || template.title);
695
+ const inputRef = React.useRef(null);
696
+ const displayName = template.name || template.title;
697
+ const IconComponent = getTemplateIcon(template);
698
+ const handleDoubleClick = (e) => {
699
+ if (editable) {
700
+ e.stopPropagation();
701
+ setIsEditing(true);
702
+ setEditValue(displayName);
703
+ }
704
+ };
705
+ const handleBlur = () => {
706
+ setIsEditing(false);
707
+ if (editValue.trim() && editValue !== displayName) {
708
+ onNameChange(template.id, editValue.trim());
709
+ }
710
+ };
711
+ const handleKeyDown = (e) => {
712
+ if (e.key === "Enter") {
713
+ handleBlur();
714
+ } else if (e.key === "Escape") {
715
+ setIsEditing(false);
716
+ setEditValue(displayName);
717
+ }
718
+ };
719
+ React.useEffect(() => {
720
+ if (isEditing && inputRef.current) {
721
+ inputRef.current.focus();
722
+ inputRef.current.select();
723
+ }
724
+ }, [isEditing]);
512
725
  return /* @__PURE__ */ jsxs(
513
726
  motion.div,
514
727
  {
515
- whileHover: { x: 4 },
516
- whileTap: { scale: 0.99 },
728
+ whileHover: { x: 4, scale: 1.01 },
729
+ whileTap: { scale: 0.995 },
730
+ transition: { type: "spring", stiffness: 400, damping: 25 },
517
731
  onClick: () => onSelect(template.id),
518
732
  className: cn(
519
- "flex items-center gap-4 p-3 cursor-pointer rounded-xl border-2 transition-all duration-200",
733
+ "group flex items-center gap-4 p-3 cursor-pointer rounded-xl border-2 transition-all duration-300",
520
734
  "bg-white dark:bg-neutral-800",
521
- isSelected ? "border-blue-500 dark:border-blue-400 ring-2 ring-blue-500/20 dark:ring-blue-400/20" : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600"
735
+ isSelected ? `${colors.selectedBorder} shadow-md ${colors.selectedGlow}` : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600"
522
736
  ),
523
737
  children: [
524
738
  /* @__PURE__ */ jsx(
@@ -526,20 +740,61 @@ var TemplateListItem = ({
526
740
  {
527
741
  className: cn(
528
742
  "w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all duration-200",
529
- isSelected ? "bg-blue-500 border-blue-500 dark:bg-blue-400 dark:border-blue-400" : "bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600"
743
+ isSelected ? colors.checkBg : "bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600"
744
+ ),
745
+ children: isSelected && /* @__PURE__ */ jsx(Check, { size: 12, className: "text-white", strokeWidth: 3 })
746
+ }
747
+ ),
748
+ /* @__PURE__ */ jsx(
749
+ "div",
750
+ {
751
+ className: cn(
752
+ "w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors duration-300",
753
+ isSelected ? colors.selected : `bg-neutral-100 dark:bg-neutral-700/50 ${colors.hoverBg}`
530
754
  ),
531
- children: isSelected && /* @__PURE__ */ jsx(Check, { size: 12, className: "text-white" })
755
+ children: /* @__PURE__ */ jsx(
756
+ IconComponent,
757
+ {
758
+ size: 24,
759
+ strokeWidth: 1.5,
760
+ className: cn(
761
+ "transition-colors duration-300",
762
+ isSelected ? colors.iconSelected : `text-neutral-400 dark:text-neutral-500 ${colors.iconHover}`
763
+ )
764
+ }
765
+ )
532
766
  }
533
767
  ),
534
- /* @__PURE__ */ jsx("div", { className: "w-20 h-14 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-900 flex-shrink-0", children: /* @__PURE__ */ jsx(
535
- "img",
768
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: isEditing ? /* @__PURE__ */ jsx(
769
+ "input",
770
+ {
771
+ ref: inputRef,
772
+ type: "text",
773
+ value: editValue,
774
+ onChange: (e) => setEditValue(e.target.value),
775
+ onBlur: handleBlur,
776
+ onKeyDown: handleKeyDown,
777
+ onClick: (e) => e.stopPropagation(),
778
+ className: cn(
779
+ "w-full px-2 py-1 text-sm font-medium rounded",
780
+ "bg-neutral-100 dark:bg-neutral-700",
781
+ `border ${colors.inputBorder}`,
782
+ "text-neutral-900 dark:text-neutral-100",
783
+ `focus:outline-none focus:ring-2 ${colors.inputRing}`
784
+ )
785
+ }
786
+ ) : /* @__PURE__ */ jsx(
787
+ "h3",
536
788
  {
537
- src: template.previewImage,
538
- alt: template.title,
539
- className: "w-full h-full object-cover object-top"
789
+ onDoubleClick: handleDoubleClick,
790
+ className: cn(
791
+ "text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate",
792
+ editable && `cursor-text ${colors.textHover}`
793
+ ),
794
+ title: editable ? "Double-click to rename" : displayName,
795
+ children: displayName
540
796
  }
541
797
  ) }),
542
- /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("h3", { className: "font-medium text-neutral-900 dark:text-neutral-100 truncate", children: template.title }) }),
543
798
  /* @__PURE__ */ jsx(
544
799
  "button",
545
800
  {
@@ -547,12 +802,13 @@ var TemplateListItem = ({
547
802
  onClick: (e) => onPreviewClick(e, template.previewUrl),
548
803
  className: cn(
549
804
  "p-2 rounded-lg transition-all duration-200 flex-shrink-0",
550
- "text-neutral-500 dark:text-neutral-400",
551
- "hover:bg-neutral-100 dark:hover:bg-neutral-700",
552
- "hover:text-blue-600 dark:hover:text-blue-400"
805
+ "text-neutral-400 dark:text-neutral-500",
806
+ "opacity-0 group-hover:opacity-100",
807
+ colors.hoverBgDark,
808
+ colors.textHover
553
809
  ),
554
- "aria-label": `Preview ${template.title}`,
555
- children: /* @__PURE__ */ jsx(ExternalLink, { size: 18 })
810
+ "aria-label": `Preview ${displayName}`,
811
+ children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
556
812
  }
557
813
  )
558
814
  ]
@@ -687,5 +943,5 @@ var Toast = ({
687
943
  };
688
944
 
689
945
  export { AnimatedButton, Input, TemplateSelector, TextButton, Toast };
690
- //# sourceMappingURL=chunk-FEMSTEHE.mjs.map
691
- //# sourceMappingURL=chunk-FEMSTEHE.mjs.map
946
+ //# sourceMappingURL=chunk-TQPMV72P.mjs.map
947
+ //# sourceMappingURL=chunk-TQPMV72P.mjs.map