@dyrected/admin 1.0.1

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

@@ -0,0 +1,128 @@
+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="flex flex-col h-full bg-muted/20 border-l border-border/60">
+      <div className="flex items-center justify-between px-4 py-2 bg-white border-b border-border/40">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className={`h-8 w-8 ${viewMode === 'desktop' ? 'bg-muted' : ''}`}
+            onClick={() => setViewMode('desktop')}
+          >
+            <Monitor className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={`h-8 w-8 ${viewMode === 'mobile' ? 'bg-muted' : ''}`}
+            onClick={() => setViewMode('mobile')}
+          >
+            <Smartphone className="h-4 w-4" />
+          </Button>
+
+          {viewMode === 'desktop' && (
+            <div className="flex items-center gap-1 ml-2 pl-2 border-l border-border/40">
+              <span className="text-[10px] font-bold text-muted-foreground/50 uppercase tracking-wider 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="flex items-center gap-2">
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={reload}>
+            <RotateCcw className="h-3.5 w-3.5" />
+          </Button>
+          <Button variant="ghost" size="icon" className="h-8 w-8" asChild>
+            <a href={previewUrl} target="_blank" rel="noreferrer">
+              <ExternalLink className="h-3.5 w-3.5" />
+            </a>
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex items-center justify-center p-0 overflow-hidden 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="border-none transition-transform 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

@@ -0,0 +1,66 @@
+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="space-y-2">
+      <div 
+        ref={containerRef}
+        className={cn("relative cursor-crosshair overflow-hidden rounded-xl border border-border/40 bg-muted/20 group", className)}
+        onClick={handleClick}
+      >
+        <img 
+          src={url} 
+          alt="Focal point picker" 
+          className="w-full h-auto pointer-events-none select-none max-h-[400px] object-contain bg-checkered" 
+        />
+        
+        {/* Focal point indicator */}
+        <div 
+          className="absolute w-8 h-8 -ml-4 -mt-4 border-2 border-white rounded-full shadow-2xl flex items-center justify-center pointer-events-none transition-all duration-200 ease-out"
+          style={{ left: `${focalPoint.x}%`, top: `${focalPoint.y}%` }}
+        >
+          <div className="w-1.5 h-1.5 bg-white rounded-full shadow-sm" />
+          <div className="absolute w-full h-px bg-white/40" />
+          <div className="absolute h-full w-px bg-white/40" />
+        </div>
+        
+        <div className="absolute bottom-3 left-3 bg-black/60 backdrop-blur-md px-2.5 py-1 rounded-lg text-[10px] text-white font-bold tracking-widest border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity">
+          X: {focalPoint.x}% / Y: {focalPoint.y}%
+        </div>
+      </div>
+      <p className="text-[10px] text-muted-foreground font-medium px-1">
+        Click on the image to set the focal point for smart cropping.
+      </p>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,32 @@
+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="flex flex-col items-center justify-center h-[300px] border-2 border-dashed border-border/60 rounded-3xl bg-muted/5">
+        <p className="text-sm text-muted-foreground font-medium">No media assets found</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
+      {items.map((item) => (
+        <MediaCard
+          key={item.id}
+          item={item}
+          baseUrl={baseUrl}
+          onDelete={onDelete}
+          editPath={`/collections/${slug}/edit/${item.id}`}
+        />
+      ))}
+    </div>
+  )
+}