@dyrected/admin 2.4.0 → 2.4.1

package/src/components/live-preview/LivePreviewPane.tsx

@@ -1,128 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { Button } from '../ui/button';
-import { ExternalLink, Smartphone, Monitor, RotateCcw } from 'lucide-react';
-
-interface LivePreviewPaneProps {
-  previewUrl: string;
-  data: any;
-  mode?: 'postMessage' | 'token';
-}
-
-export function LivePreviewPane({ previewUrl, data, mode = 'postMessage' }: LivePreviewPaneProps) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [isReady, setIsReady] = useState(false);
-  const [viewMode, setViewMode] = useState<'desktop' | 'mobile'>('desktop');
-  const [zoom, setZoom] = useState(0.50); // 85% zoom by default for desktop
-
-  // Handle postMessage communication
-  useEffect(() => {
-    if (mode !== 'postMessage') return;
-
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === 'dyrected-live-preview-ready') {
-        setIsReady(true);
-        // Send initial data once ready
-        iframeRef.current?.contentWindow?.postMessage(
-          { type: 'dyrected-live-preview', data },
-          '*'
-        );
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [mode, data]);
-
-  // Sync data whenever it changes
-  useEffect(() => {
-    if (mode === 'postMessage' && isReady) {
-      iframeRef.current?.contentWindow?.postMessage(
-        { type: 'dyrected-live-preview', data },
-        '*'
-      );
-    }
-  }, [data, isReady, mode]);
-
-  const reload = () => {
-    if (iframeRef.current) {
-      iframeRef.current.src = previewUrl;
-      setIsReady(false);
-    }
-  };
-
-  return (
-    <div className="dy-flex dy-flex-col dy-h-full dy-bg-muted/20 dy-border-l dy-border-border/60">
-      <div className="dy-flex dy-items-center dy-justify-between dy-px-4 dy-py-2 dy-bg-white dy-border-b dy-border-border/40">
-        <div className="dy-flex dy-items-center dy-gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            className={`h-8 w-8 ${viewMode === 'desktop' ? 'bg-muted' : ''}`}
-            onClick={() => setViewMode('desktop')}
-          >
-            <Monitor className="dy-h-4 dy-w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className={`h-8 w-8 ${viewMode === 'mobile' ? 'bg-muted' : ''}`}
-            onClick={() => setViewMode('mobile')}
-          >
-            <Smartphone className="dy-h-4 dy-w-4" />
-          </Button>
-
-          {viewMode === 'desktop' && (
-            <div className="dy-flex dy-items-center dy-gap-1 dy-ml-2 dy-pl-2 dy-border-l dy-border-border/40">
-              <span className="dy-text-[10px] dy-font-bold dy-text-muted-foreground/50 dy-uppercase dy-tracking-wider dy-mr-1">Zoom</span>
-              {[0.50, 0.75, 1.0].map((z) => (
-                <Button
-                  key={z}
-                  variant="ghost"
-                  size="sm"
-                  className={`h-7 px-2 text-[10px] font-medium ${zoom === z ? 'bg-primary/10 text-primary' : 'text-muted-foreground/60'}`}
-                  onClick={() => setZoom(z)}
-                >
-                  {Math.round(z * 100)}%
-                </Button>
-              ))}
-            </div>
-          )}
-        </div>
-
-        <div className="dy-flex dy-items-center dy-gap-2">
-          <Button variant="ghost" size="icon" className="dy-h-8 dy-w-8" onClick={reload}>
-            <RotateCcw className="dy-h-3.5 dy-w-3.5" />
-          </Button>
-          <Button variant="ghost" size="icon" className="dy-h-8 dy-w-8" asChild>
-            <a href={previewUrl} target="_blank" rel="noreferrer">
-              <ExternalLink className="dy-h-3.5 dy-w-3.5" />
-            </a>
-          </Button>
-        </div>
-      </div>
-
-      <div className="dy-flex-1 dy-flex dy-items-center dy-justify-center dy-p-0 dy-overflow-hidden dy-bg-muted/5">
-        <div
-          className={`bg-white shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 overflow-hidden border border-border/40 ${viewMode === 'mobile' ? 'w-[375px] h-[667px]' : 'w-full h-full'
-            }`}
-        >
-          <iframe
-            ref={iframeRef}
-            src={previewUrl}
-            className="dy-border-none dy-transition-transform dy-duration-300"
-            style={viewMode === 'desktop' ? {
-              width: `${100 / zoom}%`,
-              height: `${100 / zoom}%`,
-              transform: `scale(${zoom})`,
-              transformOrigin: 'top left',
-            } : {
-              width: '100%',
-              height: '100%',
-            }}
-            title="Live Preview"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/media/focal-point-picker.tsx

@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cn } from "../../lib/utils"
-
-interface FocalPoint {
-  x: number;
-  y: number;
-}
-
-interface FocalPointPickerProps {
-  url: string;
-  value?: FocalPoint;
-  onChange: (value: FocalPoint) => void;
-  className?: string;
-}
-
-export function FocalPointPicker({ url, value, onChange, className }: FocalPointPickerProps) {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  
-  const focalPoint = value || { x: 50, y: 50 };
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (!containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    const x = Math.round(((e.clientX - rect.left) / rect.width) * 100);
-    const y = Math.round(((e.clientY - rect.top) / rect.height) * 100);
-    
-    // Clamp values between 0 and 100
-    const clampedX = Math.max(0, Math.min(100, x));
-    const clampedY = Math.max(0, Math.min(100, y));
-    
-    onChange({ x: clampedX, y: clampedY });
-  };
-
-  return (
-    <div className="dy-space-y-2">
-      <div 
-        ref={containerRef}
-        className={cn("dy-relative dy-cursor-crosshair dy-overflow-hidden dy-rounded-xl dy-border dy-border-border/40 dy-bg-muted/20 dy-group", className)}
-        onClick={handleClick}
-      >
-        <img 
-          src={url} 
-          alt="Focal point picker" 
-          className="dy-w-full dy-h-auto dy-pointer-events-none dy-select-none dy-max-h-[400px] dy-object-contain dy-bg-checkered" 
-        />
-        
-        {/* Focal point indicator */}
-        <div 
-          className="dy-absolute dy-w-8 dy-h-8 dy--ml-4 dy--mt-4 dy-border-2 dy-border-white dy-rounded-full dy-shadow-2xl dy-flex dy-items-center dy-justify-center dy-pointer-events-none dy-transition-all dy-duration-200 dy-ease-out"
-          style={{ left: `${focalPoint.x}%`, top: `${focalPoint.y}%` }}
-        >
-          <div className="dy-w-1.5 dy-h-1.5 dy-bg-white dy-rounded-full dy-shadow-sm" />
-          <div className="dy-absolute dy-w-full dy-h-px dy-bg-white/40" />
-          <div className="dy-absolute dy-h-full dy-w-px dy-bg-white/40" />
-        </div>
-        
-        <div className="dy-absolute dy-bottom-3 dy-left-3 dy-bg-black/60 dy-backdrop-blur-md dy-px-2.5 dy-py-1 dy-rounded-lg dy-text-[10px] dy-text-white dy-font-bold dy-tracking-widest dy-border dy-border-white/10 dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity">
-          X: {focalPoint.x}% / Y: {focalPoint.y}%
-        </div>
-      </div>
-      <p className="dy-text-[10px] dy-text-muted-foreground dy-font-medium dy-px-1">
-        Click on the image to set the focal point for smart cropping.
-      </p>
-    </div>
-  );
-}

package/src/components/media/media-card.tsx

@@ -1,44 +0,0 @@
-import { Link } from "react-router-dom"
-import { Pencil, Trash2 } from "lucide-react"
-import { Button } from "../ui/button"
-import { getMediaUrl } from "../../lib/utils"
-
-interface MediaCardProps {
-  item: any
-  baseUrl: string
-  onDelete: (id: string) => void
-  editPath: string
-}
-
-export function MediaCard({ item, baseUrl, onDelete, editPath }: MediaCardProps) {
-  const url = getMediaUrl(item, baseUrl)
-  
-  return (
-    <div className="dy-group dy-relative dy-aspect-square dy-rounded-2xl dy-overflow-hidden dy-bg-white dy-border dy-border-border/40 dy-shadow-sm hover:dy-shadow-xl hover:dy-border-primary/20 dy-transition-all dy-duration-300">
-      <img 
-        src={url}
-        alt={item.filename}
-        className="dy-w-full dy-h-full dy-object-cover dy-transition-transform dy-duration-500 dy-group-hover:dy-scale-110"
-      />
-      <div className="dy-absolute dy-inset-0 dy-bg-black/40 dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-all dy-duration-300 dy-flex dy-items-center dy-justify-center dy-gap-3 dy-backdrop-blur-[2px]">
-        <Link to={editPath}>
-          <Button size="icon" variant="secondary" className="dy-h-9 dy-w-9 dy-rounded-full dy-bg-white/90 hover:dy-bg-white dy-text-foreground dy-shadow-lg dy-transform dy-translate-y-2 dy-group-hover:dy-translate-y-0 dy-transition-transform dy-duration-300">
-            <Pencil className="dy-h-4 dy-w-4" />
-          </Button>
-        </Link>
-        <Button 
-          size="icon" 
-          variant="destructive" 
-          className="dy-h-9 dy-w-9 dy-rounded-full dy-bg-destructive/90 hover:dy-bg-destructive dy-shadow-lg dy-transform dy-translate-y-2 dy-group-hover:dy-translate-y-0 dy-transition-transform dy-duration-300 dy-delay-75"
-          onClick={() => onDelete(item.id)}
-        >
-          <Trash2 className="dy-h-4 dy-w-4" />
-        </Button>
-      </div>
-      <div className="dy-absolute dy-bottom-0 dy-left-0 dy-right-0 dy-p-3 dy-bg-gradient-to-t dy-from-black/80 dy-via-black/40 dy-to-transparent dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity dy-duration-300">
-        <p className="dy-text-[10px] dy-text-white dy-truncate dy-font-medium">{item.filename}</p>
-        <p className="dy-text-[8px] dy-text-white/60 dy-uppercase dy-tracking-wider dy-mt-0.5">{item.mimeType}</p>
-      </div>
-    </div>
-  )
-}

package/src/components/media/media-grid.tsx

@@ -1,32 +0,0 @@
-import { MediaCard } from "./media-card"
-
-interface MediaGridProps {
-  items: any[]
-  baseUrl: string
-  onDelete: (id: string) => void
-  slug: string
-}
-
-export function MediaGrid({ items, baseUrl, onDelete, slug }: MediaGridProps) {
-  if (!items || items.length === 0) {
-    return (
-      <div className="dy-flex dy-flex-col dy-items-center dy-justify-center dy-h-[300px] dy-border-2 dy-border-dashed dy-border-border/60 dy-rounded-3xl dy-bg-muted/5">
-        <p className="dy-text-sm dy-text-muted-foreground dy-font-medium">No media assets found</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="dy-grid dy-grid-cols-2 sm:dy-grid-cols-3 md:dy-grid-cols-4 lg:dy-grid-cols-6 dy-gap-6">
-      {items.map((item) => (
-        <MediaCard
-          key={item.id}
-          item={item}
-          baseUrl={baseUrl}
-          onDelete={onDelete}
-          editPath={`/collections/${slug}/edit/${item.id}`}
-        />
-      ))}
-    </div>
-  )
-}