@pos-360/horizon 0.2.0 → 0.2.1

package/dist/{chunk-24KNWDO5.js → chunk-BWR6DSQJ.js}

@@ -363,16 +363,105 @@ var Input = React.forwardRef(
   }
 );
 Input.displayName = "Input";
+var accentColors = {
+  blue: {
+    selected: "bg-blue-100/80 dark:bg-blue-900/30",
+    selectedBorder: "border-blue-500 dark:border-blue-400",
+    selectedGlow: "shadow-lg shadow-blue-500/20 dark:shadow-blue-400/20",
+    hoverBg: "group-hover:bg-blue-50/60 dark:group-hover:bg-blue-900/20",
+    hoverBgDark: "hover:bg-blue-50 dark:hover:bg-blue-900/30",
+    iconSelected: "text-blue-600 dark:text-blue-400",
+    iconHover: "group-hover:text-blue-500 dark:group-hover:text-blue-400",
+    checkBg: "bg-blue-500 border-blue-500 dark:bg-blue-400 dark:border-blue-400",
+    inputBorder: "border-blue-500 dark:border-blue-400",
+    inputRing: "focus:ring-blue-500/20",
+    textHover: "hover:text-blue-600 dark:hover:text-blue-400",
+    toggleActive: "text-blue-600 dark:text-blue-400"
+  },
+  violet: {
+    selected: "bg-violet-100/80 dark:bg-violet-900/30",
+    selectedBorder: "border-violet-500 dark:border-violet-400",
+    selectedGlow: "shadow-lg shadow-violet-500/20 dark:shadow-violet-400/20",
+    hoverBg: "group-hover:bg-violet-50/60 dark:group-hover:bg-violet-900/20",
+    hoverBgDark: "hover:bg-violet-50 dark:hover:bg-violet-900/30",
+    iconSelected: "text-violet-600 dark:text-violet-400",
+    iconHover: "group-hover:text-violet-500 dark:group-hover:text-violet-400",
+    checkBg: "bg-violet-500 border-violet-500 dark:bg-violet-400 dark:border-violet-400",
+    inputBorder: "border-violet-500 dark:border-violet-400",
+    inputRing: "focus:ring-violet-500/20",
+    textHover: "hover:text-violet-600 dark:hover:text-violet-400",
+    toggleActive: "text-violet-600 dark:text-violet-400"
+  },
+  emerald: {
+    selected: "bg-emerald-100/80 dark:bg-emerald-900/30",
+    selectedBorder: "border-emerald-500 dark:border-emerald-400",
+    selectedGlow: "shadow-lg shadow-emerald-500/20 dark:shadow-emerald-400/20",
+    hoverBg: "group-hover:bg-emerald-50/60 dark:group-hover:bg-emerald-900/20",
+    hoverBgDark: "hover:bg-emerald-50 dark:hover:bg-emerald-900/30",
+    iconSelected: "text-emerald-600 dark:text-emerald-400",
+    iconHover: "group-hover:text-emerald-500 dark:group-hover:text-emerald-400",
+    checkBg: "bg-emerald-500 border-emerald-500 dark:bg-emerald-400 dark:border-emerald-400",
+    inputBorder: "border-emerald-500 dark:border-emerald-400",
+    inputRing: "focus:ring-emerald-500/20",
+    textHover: "hover:text-emerald-600 dark:hover:text-emerald-400",
+    toggleActive: "text-emerald-600 dark:text-emerald-400"
+  },
+  rose: {
+    selected: "bg-rose-100/80 dark:bg-rose-900/30",
+    selectedBorder: "border-rose-500 dark:border-rose-400",
+    selectedGlow: "shadow-lg shadow-rose-500/20 dark:shadow-rose-400/20",
+    hoverBg: "group-hover:bg-rose-50/60 dark:group-hover:bg-rose-900/20",
+    hoverBgDark: "hover:bg-rose-50 dark:hover:bg-rose-900/30",
+    iconSelected: "text-rose-600 dark:text-rose-400",
+    iconHover: "group-hover:text-rose-500 dark:group-hover:text-rose-400",
+    checkBg: "bg-rose-500 border-rose-500 dark:bg-rose-400 dark:border-rose-400",
+    inputBorder: "border-rose-500 dark:border-rose-400",
+    inputRing: "focus:ring-rose-500/20",
+    textHover: "hover:text-rose-600 dark:hover:text-rose-400",
+    toggleActive: "text-rose-600 dark:text-rose-400"
+  },
+  amber: {
+    selected: "bg-amber-100/80 dark:bg-amber-900/30",
+    selectedBorder: "border-amber-500 dark:border-amber-400",
+    selectedGlow: "shadow-lg shadow-amber-500/20 dark:shadow-amber-400/20",
+    hoverBg: "group-hover:bg-amber-50/60 dark:group-hover:bg-amber-900/20",
+    hoverBgDark: "hover:bg-amber-50 dark:hover:bg-amber-900/30",
+    iconSelected: "text-amber-600 dark:text-amber-400",
+    iconHover: "group-hover:text-amber-500 dark:group-hover:text-amber-400",
+    checkBg: "bg-amber-500 border-amber-500 dark:bg-amber-400 dark:border-amber-400",
+    inputBorder: "border-amber-500 dark:border-amber-400",
+    inputRing: "focus:ring-amber-500/20",
+    textHover: "hover:text-amber-600 dark:hover:text-amber-400",
+    toggleActive: "text-amber-600 dark:text-amber-400"
+  }
+};
+var defaultIconMap = {
+  nebula: lucideReact.Sparkles,
+  andromeda: lucideReact.Orbit,
+  cosmos: lucideReact.Globe,
+  stellar: lucideReact.Star,
+  voyager: lucideReact.Rocket,
+  eclipse: lucideReact.Moon
+};
+var getTemplateIcon = (template) => {
+  if (template.icon) return template.icon;
+  const key = template.title.toLowerCase();
+  return defaultIconMap[key] || lucideReact.Star;
+};
 var TemplateSelector = ({
   templates,
   value,
   onChange,
+  onNameChange,
   defaultView = "card",
   showViewToggle = true,
+  editable = false,
   className,
   cardClassName,
-  columns = 3
+  columns = 3,
+  accentColor = "blue"
 }) => {
+  const colors = accentColors[accentColor];
   const [view, setView] = React.useState(defaultView);
   const [selectedId, setSelectedId] = React.useState(value);
   React__namespace.useEffect(() => {
@@ -386,24 +475,27 @@ var TemplateSelector = ({
     e.stopPropagation();
     window.open(previewUrl, "_blank", "noopener,noreferrer");
   };
+  const handleNameChange = (templateId, newName) => {
+    onNameChange?.(templateId, newName);
+  };
   const columnClasses = {
     2: "grid-cols-1 sm:grid-cols-2",
     3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkTMZLQK74_js.cn("w-full", className), children: [
-    showViewToggle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ jsxRuntime.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: [
+    showViewToggle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ jsxRuntime.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: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           onClick: () => setView("card"),
           className: chunkTMZLQK74_js.cn(
-            "p-2 rounded-md transition-all duration-200",
-            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"
+            "p-2 rounded-md text-sm font-medium transition-all duration-200",
+            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"
           ),
           "aria-label": "Card view",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { size: 18 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { size: 16 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -412,11 +504,11 @@ var TemplateSelector = ({
           type: "button",
           onClick: () => setView("list"),
           className: chunkTMZLQK74_js.cn(
-            "p-2 rounded-md transition-all duration-200",
-            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"
+            "p-2 rounded-md text-sm font-medium transition-all duration-200",
+            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"
           ),
           "aria-label": "List view",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 18 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 16 })
         }
       )
     ] }) }),
@@ -435,7 +527,10 @@ var TemplateSelector = ({
             isSelected: selectedId === template.id,
             onSelect: handleSelect,
             onPreviewClick: handlePreviewClick,
-            className: cardClassName
+            onNameChange: handleNameChange,
+            editable,
+            className: cardClassName,
+            colors
           },
           template.id
         ))
@@ -455,7 +550,10 @@ var TemplateSelector = ({
             template,
             isSelected: selectedId === template.id,
             onSelect: handleSelect,
-            onPreviewClick: handlePreviewClick
+            onPreviewClick: handlePreviewClick,
+            onNameChange: handleNameChange,
+            editable,
+            colors
           },
           template.id
         ))
@@ -469,18 +567,54 @@ var TemplateCard = ({
   isSelected,
   onSelect,
   onPreviewClick,
-  className
+  onNameChange,
+  editable,
+  className,
+  colors
 }) => {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState(template.name || template.title);
+  const inputRef = React__namespace.useRef(null);
+  const displayName = template.name || template.title;
+  const IconComponent = getTemplateIcon(template);
+  const handleDoubleClick = (e) => {
+    if (editable) {
+      e.stopPropagation();
+      setIsEditing(true);
+      setEditValue(displayName);
+    }
+  };
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (editValue.trim() && editValue !== displayName) {
+      onNameChange(template.id, editValue.trim());
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleBlur();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditValue(displayName);
+    }
+  };
+  React__namespace.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
     {
-      whileHover: { scale: 1.02 },
+      whileHover: { y: -4, scale: 1.02 },
       whileTap: { scale: 0.98 },
+      transition: { type: "spring", stiffness: 400, damping: 25 },
       onClick: () => onSelect(template.id),
       className: chunkTMZLQK74_js.cn(
-        "relative cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-200",
+        "group relative cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-300",
         "bg-white dark:bg-neutral-800",
-        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",
+        isSelected ? `${colors.selectedBorder} ${colors.selectedGlow}` : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 hover:shadow-md",
         className
       ),
       children: [
@@ -488,10 +622,10 @@ var TemplateCard = ({
           "div",
           {
             className: chunkTMZLQK74_js.cn(
-              "absolute top-3 left-3 z-10 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200",
-              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"
+              "absolute top-3 left-3 z-10 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
+              isSelected ? colors.checkBg : "bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600"
             ),
-            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, className: "text-white" })
+            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "text-white", strokeWidth: 3 })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -500,26 +634,69 @@ var TemplateCard = ({
             type: "button",
             onClick: (e) => onPreviewClick(e, template.previewUrl),
             className: chunkTMZLQK74_js.cn(
-              "absolute top-3 right-3 z-10 p-2 rounded-lg transition-all duration-200",
-              "bg-white/80 dark:bg-neutral-800/80 backdrop-blur-sm",
+              "absolute top-3 right-3 z-10 p-1.5 rounded-lg transition-all duration-200",
+              "bg-white dark:bg-neutral-700",
               "border border-neutral-200 dark:border-neutral-600",
-              "text-neutral-600 dark:text-neutral-300",
-              "hover:bg-white dark:hover:bg-neutral-700 hover:text-blue-600 dark:hover:text-blue-400",
-              "hover:border-blue-300 dark:hover:border-blue-500"
+              "text-neutral-500 dark:text-neutral-400",
+              "opacity-0 group-hover:opacity-100",
+              "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"
             ),
-            "aria-label": `Preview ${template.title}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 16 })
+            "aria-label": `Preview ${displayName}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14 })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/10] overflow-hidden bg-neutral-100 dark:bg-neutral-900", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[4/3] overflow-hidden bg-neutral-50 dark:bg-neutral-800/80 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
           {
-            src: template.previewImage,
-            alt: template.title,
-            className: "w-full h-full object-cover object-top transition-transform duration-300 group-hover:scale-105"
+            initial: { scale: 0.9, opacity: 0.5 },
+            animate: { scale: 1, opacity: 1 },
+            className: chunkTMZLQK74_js.cn(
+              "p-6 rounded-full transition-all duration-300",
+              isSelected ? colors.selected : `bg-neutral-100 dark:bg-neutral-700/50 ${colors.hoverBg}`
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconComponent,
+              {
+                size: 48,
+                strokeWidth: 1.5,
+                className: chunkTMZLQK74_js.cn(
+                  "transition-colors duration-300",
+                  isSelected ? colors.iconSelected : `text-neutral-400 dark:text-neutral-500 ${colors.iconHover}`
+                )
+              }
+            )
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-neutral-900 dark:text-neutral-100 truncate", children: template.title }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-t border-neutral-100 dark:border-neutral-700", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation(),
+            className: chunkTMZLQK74_js.cn(
+              "w-full px-2 py-1 text-sm font-medium rounded",
+              "bg-neutral-100 dark:bg-neutral-700",
+              `border ${colors.inputBorder}`,
+              "text-neutral-900 dark:text-neutral-100",
+              `focus:outline-none focus:ring-2 ${colors.inputRing}`
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "h3",
+          {
+            onDoubleClick: handleDoubleClick,
+            className: chunkTMZLQK74_js.cn(
+              "text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate",
+              editable && `cursor-text ${colors.textHover}`
+            ),
+            title: editable ? "Double-click to rename" : displayName,
+            children: displayName
+          }
+        ) })
       ]
     }
   );
@@ -528,18 +705,54 @@ var TemplateListItem = ({
   template,
   isSelected,
   onSelect,
-  onPreviewClick
+  onPreviewClick,
+  onNameChange,
+  editable,
+  colors
 }) => {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState(template.name || template.title);
+  const inputRef = React__namespace.useRef(null);
+  const displayName = template.name || template.title;
+  const IconComponent = getTemplateIcon(template);
+  const handleDoubleClick = (e) => {
+    if (editable) {
+      e.stopPropagation();
+      setIsEditing(true);
+      setEditValue(displayName);
+    }
+  };
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (editValue.trim() && editValue !== displayName) {
+      onNameChange(template.id, editValue.trim());
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleBlur();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditValue(displayName);
+    }
+  };
+  React__namespace.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
     {
-      whileHover: { x: 4 },
-      whileTap: { scale: 0.99 },
+      whileHover: { x: 4, scale: 1.01 },
+      whileTap: { scale: 0.995 },
+      transition: { type: "spring", stiffness: 400, damping: 25 },
       onClick: () => onSelect(template.id),
       className: chunkTMZLQK74_js.cn(
-        "flex items-center gap-4 p-3 cursor-pointer rounded-xl border-2 transition-all duration-200",
+        "group flex items-center gap-4 p-3 cursor-pointer rounded-xl border-2 transition-all duration-300",
         "bg-white dark:bg-neutral-800",
-        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"
+        isSelected ? `${colors.selectedBorder} shadow-md ${colors.selectedGlow}` : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -547,20 +760,61 @@ var TemplateListItem = ({
           {
             className: chunkTMZLQK74_js.cn(
               "w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all duration-200",
-              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"
+              isSelected ? colors.checkBg : "bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600"
+            ),
+            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "text-white", strokeWidth: 3 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkTMZLQK74_js.cn(
+              "w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors duration-300",
+              isSelected ? colors.selected : `bg-neutral-100 dark:bg-neutral-700/50 ${colors.hoverBg}`
             ),
-            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "text-white" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconComponent,
+              {
+                size: 24,
+                strokeWidth: 1.5,
+                className: chunkTMZLQK74_js.cn(
+                  "transition-colors duration-300",
+                  isSelected ? colors.iconSelected : `text-neutral-400 dark:text-neutral-500 ${colors.iconHover}`
+                )
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-14 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-900 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation(),
+            className: chunkTMZLQK74_js.cn(
+              "w-full px-2 py-1 text-sm font-medium rounded",
+              "bg-neutral-100 dark:bg-neutral-700",
+              `border ${colors.inputBorder}`,
+              "text-neutral-900 dark:text-neutral-100",
+              `focus:outline-none focus:ring-2 ${colors.inputRing}`
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "h3",
           {
-            src: template.previewImage,
-            alt: template.title,
-            className: "w-full h-full object-cover object-top"
+            onDoubleClick: handleDoubleClick,
+            className: chunkTMZLQK74_js.cn(
+              "text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate",
+              editable && `cursor-text ${colors.textHover}`
+            ),
+            title: editable ? "Double-click to rename" : displayName,
+            children: displayName
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-neutral-900 dark:text-neutral-100 truncate", children: template.title }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -568,12 +822,13 @@ var TemplateListItem = ({
             onClick: (e) => onPreviewClick(e, template.previewUrl),
             className: chunkTMZLQK74_js.cn(
               "p-2 rounded-lg transition-all duration-200 flex-shrink-0",
-              "text-neutral-500 dark:text-neutral-400",
-              "hover:bg-neutral-100 dark:hover:bg-neutral-700",
-              "hover:text-blue-600 dark:hover:text-blue-400"
+              "text-neutral-400 dark:text-neutral-500",
+              "opacity-0 group-hover:opacity-100",
+              colors.hoverBgDark,
+              colors.textHover
             ),
-            "aria-label": `Preview ${template.title}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 18 })
+            "aria-label": `Preview ${displayName}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 16 })
           }
         )
       ]
@@ -707,10 +962,34 @@ var Toast = ({
   );
 };
 
+Object.defineProperty(exports, "Globe", {
+  enumerable: true,
+  get: function () { return lucideReact.Globe; }
+});
+Object.defineProperty(exports, "Moon", {
+  enumerable: true,
+  get: function () { return lucideReact.Moon; }
+});
+Object.defineProperty(exports, "Orbit", {
+  enumerable: true,
+  get: function () { return lucideReact.Orbit; }
+});
+Object.defineProperty(exports, "Rocket", {
+  enumerable: true,
+  get: function () { return lucideReact.Rocket; }
+});
+Object.defineProperty(exports, "Sparkles", {
+  enumerable: true,
+  get: function () { return lucideReact.Sparkles; }
+});
+Object.defineProperty(exports, "Star", {
+  enumerable: true,
+  get: function () { return lucideReact.Star; }
+});
 exports.AnimatedButton = AnimatedButton;
 exports.Input = Input;
 exports.TemplateSelector = TemplateSelector;
 exports.TextButton = TextButton;
 exports.Toast = Toast;
-//# sourceMappingURL=chunk-24KNWDO5.js.map
-//# sourceMappingURL=chunk-24KNWDO5.js.map
+//# sourceMappingURL=chunk-BWR6DSQJ.js.map
+//# sourceMappingURL=chunk-BWR6DSQJ.js.map