@fde-desktop/fde-core 0.3.8 → 0.4.2

package/dist/chunk-7SAFECOJ.js

@@ -0,0 +1,215 @@
+import { VscIcon_default } from './chunk-GRYCUBJZ.js';
+import { ColorPicker_default } from './chunk-EX5V2ZTU.js';
+import { useDesktopStore } from './chunk-NWMSWRUD.js';
+import { useVscIconElement, useFcIconElement } from './chunk-YY6OUR2U.js';
+import { SimpleGrid, Tooltip, UnstyledButton, Text, TextInput, ActionIcon, Collapse, Group, Button } from './chunk-BQL3YXMV.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/Shared/IconColorPicker/IconColorPicker.module.css
+var IconColorPicker_default = {};
+
+// src/constants/Icons.ts
+var PRESET_ICONS = [
+  "VscFolder",
+  "VscFolderOpened",
+  "VscHome",
+  "VscServer",
+  "VscDatabase",
+  "VscBook",
+  "VscMail",
+  "VscGithub",
+  "VscCloud",
+  "VscLock",
+  "VscSettingsGear",
+  "VscStar",
+  "VscHeart",
+  "VscMusic",
+  "VscCamera",
+  "VscArchive"
+];
+var IconColorPicker = ({
+  selectedIcon,
+  selectedColor,
+  onIconChange,
+  onColorChange,
+  colorError
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: IconColorPicker_default.root, children: [
+    /* @__PURE__ */ jsx(SimpleGrid, { cols: 8, spacing: 4, className: IconColorPicker_default.iconGrid, children: PRESET_ICONS.map((name) => {
+      const isSelected = selectedIcon === name;
+      return /* @__PURE__ */ jsx(Tooltip, { label: name, openDelay: 500, children: /* @__PURE__ */ jsx(
+        UnstyledButton,
+        {
+          className: IconColorPicker_default.iconButton,
+          "data-selected": isSelected || void 0,
+          onClick: () => onIconChange(name),
+          "aria-label": name,
+          "aria-pressed": isSelected,
+          children: /* @__PURE__ */ jsx(VscIcon_default, { name, size: 20, color: selectedColor })
+        }
+      ) }, name);
+    }) }),
+    /* @__PURE__ */ jsx(ColorPicker_default, { value: selectedColor, onChange: onColorChange, error: colorError })
+  ] });
+};
+var IconColorPicker_default2 = IconColorPicker;
+
+// src/components/Shared/CreateItemApp/CreateItemApp.module.css
+var CreateItemApp_default = {};
+var CSS_COLOR_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+var isValidColor = (color) => CSS_COLOR_RE.test(color);
+var ICON_PROPS = { size: 14, style: { display: "block" } };
+var CollapseToggleIcon = ({ open }) => useFcIconElement(open ? "FcCollapse" : "FcExpand", ICON_PROPS);
+var CancelIcon = () => useFcIconElement("FcCancel", ICON_PROPS);
+var CheckIcon = () => useFcIconElement("FcCheckmark", ICON_PROPS);
+var DEFAULT_ICON = "VscFolder";
+var DEFAULT_COLOR = "#228be6";
+var DEFAULT_FILE_NAME = "New File";
+var DEFAULT_FOLDER_NAME = "New Folder";
+var TITLE_BAR_HEIGHT = 36;
+var CreateItemApp = ({ window }) => {
+  const win = window;
+  const mode = win?.contentData?.mode ?? "folder";
+  const parentId = win?.contentData?.parentId ?? null;
+  const currentPath = win?.contentData?.currentPath ?? "/home";
+  const [name, setName] = useState(mode === "folder" ? DEFAULT_FOLDER_NAME : DEFAULT_FILE_NAME);
+  const [iconName, setIconName] = useState(DEFAULT_ICON);
+  const [iconColor, setIconColor] = useState(DEFAULT_COLOR);
+  const [iconPickerOpen, setIconPickerOpen] = useState(
+    win?.contentData?.iconPickerOpen ?? false
+  );
+  const rootRef = useRef(null);
+  const closeWindow = useDesktopStore((state) => state.closeWindow);
+  const resizeWindow = useDesktopStore((state) => state.resizeWindow);
+  const createFile = useDesktopStore((state) => state.createFile);
+  const createFolder = useDesktopStore((state) => state.createFolder);
+  const addNotification = useDesktopStore((state) => state.addNotification);
+  const fsNodes = useDesktopStore((state) => state.fsNodes);
+  const windowWidth = useDesktopStore(
+    (state) => state.windows.find((w) => w.id === win?.id)?.width ?? 400
+  );
+  const duplicateName = fsNodes.some(
+    (n) => n.parentId === parentId && n.type === mode && n.name === name.trim()
+  );
+  const colorError = mode === "folder" && iconPickerOpen && !isValidColor(iconColor);
+  const canConfirm = name.trim().length > 0 && !duplicateName && !colorError;
+  useEffect(() => {
+    if (!win?.id || !rootRef.current) return;
+    const el = rootRef.current;
+    const observer = new ResizeObserver(() => {
+      resizeWindow(win.id, windowWidth, el.scrollHeight + TITLE_BAR_HEIGHT);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [win, windowWidth, resizeWindow]);
+  const handleConfirm = () => {
+    if (!canConfirm) return;
+    const itemName = name.trim();
+    const itemParentId = parentId ?? null;
+    const itemIconName = iconName;
+    const itemIconColor = iconColor;
+    closeWindow(win.id);
+    if (mode === "folder") {
+      createFolder(itemName, itemParentId, itemIconName, itemIconColor).catch((error) => {
+        console.error("Failed to create folder:", error);
+        addNotification({
+          id: `create-folder-error-${Date.now()}`,
+          title: "Error",
+          message: `Failed to create folder: ${error instanceof Error ? error.message : "Unknown error"}`,
+          fcIcon: "FcHighPriority"
+        });
+      });
+    } else {
+      createFile(itemName, "", itemParentId).catch((error) => {
+        console.error("Failed to create file:", error);
+        addNotification({
+          id: `create-file-error-${Date.now()}`,
+          title: "Error",
+          message: `Failed to create file: ${error instanceof Error ? error.message : "Unknown error"}`,
+          fcIcon: "FcHighPriority"
+        });
+      });
+    }
+  };
+  const handleCancel = () => {
+    closeWindow(win.id);
+  };
+  const previewIconElement = useVscIconElement(iconName, { size: 40, color: iconColor });
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: CreateItemApp_default.root, children: [
+    /* @__PURE__ */ jsx("div", { className: CreateItemApp_default.header, children: /* @__PURE__ */ jsxs(Text, { fw: 600, size: "sm", children: [
+      mode === "folder" ? "Create new folder" : "Create new file",
+      " in ",
+      currentPath,
+      ":"
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: CreateItemApp_default.content, children: [
+      /* @__PURE__ */ jsxs("div", { className: CreateItemApp_default.nameRow, children: [
+        mode === "folder" && previewIconElement && /* @__PURE__ */ jsx("div", { className: CreateItemApp_default.iconPreview, "aria-hidden": "true", children: previewIconElement }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: name,
+            onChange: (e) => setName(e.currentTarget.value),
+            onKeyDown: (e) => e.key === "Enter" && handleConfirm(),
+            error: duplicateName ? `There is already a ${mode} with that name` : void 0,
+            rightSection: name ? /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "transparent",
+                size: "sm",
+                onClick: () => setName(""),
+                "aria-label": "Clear name",
+                children: /* @__PURE__ */ jsx(CancelIcon, {})
+              }
+            ) : null,
+            autoFocus: true,
+            className: CreateItemApp_default.nameInput,
+            "aria-label": "Item name"
+          }
+        )
+      ] }),
+      mode === "folder" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          UnstyledButton,
+          {
+            className: CreateItemApp_default.collapseToggle,
+            onClick: () => setIconPickerOpen((o) => !o),
+            "aria-expanded": iconPickerOpen,
+            children: [
+              /* @__PURE__ */ jsx(CollapseToggleIcon, { open: iconPickerOpen }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", ml: 6, children: "Choose custom icon or color" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { expanded: iconPickerOpen, children: /* @__PURE__ */ jsx("div", { className: CreateItemApp_default.pickerWrapper, children: /* @__PURE__ */ jsx(
+          IconColorPicker_default2,
+          {
+            selectedIcon: iconName,
+            selectedColor: iconColor,
+            onIconChange: setIconName,
+            onColorChange: setIconColor,
+            colorError: colorError ? "Enter a valid hex color (e.g. #ff0000)" : void 0
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: 4, children: "You can change the icon later in folder properties." })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", onClick: handleCancel, leftSection: /* @__PURE__ */ jsx(CancelIcon, {}), children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            onClick: handleConfirm,
+            leftSection: /* @__PURE__ */ jsx(CheckIcon, {}),
+            disabled: !canConfirm,
+            children: "OK"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var CreateItemApp_default2 = CreateItemApp;
+
+export { CreateItemApp_default2 as CreateItemApp_default, IconColorPicker_default2 as IconColorPicker_default, PRESET_ICONS };

package/dist/chunk-7Y7HB7FB.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var react = require('react');
+
+// src/hooks/useDynamicIcon.ts
+var useDynamicIcon = (name, library) => {
+  const [Icon, setIcon] = react.useState(null);
+  react.useEffect(() => {
+    if (!name || typeof window === "undefined") return;
+    let cancelled = false;
+    const loadIcon = async () => {
+      try {
+        let mod;
+        if (library === "fi") {
+          mod = await import('react-icons/fi');
+        } else if (library === "vsc") {
+          mod = await import('react-icons/vsc');
+        } else {
+          mod = await import('react-icons/fc');
+        }
+        if (!cancelled) {
+          setIcon(() => mod[name] ?? null);
+        }
+      } catch {
+      }
+    };
+    loadIcon();
+    return () => {
+      cancelled = true;
+    };
+  }, [name, library]);
+  return Icon;
+};
+var useDynamicIconElement = (name, library, props) => {
+  const Icon = useDynamicIcon(name, library);
+  if (!Icon) return null;
+  return react.createElement(Icon, props);
+};
+var useFiIcon = (name) => useDynamicIcon(name, "fi");
+var useFcIcon = (name) => useDynamicIcon(name, "fc");
+var useVscIcon = (name) => useDynamicIcon(name, "vsc");
+var useFiIconElement = (name, props) => useDynamicIconElement(name, "fi", props);
+var useFcIconElement = (name, props) => useDynamicIconElement(name, "fc", props);
+var useVscIconElement = (name, props) => useDynamicIconElement(name, "vsc", props);
+
+exports.useDynamicIcon = useDynamicIcon;
+exports.useDynamicIconElement = useDynamicIconElement;
+exports.useFcIcon = useFcIcon;
+exports.useFcIconElement = useFcIconElement;
+exports.useFiIcon = useFiIcon;
+exports.useFiIconElement = useFiIconElement;
+exports.useVscIcon = useVscIcon;
+exports.useVscIconElement = useVscIconElement;

package/dist/chunk-ABIAPZ6S.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var chunk7Y7HB7FB_cjs = require('./chunk-7Y7HB7FB.cjs');
+var react = require('react');
+
+// src/utils/getFileExtension.ts
+var getFileExtension = (name) => name.split(".").pop()?.toLowerCase() ?? "";
+var EXTENSION_ICONS = {
+  pdf: "VscFilePdf",
+  md: "VscMarkdown",
+  txt: "VscFile",
+  jpg: "VscFileMedia",
+  jpeg: "VscFileMedia",
+  png: "VscFileMedia",
+  gif: "VscFileMedia",
+  svg: "VscFileCode",
+  ts: "VscFileCode",
+  tsx: "VscFileCode",
+  js: "VscFileCode",
+  jsx: "VscFileCode",
+  json: "VscJson",
+  html: "VscFileCode",
+  css: "VscFileCode"
+};
+var FileIcon = ({ type, name = "", folderNode, fileNode, size = 20 }) => {
+  let iconName;
+  let iconColor;
+  if (type === "folder") {
+    iconName = folderNode?.iconName ?? "VscFolder";
+    iconColor = folderNode?.iconColor ?? void 0;
+  } else if (type === "file" && fileNode?.iconName) {
+    iconName = fileNode.iconName;
+    iconColor = fileNode.iconColor ?? void 0;
+  } else {
+    const ext = getFileExtension(name);
+    iconName = EXTENSION_ICONS[ext] ?? "VscFile";
+  }
+  const Icon = chunk7Y7HB7FB_cjs.useVscIcon(iconName);
+  if (!Icon) return null;
+  return react.createElement(Icon, { size, color: iconColor, "aria-hidden": "true" });
+};
+var FileIcon_default = FileIcon;
+
+exports.FileIcon_default = FileIcon_default;
+exports.getFileExtension = getFileExtension;

package/dist/chunk-AQL372JF.cjs

@@ -0,0 +1,219 @@
+'use strict';
+
+var chunkYSOLW4FS_cjs = require('./chunk-YSOLW4FS.cjs');
+var chunkLMJE6V4N_cjs = require('./chunk-LMJE6V4N.cjs');
+var chunk6QOUYSEE_cjs = require('./chunk-6QOUYSEE.cjs');
+var chunk7Y7HB7FB_cjs = require('./chunk-7Y7HB7FB.cjs');
+var chunkE55VXNLK_cjs = require('./chunk-E55VXNLK.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Shared/IconColorPicker/IconColorPicker.module.css
+var IconColorPicker_default = {};
+
+// src/constants/Icons.ts
+var PRESET_ICONS = [
+  "VscFolder",
+  "VscFolderOpened",
+  "VscHome",
+  "VscServer",
+  "VscDatabase",
+  "VscBook",
+  "VscMail",
+  "VscGithub",
+  "VscCloud",
+  "VscLock",
+  "VscSettingsGear",
+  "VscStar",
+  "VscHeart",
+  "VscMusic",
+  "VscCamera",
+  "VscArchive"
+];
+var IconColorPicker = ({
+  selectedIcon,
+  selectedColor,
+  onIconChange,
+  onColorChange,
+  colorError
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: IconColorPicker_default.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.SimpleGrid, { cols: 8, spacing: 4, className: IconColorPicker_default.iconGrid, children: PRESET_ICONS.map((name) => {
+      const isSelected = selectedIcon === name;
+      return /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Tooltip, { label: name, openDelay: 500, children: /* @__PURE__ */ jsxRuntime.jsx(
+        chunkE55VXNLK_cjs.UnstyledButton,
+        {
+          className: IconColorPicker_default.iconButton,
+          "data-selected": isSelected || void 0,
+          onClick: () => onIconChange(name),
+          "aria-label": name,
+          "aria-pressed": isSelected,
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunkYSOLW4FS_cjs.VscIcon_default, { name, size: 20, color: selectedColor })
+        }
+      ) }, name);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkLMJE6V4N_cjs.ColorPicker_default, { value: selectedColor, onChange: onColorChange, error: colorError })
+  ] });
+};
+var IconColorPicker_default2 = IconColorPicker;
+
+// src/components/Shared/CreateItemApp/CreateItemApp.module.css
+var CreateItemApp_default = {};
+var CSS_COLOR_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+var isValidColor = (color) => CSS_COLOR_RE.test(color);
+var ICON_PROPS = { size: 14, style: { display: "block" } };
+var CollapseToggleIcon = ({ open }) => chunk7Y7HB7FB_cjs.useFcIconElement(open ? "FcCollapse" : "FcExpand", ICON_PROPS);
+var CancelIcon = () => chunk7Y7HB7FB_cjs.useFcIconElement("FcCancel", ICON_PROPS);
+var CheckIcon = () => chunk7Y7HB7FB_cjs.useFcIconElement("FcCheckmark", ICON_PROPS);
+var DEFAULT_ICON = "VscFolder";
+var DEFAULT_COLOR = "#228be6";
+var DEFAULT_FILE_NAME = "New File";
+var DEFAULT_FOLDER_NAME = "New Folder";
+var TITLE_BAR_HEIGHT = 36;
+var CreateItemApp = ({ window }) => {
+  const win = window;
+  const mode = win?.contentData?.mode ?? "folder";
+  const parentId = win?.contentData?.parentId ?? null;
+  const currentPath = win?.contentData?.currentPath ?? "/home";
+  const [name, setName] = react.useState(mode === "folder" ? DEFAULT_FOLDER_NAME : DEFAULT_FILE_NAME);
+  const [iconName, setIconName] = react.useState(DEFAULT_ICON);
+  const [iconColor, setIconColor] = react.useState(DEFAULT_COLOR);
+  const [iconPickerOpen, setIconPickerOpen] = react.useState(
+    win?.contentData?.iconPickerOpen ?? false
+  );
+  const rootRef = react.useRef(null);
+  const closeWindow = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.closeWindow);
+  const resizeWindow = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.resizeWindow);
+  const createFile = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.createFile);
+  const createFolder = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.createFolder);
+  const addNotification = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.addNotification);
+  const fsNodes = chunk6QOUYSEE_cjs.useDesktopStore((state) => state.fsNodes);
+  const windowWidth = chunk6QOUYSEE_cjs.useDesktopStore(
+    (state) => state.windows.find((w) => w.id === win?.id)?.width ?? 400
+  );
+  const duplicateName = fsNodes.some(
+    (n) => n.parentId === parentId && n.type === mode && n.name === name.trim()
+  );
+  const colorError = mode === "folder" && iconPickerOpen && !isValidColor(iconColor);
+  const canConfirm = name.trim().length > 0 && !duplicateName && !colorError;
+  react.useEffect(() => {
+    if (!win?.id || !rootRef.current) return;
+    const el = rootRef.current;
+    const observer = new ResizeObserver(() => {
+      resizeWindow(win.id, windowWidth, el.scrollHeight + TITLE_BAR_HEIGHT);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [win, windowWidth, resizeWindow]);
+  const handleConfirm = () => {
+    if (!canConfirm) return;
+    const itemName = name.trim();
+    const itemParentId = parentId ?? null;
+    const itemIconName = iconName;
+    const itemIconColor = iconColor;
+    closeWindow(win.id);
+    if (mode === "folder") {
+      createFolder(itemName, itemParentId, itemIconName, itemIconColor).catch((error) => {
+        console.error("Failed to create folder:", error);
+        addNotification({
+          id: `create-folder-error-${Date.now()}`,
+          title: "Error",
+          message: `Failed to create folder: ${error instanceof Error ? error.message : "Unknown error"}`,
+          fcIcon: "FcHighPriority"
+        });
+      });
+    } else {
+      createFile(itemName, "", itemParentId).catch((error) => {
+        console.error("Failed to create file:", error);
+        addNotification({
+          id: `create-file-error-${Date.now()}`,
+          title: "Error",
+          message: `Failed to create file: ${error instanceof Error ? error.message : "Unknown error"}`,
+          fcIcon: "FcHighPriority"
+        });
+      });
+    }
+  };
+  const handleCancel = () => {
+    closeWindow(win.id);
+  };
+  const previewIconElement = chunk7Y7HB7FB_cjs.useVscIconElement(iconName, { size: 40, color: iconColor });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: CreateItemApp_default.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: CreateItemApp_default.header, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkE55VXNLK_cjs.Text, { fw: 600, size: "sm", children: [
+      mode === "folder" ? "Create new folder" : "Create new file",
+      " in ",
+      currentPath,
+      ":"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CreateItemApp_default.content, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CreateItemApp_default.nameRow, children: [
+        mode === "folder" && previewIconElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CreateItemApp_default.iconPreview, "aria-hidden": "true", children: previewIconElement }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE55VXNLK_cjs.TextInput,
+          {
+            value: name,
+            onChange: (e) => setName(e.currentTarget.value),
+            onKeyDown: (e) => e.key === "Enter" && handleConfirm(),
+            error: duplicateName ? `There is already a ${mode} with that name` : void 0,
+            rightSection: name ? /* @__PURE__ */ jsxRuntime.jsx(
+              chunkE55VXNLK_cjs.ActionIcon,
+              {
+                variant: "transparent",
+                size: "sm",
+                onClick: () => setName(""),
+                "aria-label": "Clear name",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CancelIcon, {})
+              }
+            ) : null,
+            autoFocus: true,
+            className: CreateItemApp_default.nameInput,
+            "aria-label": "Item name"
+          }
+        )
+      ] }),
+      mode === "folder" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          chunkE55VXNLK_cjs.UnstyledButton,
+          {
+            className: CreateItemApp_default.collapseToggle,
+            onClick: () => setIconPickerOpen((o) => !o),
+            "aria-expanded": iconPickerOpen,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CollapseToggleIcon, { open: iconPickerOpen }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "sm", ml: 6, children: "Choose custom icon or color" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Collapse, { expanded: iconPickerOpen, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: CreateItemApp_default.pickerWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconColorPicker_default2,
+          {
+            selectedIcon: iconName,
+            selectedColor: iconColor,
+            onIconChange: setIconName,
+            onColorChange: setIconColor,
+            colorError: colorError ? "Enter a valid hex color (e.g. #ff0000)" : void 0
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Text, { size: "xs", c: "dimmed", mt: 4, children: "You can change the icon later in folder properties." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(chunkE55VXNLK_cjs.Group, { justify: "flex-end", mt: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkE55VXNLK_cjs.Button, { variant: "default", size: "sm", onClick: handleCancel, leftSection: /* @__PURE__ */ jsxRuntime.jsx(CancelIcon, {}), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE55VXNLK_cjs.Button,
+          {
+            size: "sm",
+            onClick: handleConfirm,
+            leftSection: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}),
+            disabled: !canConfirm,
+            children: "OK"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var CreateItemApp_default2 = CreateItemApp;
+
+exports.CreateItemApp_default = CreateItemApp_default2;
+exports.IconColorPicker_default = IconColorPicker_default2;
+exports.PRESET_ICONS = PRESET_ICONS;

package/dist/chunk-AXDUVZVP.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var chunkUIQCTAVM_cjs = require('./chunk-UIQCTAVM.cjs');
+var chunkBQCD5RAF_cjs = require('./chunk-BQCD5RAF.cjs');
+var chunkICUE6T7J_cjs = require('./chunk-ICUE6T7J.cjs');
+var chunkBDO6B7MZ_cjs = require('./chunk-BDO6B7MZ.cjs');
+var chunk6QOUYSEE_cjs = require('./chunk-6QOUYSEE.cjs');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Apps/ImageViewerApp/ImageViewerApp.module.css
+var ImageViewerApp_default = {};
+var ACCEPTED_IMAGE_TYPES = [...chunk6QOUYSEE_cjs.IMAGE_MIME_TYPES, "image/*"];
+var ImageViewerApp = ({ window, notifyReady }) => {
+  const { t } = reactI18next.useTranslation("apps");
+  const win = window;
+  const windowId = win?.id ?? "";
+  const initialSrc = win?.contentData?.src;
+  const [src, setSrc] = react.useState(initialSrc);
+  const [pickerOpen, setPickerOpen] = react.useState(false);
+  const [imageDimensions, setImageDimensions] = react.useState(null);
+  const containerRef = react.useRef(null);
+  const displayZoom = chunkUIQCTAVM_cjs.useImageViewerStore((s) => s.getDisplayZoom(windowId));
+  const fitToWindow = chunkUIQCTAVM_cjs.useImageViewerStore((s) => s.getFitToWindow(windowId));
+  const updateCalculatedZoom = chunkUIQCTAVM_cjs.useImageViewerStore((s) => s.updateCalculatedZoom);
+  const reset = chunkUIQCTAVM_cjs.useImageViewerStore((s) => s.reset);
+  const resolvedSrc = chunkICUE6T7J_cjs.useResolvedUrl(src);
+  react.useEffect(() => {
+    reset(windowId);
+  }, [windowId, reset]);
+  react.useEffect(() => {
+    if (!fitToWindow || !imageDimensions || !containerRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        updateCalculatedZoom(windowId, imageDimensions, { width, height });
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [fitToWindow, imageDimensions, windowId, updateCalculatedZoom]);
+  react.useEffect(() => {
+    notifyReady?.({
+      ...win?.contentData ?? {},
+      setPickerOpen: () => setPickerOpen(true)
+    });
+  }, [win, notifyReady]);
+  const handleFileSelected = react.useCallback(
+    (node) => {
+      setSrc(node.url ?? node.name);
+      setPickerOpen(false);
+      reset(windowId);
+      setImageDimensions(null);
+    },
+    [windowId, reset]
+  );
+  const handleImageLoad = react.useCallback((e) => {
+    const img = e.currentTarget;
+    setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+  }, []);
+  const imgStyle = fitToWindow ? void 0 : { transform: `scale(${displayZoom / 100})` };
+  const content = resolvedSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: resolvedSrc,
+      alt: resolvedSrc.split("/").pop() ?? "image",
+      className: ImageViewerApp_default.image,
+      style: imgStyle,
+      onLoad: handleImageLoad
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(chunkBQCD5RAF_cjs.AppEmptyState_default, { label: t("imageViewer.noImage") });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: ImageViewerApp_default.container, "data-windowid": win?.id, children: [
+    content,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkBDO6B7MZ_cjs.FilePickerModal,
+      {
+        opened: pickerOpen,
+        acceptedMimeTypes: ACCEPTED_IMAGE_TYPES,
+        onConfirm: handleFileSelected,
+        onCancel: () => setPickerOpen(false)
+      }
+    )
+  ] });
+};
+var ImageViewerApp_default2 = ImageViewerApp;
+
+exports.ImageViewerApp_default = ImageViewerApp_default2;