@kyro-cms/admin 0.11.6 → 0.12.1

package/src/components/GraphQLPlayground.tsx

@@ -23,6 +23,7 @@ import {
   Play,
   Clock,
   Terminal,
+  Search,
 } from "./ui/icons";
 
 function ChevronDown({ className }: { className?: string }) {
@@ -246,14 +247,42 @@ function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation:
   const returnTypeName = resolveTypeName(field.type);
   const returnType = schema.types.find((t) => t.name === returnTypeName);
 
-  function collectFields(fields: FieldInfo[], indent: number): string[] {
+  function buildTypeMap(): Map<string, TypeInfo> {
+    const m = new Map<string, TypeInfo>();
+    for (const t of schema.types) m.set(t.name, t);
+    return m;
+  }
+  const localTypeMap = buildTypeMap();
+
+  function collectFieldsWithUnions(fields: FieldInfo[], indent: number, _typeMap: Map<string, TypeInfo>): string[] {
     const lines: string[] = [];
     for (const f of fields) {
       if (f.isDeprecated) continue;
       const typeName = resolveTypeName(f.type);
+      const returnInfo = _typeMap.get(typeName);
       const pad = "  ".repeat(indent);
       if (isScalarType(typeName) || typeName === "JSON") {
         lines.push(`${pad}${f.name}`);
+      } else if (returnInfo && (returnInfo.kind === "UNION" || returnInfo.kind === "INTERFACE")) {
+        lines.push(`${pad}${f.name} {`);
+        lines.push(`${pad}  __typename`);
+        for (const pt of returnInfo.possibleTypes || []) {
+          const ptInfo = _typeMap.get(pt.name);
+          if (!ptInfo?.fields) continue;
+          lines.push(`${pad}  ... on ${pt.name} {`);
+          for (const pf of ptInfo.fields) {
+            if (pf.isDeprecated) continue;
+            const pfTypeName = resolveTypeName(pf.type);
+            const pfPad = "  ".repeat(indent + 2);
+            if (isScalarType(pfTypeName) || pfTypeName === "JSON") {
+              lines.push(`${pfPad}${pf.name}`);
+            } else {
+              lines.push(`${pfPad}${pf.name} { id }`);
+            }
+          }
+          lines.push(`${pad}  }`);
+        }
+        lines.push(`${pad}}`);
       } else {
         lines.push(`${pad}${f.name} { id }`);
       }
@@ -269,12 +298,12 @@ function generateSkeletonQuery(field: FieldInfo, schema: SchemaInfo, isMutation:
   if (docField && isMutation) {
     const docTypeName = resolveTypeName(docField.type);
     const docType = schema.types.find((t) => t.name === docTypeName);
-    const docLines = collectFields(docType?.fields?.filter((f) => !f.isDeprecated) || [], 1);
+    const docLines = collectFieldsWithUnions(docType?.fields?.filter((f) => !f.isDeprecated) || [], 1, localTypeMap);
     selection = ["  doc {", ...docLines, "  }"]
       .concat(messageField ? ["  message"] : [])
       .join("\n");
   } else {
-    selection = collectFields(returnType?.fields || [], 1).join("\n");
+    selection = collectFieldsWithUnions(returnType?.fields || [], 1, localTypeMap).join("\n");
   }
 
   const args = field.args
@@ -358,6 +387,8 @@ interface TypeInfo {
   fields?: FieldInfo[];
   inputFields?: FieldInfo[];
   enumValues?: { name: string; description?: string; isDeprecated: boolean }[];
+  possibleTypes?: { name: string; kind: string }[];
+  interfaces?: { name: string; kind: string }[];
   isDeprecated?: boolean;
 }
 
@@ -502,6 +533,8 @@ export function GraphQLPlayground({
                     description
                     isDeprecated
                   }
+                  possibleTypes { name kind }
+                  interfaces { name kind }
                 }
               }
             }
@@ -524,6 +557,93 @@ export function GraphQLPlayground({
     if (showDocs && !schema) fetchSchema();
   }, [showDocs, schema, fetchSchema]);
 
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const typeMap = useMemo(() => {
+    const m = new Map<string, TypeInfo>();
+    if (!schema) return m;
+    for (const t of schema.types) {
+      m.set(t.name, t);
+    }
+    return m;
+  }, [schema]);
+
+  interface SearchResult {
+    typeName: string;
+    fieldPath: string;
+    typeInfo: TypeInfo;
+    fieldInfo?: FieldInfo;
+  }
+
+  const searchResults = useMemo(() => {
+    if (!searchQuery.trim() || !schema) return [];
+    const q = searchQuery.toLowerCase();
+    const results: SearchResult[] = [];
+    const seenLabels = new Set<string>();
+
+    for (const type of schema.types) {
+      if (type.name.startsWith("__")) continue;
+      const typeMatch = type.name.toLowerCase().includes(q);
+
+      if (typeMatch && !seenLabels.has(type.name)) {
+        seenLabels.add(type.name);
+        results.push({ typeName: type.name, fieldPath: type.name, typeInfo: type });
+      }
+
+      if (type.fields) {
+        for (const field of type.fields) {
+          const fieldMatch = field.name.toLowerCase().includes(q);
+          if (fieldMatch) {
+            const label = `${type.name} > ${field.name}`;
+            if (!seenLabels.has(label)) {
+              seenLabels.add(label);
+              results.push({ typeName: type.name, fieldPath: label, typeInfo: type, fieldInfo: field });
+            }
+          }
+
+          if (q.length >= 2) {
+            const rtName = resolveTypeName(field.type);
+            const rt = typeMap.get(rtName);
+            if (rt?.fields && (fieldMatch || results.some(r => r.fieldInfo === field))) {
+              for (const sub of rt.fields) {
+                if (sub.name.toLowerCase().includes(q)) {
+                  const label = `${type.name} > ${field.name} > ${sub.name}`;
+                  if (!seenLabels.has(label)) {
+                    seenLabels.add(label);
+                    results.push({ typeName: type.name, fieldPath: label, typeInfo: type, fieldInfo: field });
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    return results;
+  }, [searchQuery, schema, typeMap]);
+
+  const handleSearchSelect = useCallback((result: SearchResult) => {
+    const targetType = result.fieldInfo
+      ? typeMap.get(resolveTypeName(result.fieldInfo.type)) || result.typeInfo
+      : result.typeInfo;
+    setSelectedType(targetType);
+    setSearchQuery("");
+  }, [typeMap]);
+
+  function highlightMatch(text: string, query: string) {
+    if (!query.trim()) return text;
+    const idx = text.toLowerCase().indexOf(query.toLowerCase());
+    if (idx === -1) return text;
+    return (
+      <>
+        {text.slice(0, idx)}
+        <mark className="bg-[var(--kyro-primary)]/20 text-[var(--kyro-primary)] rounded px-0.5">{text.slice(idx, idx + query.length)}</mark>
+        {text.slice(idx + query.length)}
+      </>
+    );
+  }
+
   const handleRun = useCallback(async () => {
     setIsLoading(true);
     setError(null);
@@ -850,9 +970,23 @@ export function GraphQLPlayground({
           <div className="flex-1 overflow-hidden">
             {rightTab === "docs" ? (
               <div className="h-full flex flex-col overflow-hidden bg-[var(--kyro-surface)]">
-                <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--kyro-border)]">
-                  <span className="text-[10px] font-semibold text-[var(--kyro-text-secondary)]">Schema Explorer</span>
-                  <button onClick={() => setShowDocs(false)} className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
+                <div className="flex items-center gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)]">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[var(--kyro-text-muted)]" />
+                    <input
+                      type="text"
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      placeholder="Search types and fields..."
+                      className="w-full pl-7 pr-6 py-1 text-[10px] bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-md text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:border-[var(--kyro-primary)]"
+                    />
+                    {searchQuery && (
+                      <button onClick={() => setSearchQuery("")} className="absolute right-1.5 top-1/2 -translate-y-1/2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]">
+                        <X className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
+                  <button onClick={() => setShowDocs(false)} className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] shrink-0">
                     <X className="w-3.5 h-3.5" />
                   </button>
                 </div>
@@ -863,7 +997,39 @@ export function GraphQLPlayground({
                     </div>
                   ) : schema ? (
                     <div className="space-y-4">
-                      {selectedType ? (
+                      {searchQuery ? (
+                        <div className="space-y-1">
+                          {searchResults.length === 0 ? (
+                            <p className="text-[10px] text-[var(--kyro-text-muted)] py-4 text-center">No results for "{searchQuery}"</p>
+                          ) : (
+                            searchResults.map((r, i) => {
+                              const targetType = r.fieldInfo ? typeMap.get(resolveTypeName(r.fieldInfo.type)) || r.typeInfo : r.typeInfo;
+                              return (
+                                <button
+                                  key={r.fieldPath + i}
+                                  onClick={() => handleSearchSelect(r)}
+                                  className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left group"
+                                >
+                                  <span className="text-[10px] font-mono text-[var(--kyro-text-muted)]">
+                                    {r.fieldPath.split(" > ").map((part, j) => (
+                                      <span key={j}>
+                                        {j > 0 && <span className="mx-1 opacity-40">›</span>}
+                                        <span className={j === r.fieldPath.split(" > ").length - 1 ? "text-[var(--kyro-text-primary)] font-semibold" : "text-[var(--kyro-text-muted)]"}>
+                                          {highlightMatch(part, searchQuery)}
+                                        </span>
+                                      </span>
+                                    ))}
+                                    {targetType && (targetType.kind === "UNION" || targetType.kind === "INTERFACE") && (
+                                      <span className="ml-2 text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1 py-0.5 rounded">⧉</span>
+                                    )}
+                                  </span>
+                                  <ChevronRight className="w-3 h-3 opacity-30 group-hover:opacity-60" />
+                                </button>
+                              );
+                            })
+                          )}
+                        </div>
+                      ) : selectedType ? (
                         <div className="space-y-3">
                           <button
                             onClick={() => setSelectedType(null)}
@@ -878,6 +1044,46 @@ export function GraphQLPlayground({
                               <p className="mt-1.5 text-[11px] text-[var(--kyro-text-secondary)] leading-relaxed">{selectedType.description}</p>
                             )}
                           </div>
+                          {selectedType.kind === "UNION" && selectedType.possibleTypes && (
+                            <div className="space-y-2">
+                              <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Possible Types <span className="text-[8px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1 py-0.5 rounded ml-1">⧉ fragment</span></h4>
+                              <div className="space-y-1">
+                                {selectedType.possibleTypes.map(pt => (
+                                  <button
+                                    key={pt.name}
+                                    onClick={() => {
+                                      const t = typeMap.get(pt.name);
+                                      if (t) setSelectedType(t);
+                                    }}
+                                    className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left group"
+                                  >
+                                    <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{pt.name}</span>
+                                    <ChevronRight className="w-3 h-3 opacity-30 group-hover:opacity-60" />
+                                  </button>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                          {selectedType.kind === "INTERFACE" && selectedType.possibleTypes && (
+                            <div className="space-y-2">
+                              <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Implementing Types <span className="text-[8px] font-mono text-[var(--kyro-text-muted)] bg-[var(--kyro-surface)] px-1 py-0.5 rounded border border-[var(--kyro-border)] ml-1">interface</span></h4>
+                              <div className="space-y-1">
+                                {selectedType.possibleTypes.map(pt => (
+                                  <button
+                                    key={pt.name}
+                                    onClick={() => {
+                                      const t = typeMap.get(pt.name);
+                                      if (t) setSelectedType(t);
+                                    }}
+                                    className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left group"
+                                  >
+                                    <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{pt.name}</span>
+                                    <ChevronRight className="w-3 h-3 opacity-30 group-hover:opacity-60" />
+                                  </button>
+                                ))}
+                              </div>
+                            </div>
+                          )}
                           {selectedType.fields && (
                             <div className="space-y-2">
                               <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">Fields</h4>
@@ -892,9 +1098,46 @@ export function GraphQLPlayground({
                                   >
                                     <div className="flex items-center justify-between gap-2">
                                       <span className="font-semibold text-[11px] text-[var(--kyro-text-primary)]">{f.name}</span>
-                                      <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
+                                      <span className="flex items-center gap-1">
+                                        {(() => {
+                                          const rtName = resolveTypeName(f.type);
+                                          const rt = typeMap.get(rtName);
+                                          const isUnionish = rt && (rt.kind === "UNION" || rt.kind === "INTERFACE");
+                                          return isUnionish ? (
+                                            <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded flex items-center gap-1">
+                                              ⧉
+                                              <span className="text-[8px] opacity-70">fragment</span>
+                                            </span>
+                                          ) : null;
+                                        })()}
+                                        <span className="text-[9px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1.5 py-0.5 rounded">{renderType(f.type)}</span>
+                                      </span>
                                     </div>
                                     {f.description && <p className="text-[10px] text-[var(--kyro-text-secondary)] mt-1">{f.description}</p>}
+                                    {(() => {
+                                      const rtName = resolveTypeName(f.type);
+                                      const rt = typeMap.get(rtName);
+                                      if (rt && (rt.kind === "UNION" || rt.kind === "INTERFACE") && rt.possibleTypes?.length) {
+                                        return (
+                                          <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-primary)]/30 space-y-0.5">
+                                            <span className="text-[8px] font-semibold text-[var(--kyro-text-muted)] uppercase tracking-wider">Possible Types</span>
+                                            <div className="flex flex-wrap gap-1 mt-0.5">
+                                              {rt.possibleTypes.map(pt => {
+                                                const ptInfo = typeMap.get(pt.name);
+                                                const hasFragment = ptInfo && (ptInfo.kind === "OBJECT" || ptInfo.kind === "INTERFACE");
+                                                return (
+                                                  <span key={pt.name} className="text-[9px] font-mono text-[var(--kyro-text-muted)] bg-[var(--kyro-surface)] px-1.5 py-0.5 rounded border border-[var(--kyro-border)]">
+                                                    {pt.name}
+                                                    {hasFragment && <span className="ml-1 text-[8px] text-[var(--kyro-primary)]">⧉</span>}
+                                                  </span>
+                                                );
+                                              })}
+                                            </div>
+                                          </div>
+                                        );
+                                      }
+                                      return null;
+                                    })()}
                                     {f.args && f.args.length > 0 && (
                                       <div className="mt-1.5 pl-3 border-l-2 border-[var(--kyro-border)] space-y-0.5">
                                         {f.args.map(a => (
@@ -934,14 +1177,18 @@ export function GraphQLPlayground({
                           </div>
                           <div className="space-y-1.5">
                             <h4 className="text-[10px] font-semibold tracking-wider text-[var(--kyro-text-muted)] pt-3">All Types</h4>
-                            {schema.types.filter(t => !t.name.startsWith("__") && t.kind === "OBJECT").map(t => (
+                            {schema.types.filter(t => !t.name.startsWith("__") && (t.kind === "OBJECT" || t.kind === "UNION" || t.kind === "INTERFACE")).map(t => (
                               <button
                                 key={t.name}
                                 onClick={() => setSelectedType(t)}
-                                className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left"
+                                className="w-full flex items-center justify-between px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-left group"
                               >
-                                <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{t.name}</span>
-                                <ChevronRight className="w-3 h-3 opacity-30" />
+                                <div className="flex items-center gap-2">
+                                  <span className="text-[11px] font-medium text-[var(--kyro-text-primary)]">{t.name}</span>
+                                  {t.kind === "UNION" && <span className="text-[8px] font-mono text-[var(--kyro-primary)] bg-[var(--kyro-primary)]/10 px-1 py-0.5 rounded">union</span>}
+                                  {t.kind === "INTERFACE" && <span className="text-[8px] font-mono text-[var(--kyro-text-muted)] bg-[var(--kyro-surface)] px-1 py-0.5 rounded border border-[var(--kyro-border)]">interface</span>}
+                                </div>
+                                <ChevronRight className="w-3 h-3 opacity-30 group-hover:opacity-60" />
                               </button>
                             ))}
                           </div>

package/src/components/MediaGallery.tsx

@@ -70,6 +70,23 @@ function getAbsoluteUrl(relativeUrl: unknown): string {
   return `${window.location.origin}${sanitized}`;
 }
 
+function getCroppedUrl(item: MediaItem, width?: number): string | null {
+  if (!item.metadata?.crop) return null;
+  const { x, y, width: cw, height: ch } = item.metadata.crop;
+  if (!cw || !ch) return null;
+  const base = getAbsoluteUrl(item.url);
+  if (!base) return null;
+  const params = new URLSearchParams({ url: item.url });
+  params.set("cx", String(x));
+  params.set("cy", String(y));
+  params.set("cw", String(cw));
+  params.set("ch", String(ch));
+  if (width) params.set("w", String(width));
+  const resizePath = `/api/media/resize?${params.toString()}`;
+  if (typeof window === "undefined") return resizePath;
+  return `${window.location.origin}${resizePath}`;
+}
+
 type FilterType =
   | "all"
   | "image"
@@ -383,12 +400,12 @@ export function MediaGallery({
         crop: cropData,
         hotspot: hotspotData
       };
-      
+
       const result = await apiPatch(`/api/media/${panelItem.id}`, { metadata });
       setItems(prev => prev.map(item => item.id === panelItem.id ? result.doc : item));
       setPanelItem(result.doc);
       setShowCrop(false);
-      toast.success("Focal metadata saved");
+      toast.success("Crop & hotspot saved");
     } catch (err) {
       console.error("Save failed:", err);
       toast.error("Failed to save focal metadata");
@@ -417,71 +434,68 @@ export function MediaGallery({
       })}
     >
       {/* Top Bar */}
-      <div className={`flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`}>
+      <div className={`flex flex-col ${pickerMode ? "gap-2 p-2" : "gap-4 md:gap-6 p-4 md:p-6 rounded-md md:rounded-t-xl surface-tile"} border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 z-10`}>
         {!pickerMode && (
-          <div className="flex items-center gap-4">
+          <div className="flex items-center justify-between w-full">
             <div>
-              <h2 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
+              <h2 className="text-lg md:text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
                 Media Library
               </h2>
-              <div className="flex items-center gap-3 mt-1">
+              <div className="flex items-center gap-2 mt-0.5">
                 <span className="text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] opacity-50">
-                  {total} Items · {formatFileSize(stats.totalSize)}
+                  {total} Items <span className="hidden sm:inline">· {formatFileSize(stats.totalSize)}</span>
                 </span>
               </div>
             </div>
-          </div>
-        )}
-
-        <div className={`flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`}>
-          <div className="relative group flex-1 min-w-[200px]">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
-            <input
-              type="text"
-              placeholder="Search assets..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              className="w-full pl-11 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
-            />
-          </div>
-
-          {!pickerMode && (
-            <>
-              <div className="flex items-center gap-2">
-                <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
-                  <button
-                    onClick={() => setView("grid")}
-                    className={`p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
-                  >
-                    <Grid className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={() => setView("list")}
-                    className={`p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
-                  >
-                    <FileIcon className="w-4 h-4" />
-                  </button>
-                </div>
 
+            <div className="flex items-center gap-2">
+              <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)] hidden sm:flex">
                 <button
-                  onClick={() => setShowMobileFilters(true)}
-                  className="md:hidden p-2 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+                  onClick={() => setView("grid")}
+                  className={`p-1.5 md:p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
                 >
-                  <Filter className="w-4 h-4" />
+                  <Grid className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => setView("list")}
+                  className={`p-1.5 md:p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                >
+                  <FileIcon className="w-4 h-4" />
                 </button>
               </div>
 
+              <button
+                onClick={() => setShowMobileFilters(true)}
+                className="md:hidden p-2 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+              >
+                <Filter className="w-4 h-4" />
+              </button>
+
               {canUpload && (
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  className="flex items-center gap-2 px-6 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-xs shadow-lg active:scale-95 transition-all"
+                  className="flex items-center justify-center gap-2 px-3 md:px-6 py-2 md:py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-xs shadow-lg active:scale-95 transition-all"
                 >
-                  <Maximize2 className="w-4 h-4" />
-                  Upload
+                  <span className="md:hidden text-lg leading-none">+</span>
+                  <Maximize2 className="w-4 h-4 hidden md:block" />
+                  <span className="hidden md:inline">Upload</span>
                 </button>
               )}
-            </>
-          )}
+            </div>
+          </div>
+        )}
+
+        <div className={`flex items-center w-full`}>
+          <div className="relative group flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
+            <input
+              type="text"
+              placeholder="Search assets..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
+            />
+          </div>
         </div>
       </div>
 
@@ -610,7 +624,7 @@ export function MediaGallery({
                   >
                     {item.type === "image" ? (
                       <img
-                        src={item.url}
+                        src={getCroppedUrl(item, 400) || item.url}
                         alt={item.title}
                         className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                         loading="lazy"
@@ -707,7 +721,7 @@ export function MediaGallery({
                             <div className="w-12 h-12 rounded-xl bg-[var(--kyro-bg)] overflow-hidden border border-[var(--kyro-border)] flex-shrink-0 flex items-center justify-center">
                               {item.type === "image" ? (
                                 <img
-                                  src={item.url}
+                                  src={getCroppedUrl(item, 96) || item.url}
                                   alt=""
                                   className="w-full h-full object-cover"
                                 />
@@ -962,7 +976,7 @@ export function MediaGallery({
             <div className="aspect-video w-full rounded-2xl bg-[var(--kyro-bg)] border border-[var(--kyro-border)] overflow-hidden relative group">
               {panelItem.type === "image" ? (
                 <img
-                  src={getAbsoluteUrl(panelItem.url)}
+                  src={getCroppedUrl(panelItem) || getAbsoluteUrl(panelItem.url)}
                   alt=""
                   className="w-full h-full object-contain p-4"
                 />
@@ -1152,7 +1166,7 @@ export function MediaGallery({
           <div className="flex-1 w-full flex items-center justify-center p-12">
             {panelItem.type === "image" ? (
               <img
-                src={getAbsoluteUrl(panelItem.url)}
+                src={getCroppedUrl(panelItem) || getAbsoluteUrl(panelItem.url)}
                 alt=""
                 className="max-h-full max-w-full object-contain shadow-2xl rounded-lg animate-in zoom-in-95 duration-500"
               />