@rslsp1/fa-app-tools 0.1.4 → 0.1.6

package/dist/index.d.mts

@@ -95,7 +95,7 @@ declare const SetupPanel: React.FC<SetupPanelProps>;
 
 interface MediaLibraryProps {
     items: Generation[];
-    onImport: () => void;
+    onImport: (files: FileList) => void;
     onDelete: (id: string) => void;
     onSelect: (item: Generation) => void;
     onToggleSelection: (id: string) => void;

package/dist/index.d.ts

@@ -95,7 +95,7 @@ declare const SetupPanel: React.FC<SetupPanelProps>;
 
 interface MediaLibraryProps {
     items: Generation[];
-    onImport: () => void;
+    onImport: (files: FileList) => void;
     onDelete: (id: string) => void;
     onSelect: (item: Generation) => void;
     onToggleSelection: (id: string) => void;

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -294,10 +304,12 @@ var SetupPanel = ({ onWorkspaceImport, onProjectExport, onProjectImport, project
 };
 
 // src/components/MediaLibrary.tsx
-var import_react7 = require("motion/react");
+var import_react7 = __toESM(require("react"));
+var import_react8 = require("motion/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload }) => {
   const selectedCount = items.filter((i) => i.selectedForExport).length;
+  const fileInputRef = import_react7.default.useRef(null);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-4 border-b border-white/5 gap-3 bg-black/20", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
@@ -308,12 +320,18 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
             " Assets geladen"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { onClick: onImport, className: "flex items-center gap-1.5 px-3 py-1.5 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-[10px] font-bold uppercase transition-all shadow-[0_0_15px_rgba(59,130,246,0.3)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { onClick: () => fileInputRef.current?.click(), className: "flex items-center gap-1.5 px-3 py-1.5 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-[10px] font-bold uppercase transition-all shadow-[0_0_15px_rgba(59,130,246,0.3)]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[16px]", children: "add_photo_alternate" }),
           "Laden"
-        ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: (e) => {
+          if (e.target.files?.length) {
+            onImport(e.target.files);
+            e.target.value = "";
+          }
+        } })
       ] }),
-      selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react7.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, className: "flex items-center justify-between bg-blue-500/10 border border-blue-500/20 p-2 rounded-xl", children: [
+      selectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react8.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, className: "flex items-center justify-between bg-blue-500/10 border border-blue-500/20 p-2 rounded-xl", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[9px] font-bold uppercase text-blue-400 ml-1", children: [
           selectedCount,
           " ausgew\xE4hlt"
@@ -330,18 +348,18 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[12px] font-bold uppercase tracking-widest", children: "Keine Medien" }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] italic", children: "Importiere Assets aus deinem Projekt." })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react7.motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect(item), children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react8.motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect(item), children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: item.base64?.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}`, className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-20 ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-30 pointer-events-auto ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
         e.stopPropagation();
         onToggleSelection(item.id);
       }, children: item.selectedForExport && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px] text-white", children: "check" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover/item:opacity-100 transition-opacity flex flex-col justify-end p-2 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover/item:opacity-100 transition-opacity flex flex-col justify-end p-2 gap-2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[8px] font-bold text-white/80 truncate max-w-[80px] uppercase tracking-tighter", children: item.prompt || "Importiert" }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: (e) => {
           e.stopPropagation();
           onDelete(item.id);
-        }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
+        }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute top-1 right-1 px-1.5 py-0.5 bg-black/60 backdrop-blur-md rounded text-[7px] font-bold text-white/60 uppercase tracking-tight", children: item.type === "import" ? "Library" : "Gen" })
     ] }, item.id)) }) })
@@ -349,10 +367,10 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
 };
 
 // src/components/ListView.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, isActive, isInPath, onFocus, onGenerate, onGenerateBranch, onGenerateSubtree, isGenerating, isCollapsed, toggleCollapse, renderNode, children }) => {
-  const inputRef = (0, import_react8.useRef)(null);
+  const inputRef = (0, import_react9.useRef)(null);
   const hasChildren = children && children.length > 0;
   const handleKeyDown = (e) => {
     if (e.key === "Tab") {
@@ -380,7 +398,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
       onMoveNode(node.id, "down");
     }
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (isActive && inputRef.current) inputRef.current.focus();
   }, [isActive]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col w-full", children: [
@@ -414,7 +432,7 @@ var ListNode = ({ node, depth, onNodeChange, onAddChild, onDeleteNode, onMoveNod
   ] });
 };
 function ListView({ nodes, edges, onNodeChange, onAddChild, onDeleteNode, onMoveNode, onIndentNode, onOutdentNode, onAddSibling, focusedNodeId, onFocus, activePath, onGenerate, onGenerateBranch, onGenerateSubtree, isGeneratingNodeId }) {
-  const [collapsed, setCollapsed] = (0, import_react8.useState)(/* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = (0, import_react9.useState)(/* @__PURE__ */ new Set());
   const toggleCollapse = (id) => {
     setCollapsed((prev) => {
       const next = new Set(prev);

package/dist/index.mjs

@@ -259,10 +259,12 @@ var SetupPanel = ({ onWorkspaceImport, onProjectExport, onProjectImport, project
 };
 
 // src/components/MediaLibrary.tsx
+import React3 from "react";
 import { motion as motion4 } from "motion/react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, onBatchDownload }) => {
   const selectedCount = items.filter((i) => i.selectedForExport).length;
+  const fileInputRef = React3.useRef(null);
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-4 border-b border-white/5 gap-3 bg-black/20", children: [
       /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
@@ -273,10 +275,16 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
             " Assets geladen"
           ] })
         ] }),
-        /* @__PURE__ */ jsxs6("button", { onClick: onImport, className: "flex items-center gap-1.5 px-3 py-1.5 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-[10px] font-bold uppercase transition-all shadow-[0_0_15px_rgba(59,130,246,0.3)]", children: [
+        /* @__PURE__ */ jsxs6("button", { onClick: () => fileInputRef.current?.click(), className: "flex items-center gap-1.5 px-3 py-1.5 bg-blue-500 hover:bg-blue-400 text-white rounded-lg text-[10px] font-bold uppercase transition-all shadow-[0_0_15px_rgba(59,130,246,0.3)]", children: [
           /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-[16px]", children: "add_photo_alternate" }),
           "Laden"
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx8("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: (e) => {
+          if (e.target.files?.length) {
+            onImport(e.target.files);
+            e.target.value = "";
+          }
+        } })
       ] }),
       selectedCount > 0 && /* @__PURE__ */ jsxs6(motion4.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, className: "flex items-center justify-between bg-blue-500/10 border border-blue-500/20 p-2 rounded-xl", children: [
         /* @__PURE__ */ jsxs6("span", { className: "text-[9px] font-bold uppercase text-blue-400 ml-1", children: [
@@ -297,16 +305,16 @@ var MediaLibrary = ({ items, onImport, onDelete, onSelect, onToggleSelection, on
       ] })
     ] }) : /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 gap-3 pb-10", children: items.map((item) => /* @__PURE__ */ jsxs6(motion4.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: `relative aspect-square group/item rounded-xl overflow-hidden border transition-all bg-white/5 cursor-pointer shadow-lg ${item.selectedForExport ? "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.2)]" : "border-white/10 opacity-70 hover:opacity-100"}`, onClick: () => onSelect(item), children: [
       /* @__PURE__ */ jsx8("img", { src: item.base64?.startsWith("data:") ? item.base64 : `data:image/png;base64,${item.base64}`, className: "w-full h-full object-cover transition-transform duration-500 group-hover/item:scale-110", alt: item.prompt }),
-      /* @__PURE__ */ jsx8("div", { className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-20 ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
+      /* @__PURE__ */ jsx8("button", { type: "button", className: `absolute top-2 left-2 w-5 h-5 rounded-md border flex items-center justify-center transition-all z-30 pointer-events-auto ${item.selectedForExport ? "bg-blue-500 border-blue-400" : "bg-black/60 border-white/20"}`, onClick: (e) => {
         e.stopPropagation();
         onToggleSelection(item.id);
       }, children: item.selectedForExport && /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-[14px] text-white", children: "check" }) }),
-      /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover/item:opacity-100 transition-opacity flex flex-col justify-end p-2 gap-2", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover/item:opacity-100 transition-opacity flex flex-col justify-end p-2 gap-2 pointer-events-none", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx8("span", { className: "text-[8px] font-bold text-white/80 truncate max-w-[80px] uppercase tracking-tighter", children: item.prompt || "Importiert" }),
         /* @__PURE__ */ jsx8("button", { onClick: (e) => {
           e.stopPropagation();
           onDelete(item.id);
-        }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white", children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
+        }, className: "w-6 h-6 flex items-center justify-center bg-red-500/20 text-red-400 hover:bg-red-500 rounded-md transition-all hover:text-white pointer-events-auto", children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-[14px]", children: "delete" }) })
       ] }) }),
       /* @__PURE__ */ jsx8("div", { className: "absolute top-1 right-1 px-1.5 py-0.5 bg-black/60 backdrop-blur-md rounded text-[7px] font-bold text-white/60 uppercase tracking-tight", children: item.type === "import" ? "Library" : "Gen" })
     ] }, item.id)) }) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rslsp1/fa-app-tools",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Shared tools and hooks for Fine Art flow apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",