@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/rich-text-editor/slash-commands-extension.ts

@@ -0,0 +1,220 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+import type { SlashCommand } from '@/lib/ai-providers';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    slashCommands: {
+      selectSlashCommand: (index: number) => ReturnType;
+    };
+  }
+}
+
+export interface SlashCommandsOptions {
+  commands: SlashCommand[];
+  onSelectCommand: (command: SlashCommand) => void;
+}
+
+const slashCommandsPluginKey = new PluginKey('slashCommands');
+
+export const SlashCommandsExtension = Extension.create<SlashCommandsOptions>({
+  name: 'slashCommands',
+
+  addOptions() {
+    return {
+      commands: [],
+      onSelectCommand: () => {},
+    };
+  },
+
+  addCommands() {
+    return {
+      selectSlashCommand: (index: number) => ({ editor }) => {
+        const state = slashCommandsPluginKey.getState(editor.state);
+        if (state && state.active && state.filteredCommands[index]) {
+          const command = state.filteredCommands[index];
+          
+          // Clear the slash command
+          const { from, to } = state.range;
+          editor.chain()
+            .deleteRange({ from, to })
+            .focus()
+            .run();
+          
+          // Execute the command
+          this.options.onSelectCommand(command);
+          
+          return true;
+        }
+        return false;
+      },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      ArrowUp: ({ editor }) => {
+        const state = slashCommandsPluginKey.getState(editor.state);
+        if (state && state.active) {
+          const newIndex = state.selectedIndex > 0 ? state.selectedIndex - 1 : state.filteredCommands.length - 1;
+          editor.view.dispatch(
+            editor.state.tr.setMeta(slashCommandsPluginKey, { selectedIndex: newIndex })
+          );
+          return true;
+        }
+        return false;
+      },
+      ArrowDown: ({ editor }) => {
+        const state = slashCommandsPluginKey.getState(editor.state);
+        if (state && state.active) {
+          const newIndex = state.selectedIndex < state.filteredCommands.length - 1 ? state.selectedIndex + 1 : 0;
+          editor.view.dispatch(
+            editor.state.tr.setMeta(slashCommandsPluginKey, { selectedIndex: newIndex })
+          );
+          return true;
+        }
+        return false;
+      },
+      Enter: ({ editor }) => {
+        const state = slashCommandsPluginKey.getState(editor.state);
+        if (state && state.active) {
+          editor.commands.selectSlashCommand(state.selectedIndex);
+          return true;
+        }
+        return false;
+      },
+      Escape: ({ editor }) => {
+        const state = slashCommandsPluginKey.getState(editor.state);
+        if (state && state.active) {
+          editor.view.dispatch(
+            editor.state.tr.setMeta(slashCommandsPluginKey, { active: false })
+          );
+          return true;
+        }
+        return false;
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: slashCommandsPluginKey,
+        state: {
+          init() {
+            return {
+              active: false,
+              range: { from: 0, to: 0 },
+              query: '',
+              filteredCommands: [],
+              selectedIndex: 0,
+            };
+          },
+          apply(transaction, value, oldState, newState) {
+            const meta = transaction.getMeta(slashCommandsPluginKey);
+            if (meta) {
+              return { ...value, ...meta };
+            }
+
+            // Check for slash character
+            const { selection } = newState;
+            const { empty, $from } = selection;
+            
+            if (!empty) {
+              return { ...value, active: false };
+            }
+
+            const textBefore = $from.parent.textBetween(
+              Math.max(0, $from.parentOffset - 50),
+              $from.parentOffset,
+              null,
+              '\ufffc'
+            );
+
+            const match = textBefore.match(/\/(\w*)$/);
+            
+            if (match) {
+              const query = match[1].toLowerCase();
+              const filteredCommands = this.options.commands.filter(cmd => 
+                cmd.command.toLowerCase().includes(query) ||
+                cmd.description.toLowerCase().includes(query)
+              );
+
+              return {
+                active: true,
+                range: {
+                  from: $from.pos - match[0].length,
+                  to: $from.pos,
+                },
+                query,
+                filteredCommands,
+                selectedIndex: 0,
+              };
+            }
+
+            return { ...value, active: false };
+          },
+        },
+        props: {
+          decorations(state) {
+            const pluginState = this.getState(state);
+            if (!pluginState.active) {
+              return DecorationSet.empty;
+            }
+
+            // Slash menu decoration
+            const { from } = pluginState.range;
+            const decoration = Decoration.widget(from, () => {
+              const container = document.createElement('div');
+              container.className = 'slash-commands-menu';
+
+              pluginState.filteredCommands.forEach((cmd, index) => {
+                const item = document.createElement('div');
+                item.className = `slash-command-item ${index === pluginState.selectedIndex ? 'selected' : ''}`;
+                
+                if (cmd.icon) {
+                  const iconWrapper = document.createElement('div');
+                  iconWrapper.innerHTML = cmd.icon;
+                  item.appendChild(iconWrapper);
+                }
+                
+                const textWrapper = document.createElement('div');
+                
+                const commandName = document.createElement('div');
+                commandName.className = 'command-name';
+                commandName.textContent = `/${cmd.command}`;
+                textWrapper.appendChild(commandName);
+                
+                const commandDesc = document.createElement('div');
+                commandDesc.className = 'command-description';
+                commandDesc.textContent = cmd.description;
+                textWrapper.appendChild(commandDesc);
+                
+                item.appendChild(textWrapper);
+                
+                item.addEventListener('click', () => {
+                  const editor = (state as any).editor;
+                  editor.commands.selectSlashCommand(index);
+                });
+                
+                container.appendChild(item);
+              });
+
+              if (pluginState.filteredCommands.length === 0) {
+                const empty = document.createElement('div');
+                empty.className = 'text-gray-500 p-3 text-sm';
+                empty.textContent = 'No commands found';
+                container.appendChild(empty);
+              }
+
+              return container;
+            });
+
+            return DecorationSet.create(state.doc, [decoration]);
+          },
+        },
+      }),
+    ];
+  },
+});

package/src/components/rich-text-editor/slash-commands.css

@@ -0,0 +1,35 @@
+/* Slash Commands Menu Styles */
+.slash-commands-menu {
+  @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg;
+  @apply max-h-80 overflow-y-auto min-w-[280px] p-2;
+}
+
+.slash-command-item {
+  @apply flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer;
+  @apply hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
+}
+
+.slash-command-item.selected {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.slash-command-item svg {
+  @apply w-4 h-4 text-gray-500 dark:text-gray-400;
+}
+
+.slash-command-item > div {
+  @apply flex-1;
+}
+
+.slash-command-item .command-name {
+  @apply font-medium text-gray-900 dark:text-gray-100 text-sm;
+}
+
+.slash-command-item .command-description {
+  @apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
+}
+
+/* Dark mode support */
+.dark .slash-commands-menu {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+}

package/src/components/rich-text-editor/table-styles.css

@@ -0,0 +1,65 @@
+/* Table styles for RichTextEditor */
+.ProseMirror table {
+  border-collapse: collapse;
+  margin: 0;
+  overflow: hidden;
+  table-layout: fixed;
+  width: 100%;
+  border: 1px solid #d1d5db;
+}
+
+.ProseMirror table td,
+.ProseMirror table th {
+  border: 1px solid #d1d5db;
+  box-sizing: border-box;
+  min-width: 1em;
+  padding: 6px 8px;
+  position: relative;
+  vertical-align: top;
+}
+
+.ProseMirror table th {
+  background-color: #f9fafb;
+  font-weight: 600;
+  text-align: left;
+}
+
+.ProseMirror table .selectedCell:after {
+  background-color: rgba(59, 130, 246, 0.1);
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.ProseMirror table .column-resize-handle {
+  background-color: #3b82f6;
+  bottom: -2px;
+  position: absolute;
+  right: -2px;
+  top: 0;
+  width: 4px;
+  pointer-events: none;
+}
+
+/* Dark mode styles */
+.dark .ProseMirror table {
+  border: 1px solid #374151;
+}
+
+.dark .ProseMirror table td,
+.dark .ProseMirror table th {
+  border: 1px solid #374151;
+}
+
+.dark .ProseMirror table th {
+  background-color: #111827;
+}
+
+.dark .ProseMirror table .selectedCell:after {
+  background-color: rgba(59, 130, 246, 0.2);
+}

package/src/components/spotlight-card/index.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import React, { useRef, useState } from "react"
+import { motion } from "framer-motion"
+import { cn } from "../../lib/utils"
+import { Card, CardContent } from "../ui/card"
+import { Button } from "../ui/button"
+import { Lock, Sparkles } from "lucide-react"
+import { useSubscription } from "../../hooks/use-subscription"
+
+export interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  spotlightColor?: string
+  spotlightSize?: number
+  intensity?: number
+  borderGlow?: boolean
+}
+
+const SpotlightCardInternal = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
+  ({ 
+    children, 
+    className, 
+    spotlightColor = "rgba(255, 255, 255, 0.25)",
+    spotlightSize = 300,
+    intensity = 0.8,
+    borderGlow = true,
+    ...props 
+  }, ref) => {
+    const cardRef = useRef<HTMLDivElement>(null)
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+    const [isHovered, setIsHovered] = useState(false)
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+      if (!cardRef.current) return
+
+      const rect = cardRef.current.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+
+      setMousePosition({ x, y })
+    }
+
+    const handleMouseEnter = () => {
+      setIsHovered(true)
+    }
+
+    const handleMouseLeave = () => {
+      setIsHovered(false)
+    }
+
+    return (
+      <motion.div
+        ref={(node) => {
+          cardRef.current = node
+          if (typeof ref === "function") {
+            ref(node)
+          } else if (ref) {
+            ref.current = node
+          }
+        }}
+        className={cn(
+          "relative overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm",
+          className
+        )}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        whileHover={{ scale: 1.02 }}
+        transition={{ duration: 0.2 }}
+        {...props}
+      >
+        {/* Spotlight effect */}
+        <motion.div
+          className="absolute inset-0 pointer-events-none"
+          animate={{
+            opacity: isHovered ? intensity : 0,
+          }}
+          transition={{ duration: 0.3 }}
+          style={{
+            background: `radial-gradient(${spotlightSize}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor}, transparent 70%)`,
+          }}
+        />
+
+        {/* Secondary glow effect */}
+        <motion.div
+          className="absolute inset-0 pointer-events-none"
+          animate={{
+            opacity: isHovered ? intensity * 0.5 : 0,
+          }}
+          transition={{ duration: 0.4, delay: 0.1 }}
+          style={{
+            background: `radial-gradient(${spotlightSize * 1.5}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor.replace('0.25', '0.1')}, transparent 80%)`,
+          }}
+        />
+
+        {/* Border glow */}
+        {borderGlow && (
+          <motion.div
+            className="absolute inset-0 rounded-lg pointer-events-none"
+            animate={{
+              opacity: isHovered ? 0.6 : 0,
+            }}
+            transition={{ duration: 0.3 }}
+            style={{
+              background: `linear-gradient(135deg, transparent 30%, ${spotlightColor.replace('0.25', '0.4')} 50%, transparent 70%)`,
+              backgroundSize: '200% 200%',
+              backgroundPosition: `${(mousePosition.x / cardRef.current?.offsetWidth!) * 100}% ${(mousePosition.y / cardRef.current?.offsetHeight!) * 100}%`,
+            }}
+          />
+        )}
+
+        {/* Content */}
+        <div className="relative z-10">
+          {children}
+        </div>
+
+        {/* Subtle animated particles */}
+        <motion.div
+          className="absolute inset-0 pointer-events-none"
+          animate={{
+            opacity: isHovered ? 0.3 : 0,
+          }}
+          transition={{ duration: 0.5 }}
+        >
+          {[...Array(3)].map((_, i) => (
+            <motion.div
+              key={i}
+              className="absolute w-1 h-1 bg-white rounded-full"
+              animate={isHovered ? {
+                x: [mousePosition.x, mousePosition.x + Math.random() * 100 - 50],
+                y: [mousePosition.y, mousePosition.y + Math.random() * 100 - 50],
+                opacity: [0, 1, 0],
+                scale: [0, 1, 0],
+              } : {}}
+              transition={{
+                duration: 2,
+                delay: i * 0.2,
+                repeat: isHovered ? Infinity : 0,
+                ease: "easeOut"
+              }}
+              style={{
+                left: mousePosition.x,
+                top: mousePosition.y,
+              }}
+            />
+          ))}
+        </motion.div>
+      </motion.div>
+    )
+  }
+)
+
+SpotlightCardInternal.displayName = "SpotlightCardInternal"
+
+export const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
+  ({ className, ...props }, ref) => {
+    // Check if we're in docs mode or have pro access
+    const docsProAccess = { hasAccess: true } // Pro access assumed in package
+    const { hasProAccess, isLoading } = useSubscription()
+    
+    // In docs mode, always show the component
+    const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+    
+    // If not in docs mode and no pro access, show upgrade prompt
+    if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+      return (
+        <Card className={cn("w-fit", className)}>
+          <CardContent className="py-6 text-center">
+            <div className="space-y-4">
+              <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+                <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
+                <p className="text-muted-foreground text-xs mb-4">
+                  Spotlight Card is available exclusively to MoonUI Pro subscribers.
+                </p>
+                <a href="/pricing">
+                  <Button size="sm">
+                    <Sparkles className="mr-2 h-4 w-4" />
+                    Upgrade to Pro
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )
+    }
+
+    return <SpotlightCardInternal className={className} ref={ref} {...props} />
+  }
+)
+
+SpotlightCard.displayName = "SpotlightCard"

package/src/components/swipeable-card/index.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import React, { ReactNode } from "react"
+import { motion, useMotionValue, useTransform, animate, PanInfo } from "framer-motion"
+import { cn } from "../../lib/utils"
+
+export interface SwipeableCardProps {
+  children: ReactNode
+  onSwipeLeft?: () => void
+  onSwipeRight?: () => void
+  onSwipeStart?: () => void
+  onSwipeEnd?: () => void
+  threshold?: number
+  disabled?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const SwipeableCard = React.forwardRef<HTMLDivElement, SwipeableCardProps>(
+  ({
+    children,
+    onSwipeLeft,
+    onSwipeRight,
+    onSwipeStart,
+    onSwipeEnd,
+    threshold = 100,
+    disabled = false,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const x = useMotionValue(0)
+    const rotate = useTransform(x, [-200, 200], [-30, 30])
+    const likeOpacity = useTransform(x, [0, threshold], [0, 1])
+    const nopeOpacity = useTransform(x, [-threshold, 0], [1, 0])
+
+    const handleDragStart = () => {
+      if (disabled) return
+      onSwipeStart?.()
+    }
+
+    const handleDragEnd = (event: any, info: PanInfo) => {
+      if (disabled) return
+      
+      onSwipeEnd?.()
+      
+      if (Math.abs(info.offset.x) > threshold) {
+        const direction = info.offset.x > 0 ? "right" : "left"
+        const exitX = info.offset.x > 0 ? 400 : -400
+        
+        animate(x, exitX, { duration: 0.3 })
+        
+        if (direction === "right" && onSwipeRight) {
+          onSwipeRight()
+        } else if (direction === "left" && onSwipeLeft) {
+          onSwipeLeft()
+        }
+      } else {
+        animate(x, 0, { type: "spring", stiffness: 300, damping: 20 })
+      }
+    }
+
+    return (
+      <motion.div
+        ref={ref}
+        drag={disabled ? false : "x"}
+        dragConstraints={{ left: -300, right: 300 }}
+        style={{ x, rotate, ...style }}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        className={cn(
+          "relative cursor-grab active:cursor-grabbing select-none",
+          disabled && "cursor-default",
+          className
+        )}
+        {...props}
+      >
+        {/* Like indicator */}
+        <motion.div
+          style={{ opacity: likeOpacity }}
+          className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-lg font-bold text-lg rotate-[15deg] pointer-events-none z-10"
+        >
+          LIKE
+        </motion.div>
+        
+        {/* Nope indicator */}
+        <motion.div
+          style={{ opacity: nopeOpacity }}
+          className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-lg font-bold text-lg rotate-[-15deg] pointer-events-none z-10"
+        >
+          NOPE
+        </motion.div>
+        
+        {children}
+      </motion.div>
+    )
+  }
+)
+
+SwipeableCard.displayName = "SwipeableCard"