@pos-360/horizon 0.1.0 → 0.2.1

package/dist/{chunk-6YAK6HNR.mjs → chunk-TQPMV72P.mjs}

@@ -1,7 +1,10 @@
-import { motion } from 'framer-motion';
+import { cn } from './chunk-TDRL2RCT.mjs';
+import { motion, AnimatePresence } from 'framer-motion';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
 import { forwardRef, useState, useEffect } from 'react';
-import { Info, ChevronDown, ChevronUp, Check, AlertTriangle, X } from 'lucide-react';
+import { Info, ChevronDown, ChevronUp, LayoutGrid, List, Check, ExternalLink, AlertTriangle, X, Moon, Rocket, Star, Globe, Orbit, Sparkles } from 'lucide-react';
+export { Globe, Moon, Orbit, Rocket, Sparkles, Star } from 'lucide-react';
 
 var AnimatedButton = ({
   label,
@@ -340,6 +343,479 @@ var Input = 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: Sparkles,
+  andromeda: Orbit,
+  cosmos: Globe,
+  stellar: Star,
+  voyager: Rocket,
+  eclipse: Moon
+};
+var getTemplateIcon = (template) => {
+  if (template.icon) return template.icon;
+  const key = template.title.toLowerCase();
+  return defaultIconMap[key] || Star;
+};
+var TemplateSelector = ({
+  templates,
+  value,
+  onChange,
+  onNameChange,
+  defaultView = "card",
+  showViewToggle = true,
+  editable = false,
+  className,
+  cardClassName,
+  columns = 3,
+  accentColor = "blue"
+}) => {
+  const colors = accentColors[accentColor];
+  const [view, setView] = useState(defaultView);
+  const [selectedId, setSelectedId] = useState(value);
+  React.useEffect(() => {
+    setSelectedId(value);
+  }, [value]);
+  const handleSelect = (templateId) => {
+    setSelectedId(templateId);
+    onChange?.(templateId);
+  };
+  const handlePreviewClick = (e, previewUrl) => {
+    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__ */ jsxs("div", { className: cn("w-full", className), children: [
+    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: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setView("card"),
+          className: cn(
+            "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__ */ jsx(LayoutGrid, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setView("list"),
+          className: cn(
+            "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__ */ jsx(List, { size: 16 })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: view === "card" ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        transition: { duration: 0.2 },
+        className: cn("grid gap-4", columnClasses[columns]),
+        children: templates.map((template) => /* @__PURE__ */ jsx(
+          TemplateCard,
+          {
+            template,
+            isSelected: selectedId === template.id,
+            onSelect: handleSelect,
+            onPreviewClick: handlePreviewClick,
+            onNameChange: handleNameChange,
+            editable,
+            className: cardClassName,
+            colors
+          },
+          template.id
+        ))
+      },
+      "card-view"
+    ) : /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        transition: { duration: 0.2 },
+        className: "flex flex-col gap-2",
+        children: templates.map((template) => /* @__PURE__ */ jsx(
+          TemplateListItem,
+          {
+            template,
+            isSelected: selectedId === template.id,
+            onSelect: handleSelect,
+            onPreviewClick: handlePreviewClick,
+            onNameChange: handleNameChange,
+            editable,
+            colors
+          },
+          template.id
+        ))
+      },
+      "list-view"
+    ) })
+  ] });
+};
+var TemplateCard = ({
+  template,
+  isSelected,
+  onSelect,
+  onPreviewClick,
+  onNameChange,
+  editable,
+  className,
+  colors
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(template.name || template.title);
+  const inputRef = React.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.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      whileHover: { y: -4, scale: 1.02 },
+      whileTap: { scale: 0.98 },
+      transition: { type: "spring", stiffness: 400, damping: 25 },
+      onClick: () => onSelect(template.id),
+      className: cn(
+        "group relative cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-300",
+        "bg-white dark:bg-neutral-800",
+        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: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "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__ */ jsx(Check, { size: 12, className: "text-white", strokeWidth: 3 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => onPreviewClick(e, template.previewUrl),
+            className: cn(
+              "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-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 ${displayName}`,
+            children: /* @__PURE__ */ jsx(ExternalLink, { size: 14 })
+          }
+        ),
+        /* @__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(
+          motion.div,
+          {
+            initial: { scale: 0.9, opacity: 0.5 },
+            animate: { scale: 1, opacity: 1 },
+            className: cn(
+              "p-6 rounded-full transition-all duration-300",
+              isSelected ? colors.selected : `bg-neutral-100 dark:bg-neutral-700/50 ${colors.hoverBg}`
+            ),
+            children: /* @__PURE__ */ jsx(
+              IconComponent,
+              {
+                size: 48,
+                strokeWidth: 1.5,
+                className: cn(
+                  "transition-colors duration-300",
+                  isSelected ? colors.iconSelected : `text-neutral-400 dark:text-neutral-500 ${colors.iconHover}`
+                )
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-neutral-100 dark:border-neutral-700", children: isEditing ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation(),
+            className: 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__ */ jsx(
+          "h3",
+          {
+            onDoubleClick: handleDoubleClick,
+            className: 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
+          }
+        ) })
+      ]
+    }
+  );
+};
+var TemplateListItem = ({
+  template,
+  isSelected,
+  onSelect,
+  onPreviewClick,
+  onNameChange,
+  editable,
+  colors
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(template.name || template.title);
+  const inputRef = React.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.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      whileHover: { x: 4, scale: 1.01 },
+      whileTap: { scale: 0.995 },
+      transition: { type: "spring", stiffness: 400, damping: 25 },
+      onClick: () => onSelect(template.id),
+      className: cn(
+        "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 ? `${colors.selectedBorder} shadow-md ${colors.selectedGlow}` : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all duration-200",
+              isSelected ? colors.checkBg : "bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600"
+            ),
+            children: isSelected && /* @__PURE__ */ jsx(Check, { size: 12, className: "text-white", strokeWidth: 3 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: 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: /* @__PURE__ */ jsx(
+              IconComponent,
+              {
+                size: 24,
+                strokeWidth: 1.5,
+                className: cn(
+                  "transition-colors duration-300",
+                  isSelected ? colors.iconSelected : `text-neutral-400 dark:text-neutral-500 ${colors.iconHover}`
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: isEditing ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation(),
+            className: 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__ */ jsx(
+          "h3",
+          {
+            onDoubleClick: handleDoubleClick,
+            className: 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__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => onPreviewClick(e, template.previewUrl),
+            className: cn(
+              "p-2 rounded-lg transition-all duration-200 flex-shrink-0",
+              "text-neutral-400 dark:text-neutral-500",
+              "opacity-0 group-hover:opacity-100",
+              colors.hoverBgDark,
+              colors.textHover
+            ),
+            "aria-label": `Preview ${displayName}`,
+            children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+TemplateSelector.displayName = "TemplateSelector";
 var TextButton = ({
   children,
   onClick,
@@ -466,6 +942,6 @@ var Toast = ({
   );
 };
 
-export { AnimatedButton, Input, TextButton, Toast };
-//# sourceMappingURL=chunk-6YAK6HNR.mjs.map
-//# sourceMappingURL=chunk-6YAK6HNR.mjs.map
+export { AnimatedButton, Input, TemplateSelector, TextButton, Toast };
+//# sourceMappingURL=chunk-TQPMV72P.mjs.map
+//# sourceMappingURL=chunk-TQPMV72P.mjs.map