@libreapps/ui 5.4.1

package/dist/desktop/window.js

@@ -0,0 +1,274 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var WindowControls = /* @__PURE__ */ __name(({
+  onClose,
+  onMinimize,
+  onMaximize,
+  isMaximized = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 group", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onClose,
+        className: "w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: "Close",
+        "aria-label": "Close window",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-2 h-2 text-red-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onMinimize,
+        className: "w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: "Minimize",
+        "aria-label": "Minimize window",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-2 h-2 text-yellow-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onMaximize,
+        className: "w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: isMaximized ? "Restore" : "Maximize",
+        "aria-label": isMaximized ? "Restore window" : "Maximize window",
+        children: isMaximized ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "w-2 h-2 text-green-900 opacity-0 group-hover:opacity-100 transition-opacity" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "w-2 h-2 text-green-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    )
+  ] });
+}, "WindowControls");
+var variantStyles = {
+  default: "bg-gray-900/95 border-white/10",
+  dark: "bg-black/95 border-white/5",
+  light: "bg-white/95 border-gray-200 text-gray-900",
+  transparent: "bg-gray-900/80 border-white/10"
+};
+var Window = React__namespace.forwardRef(
+  ({
+    title,
+    icon,
+    children,
+    className,
+    onClose,
+    onMinimize,
+    onMaximize,
+    onFocus,
+    defaultWidth = 600,
+    defaultHeight = 400,
+    defaultX,
+    defaultY,
+    minWidth = 200,
+    minHeight = 100,
+    maxWidth,
+    maxHeight,
+    resizable = true,
+    draggable = true,
+    centered = true,
+    hideControls = false,
+    variant = "default"
+  }, ref) => {
+    const dragControls = framerMotion.useDragControls();
+    const [isMaximized, setIsMaximized] = React__namespace.useState(false);
+    const [position, setPosition] = React__namespace.useState(() => {
+      if (typeof window !== "undefined") {
+        const x = defaultX ?? (centered ? (window.innerWidth - defaultWidth) / 2 : 100);
+        const y = defaultY ?? (centered ? (window.innerHeight - defaultHeight) / 2 : 100);
+        return { x, y };
+      }
+      return { x: 100, y: 100 };
+    });
+    const [size, setSize] = React__namespace.useState({ width: defaultWidth, height: defaultHeight });
+    const [preMaximizeState, setPreMaximizeState] = React__namespace.useState(null);
+    const [initialMount, setInitialMount] = React__namespace.useState(true);
+    React__namespace.useEffect(() => {
+      if (initialMount) {
+        setInitialMount(false);
+        return;
+      }
+      if (typeof window !== "undefined") {
+        const x = defaultX ?? (centered ? (window.innerWidth - defaultWidth) / 2 : 100);
+        const y = defaultY ?? (centered ? (window.innerHeight - defaultHeight) / 2 : 100);
+        setPosition({ x, y });
+      }
+    }, [defaultX, defaultY, defaultWidth, defaultHeight, centered]);
+    const handleMaximize = /* @__PURE__ */ __name(() => {
+      if (isMaximized) {
+        if (preMaximizeState) {
+          setPosition(preMaximizeState.position);
+          setSize(preMaximizeState.size);
+        }
+        setIsMaximized(false);
+      } else {
+        setPreMaximizeState({ position, size });
+        setPosition({ x: 0, y: 28 });
+        setSize({
+          width: typeof window !== "undefined" ? window.innerWidth : defaultWidth,
+          height: typeof window !== "undefined" ? window.innerHeight - 28 : defaultHeight
+        });
+        setIsMaximized(true);
+      }
+      onMaximize?.();
+    }, "handleMaximize");
+    const handleDragEnd = /* @__PURE__ */ __name((_, info) => {
+      setPosition((prev) => ({
+        x: prev.x + info.offset.x,
+        y: prev.y + info.offset.y
+      }));
+    }, "handleDragEnd");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        ref,
+        role: "dialog",
+        "aria-labelledby": `window-title-${title.replace(/\s+/g, "-").toLowerCase()}`,
+        drag: draggable && !isMaximized,
+        dragControls,
+        dragMomentum: false,
+        dragListener: false,
+        onDragEnd: handleDragEnd,
+        initial: { opacity: 0, scale: 0.95, y: 10 },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          y: 0,
+          x: position.x,
+          width: size.width,
+          height: size.height
+        },
+        exit: { opacity: 0, scale: 0.95, y: 10 },
+        transition: { type: "spring", damping: 25, stiffness: 300 },
+        style: {
+          position: "fixed",
+          left: 0,
+          top: 0,
+          minWidth,
+          minHeight,
+          maxWidth: isMaximized ? void 0 : maxWidth,
+          maxHeight: isMaximized ? void 0 : maxHeight,
+          zIndex: 1e3
+        },
+        onClick: onFocus,
+        className: cn(
+          "flex flex-col rounded-xl border shadow-2xl backdrop-blur-xl overflow-hidden",
+          variantStyles[variant],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onPointerDown: (e) => {
+                if (draggable && !isMaximized) {
+                  dragControls.start(e);
+                }
+              },
+              onDoubleClick: handleMaximize,
+              className: cn(
+                "flex items-center justify-between h-10 px-3 select-none cursor-default shrink-0",
+                "border-b border-white/5 bg-gradient-to-b from-white/5 to-transparent"
+              ),
+              children: [
+                !hideControls && /* @__PURE__ */ jsxRuntime.jsx(
+                  WindowControls,
+                  {
+                    onClose,
+                    onMinimize,
+                    onMaximize: handleMaximize,
+                    isMaximized
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 absolute left-1/2 -translate-x-1/2", children: [
+                  icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4", children: icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      id: `window-title-${title.replace(/\s+/g, "-").toLowerCase()}`,
+                      className: "text-sm font-medium text-white/90 truncate max-w-[200px]",
+                      children: title
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-14" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children }),
+          resizable && !isMaximized && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute bottom-0 right-0 w-4 h-4 cursor-se-resize opacity-0 hover:opacity-100 transition-opacity",
+              style: {
+                background: "linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.3) 50%)"
+              },
+              onPointerDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const startX = e.clientX;
+                const startY = e.clientY;
+                const startWidth = size.width;
+                const startHeight = size.height;
+                const handleMove = /* @__PURE__ */ __name((moveEvent) => {
+                  const deltaX = moveEvent.clientX - startX;
+                  const deltaY = moveEvent.clientY - startY;
+                  const newWidth = Math.max(minWidth, Math.min(startWidth + deltaX, maxWidth ?? Infinity));
+                  const newHeight = Math.max(minHeight, Math.min(startHeight + deltaY, maxHeight ?? Infinity));
+                  setSize({ width: newWidth, height: newHeight });
+                }, "handleMove");
+                const handleUp = /* @__PURE__ */ __name(() => {
+                  document.removeEventListener("pointermove", handleMove);
+                  document.removeEventListener("pointerup", handleUp);
+                }, "handleUp");
+                document.addEventListener("pointermove", handleMove);
+                document.addEventListener("pointerup", handleUp);
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Window.displayName = "Window";
+var window_default = Window;
+
+exports.Window = Window;
+exports.WindowControls = WindowControls;
+exports.default = window_default;

package/dist/desktop/window.mjs

@@ -0,0 +1,248 @@
+"use client";
+import * as React from 'react';
+import { useDragControls, motion } from 'framer-motion';
+import { X, Minus, Minimize2, Maximize2 } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var WindowControls = /* @__PURE__ */ __name(({
+  onClose,
+  onMinimize,
+  onMaximize,
+  isMaximized = false
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 group", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onClose,
+        className: "w-3 h-3 rounded-full bg-red-500 hover:bg-red-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: "Close",
+        "aria-label": "Close window",
+        children: /* @__PURE__ */ jsx(X, { className: "w-2 h-2 text-red-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onMinimize,
+        className: "w-3 h-3 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: "Minimize",
+        "aria-label": "Minimize window",
+        children: /* @__PURE__ */ jsx(Minus, { className: "w-2 h-2 text-yellow-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onMaximize,
+        className: "w-3 h-3 rounded-full bg-green-500 hover:bg-green-600 transition-colors flex items-center justify-center group-hover:shadow-sm",
+        title: isMaximized ? "Restore" : "Maximize",
+        "aria-label": isMaximized ? "Restore window" : "Maximize window",
+        children: isMaximized ? /* @__PURE__ */ jsx(Minimize2, { className: "w-2 h-2 text-green-900 opacity-0 group-hover:opacity-100 transition-opacity" }) : /* @__PURE__ */ jsx(Maximize2, { className: "w-2 h-2 text-green-900 opacity-0 group-hover:opacity-100 transition-opacity" })
+      }
+    )
+  ] });
+}, "WindowControls");
+var variantStyles = {
+  default: "bg-gray-900/95 border-white/10",
+  dark: "bg-black/95 border-white/5",
+  light: "bg-white/95 border-gray-200 text-gray-900",
+  transparent: "bg-gray-900/80 border-white/10"
+};
+var Window = React.forwardRef(
+  ({
+    title,
+    icon,
+    children,
+    className,
+    onClose,
+    onMinimize,
+    onMaximize,
+    onFocus,
+    defaultWidth = 600,
+    defaultHeight = 400,
+    defaultX,
+    defaultY,
+    minWidth = 200,
+    minHeight = 100,
+    maxWidth,
+    maxHeight,
+    resizable = true,
+    draggable = true,
+    centered = true,
+    hideControls = false,
+    variant = "default"
+  }, ref) => {
+    const dragControls = useDragControls();
+    const [isMaximized, setIsMaximized] = React.useState(false);
+    const [position, setPosition] = React.useState(() => {
+      if (typeof window !== "undefined") {
+        const x = defaultX ?? (centered ? (window.innerWidth - defaultWidth) / 2 : 100);
+        const y = defaultY ?? (centered ? (window.innerHeight - defaultHeight) / 2 : 100);
+        return { x, y };
+      }
+      return { x: 100, y: 100 };
+    });
+    const [size, setSize] = React.useState({ width: defaultWidth, height: defaultHeight });
+    const [preMaximizeState, setPreMaximizeState] = React.useState(null);
+    const [initialMount, setInitialMount] = React.useState(true);
+    React.useEffect(() => {
+      if (initialMount) {
+        setInitialMount(false);
+        return;
+      }
+      if (typeof window !== "undefined") {
+        const x = defaultX ?? (centered ? (window.innerWidth - defaultWidth) / 2 : 100);
+        const y = defaultY ?? (centered ? (window.innerHeight - defaultHeight) / 2 : 100);
+        setPosition({ x, y });
+      }
+    }, [defaultX, defaultY, defaultWidth, defaultHeight, centered]);
+    const handleMaximize = /* @__PURE__ */ __name(() => {
+      if (isMaximized) {
+        if (preMaximizeState) {
+          setPosition(preMaximizeState.position);
+          setSize(preMaximizeState.size);
+        }
+        setIsMaximized(false);
+      } else {
+        setPreMaximizeState({ position, size });
+        setPosition({ x: 0, y: 28 });
+        setSize({
+          width: typeof window !== "undefined" ? window.innerWidth : defaultWidth,
+          height: typeof window !== "undefined" ? window.innerHeight - 28 : defaultHeight
+        });
+        setIsMaximized(true);
+      }
+      onMaximize?.();
+    }, "handleMaximize");
+    const handleDragEnd = /* @__PURE__ */ __name((_, info) => {
+      setPosition((prev) => ({
+        x: prev.x + info.offset.x,
+        y: prev.y + info.offset.y
+      }));
+    }, "handleDragEnd");
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref,
+        role: "dialog",
+        "aria-labelledby": `window-title-${title.replace(/\s+/g, "-").toLowerCase()}`,
+        drag: draggable && !isMaximized,
+        dragControls,
+        dragMomentum: false,
+        dragListener: false,
+        onDragEnd: handleDragEnd,
+        initial: { opacity: 0, scale: 0.95, y: 10 },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          y: 0,
+          x: position.x,
+          width: size.width,
+          height: size.height
+        },
+        exit: { opacity: 0, scale: 0.95, y: 10 },
+        transition: { type: "spring", damping: 25, stiffness: 300 },
+        style: {
+          position: "fixed",
+          left: 0,
+          top: 0,
+          minWidth,
+          minHeight,
+          maxWidth: isMaximized ? void 0 : maxWidth,
+          maxHeight: isMaximized ? void 0 : maxHeight,
+          zIndex: 1e3
+        },
+        onClick: onFocus,
+        className: cn(
+          "flex flex-col rounded-xl border shadow-2xl backdrop-blur-xl overflow-hidden",
+          variantStyles[variant],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onPointerDown: (e) => {
+                if (draggable && !isMaximized) {
+                  dragControls.start(e);
+                }
+              },
+              onDoubleClick: handleMaximize,
+              className: cn(
+                "flex items-center justify-between h-10 px-3 select-none cursor-default shrink-0",
+                "border-b border-white/5 bg-gradient-to-b from-white/5 to-transparent"
+              ),
+              children: [
+                !hideControls && /* @__PURE__ */ jsx(
+                  WindowControls,
+                  {
+                    onClose,
+                    onMinimize,
+                    onMaximize: handleMaximize,
+                    isMaximized
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 absolute left-1/2 -translate-x-1/2", children: [
+                  icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", children: icon }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      id: `window-title-${title.replace(/\s+/g, "-").toLowerCase()}`,
+                      className: "text-sm font-medium text-white/90 truncate max-w-[200px]",
+                      children: title
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "w-14" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children }),
+          resizable && !isMaximized && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute bottom-0 right-0 w-4 h-4 cursor-se-resize opacity-0 hover:opacity-100 transition-opacity",
+              style: {
+                background: "linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.3) 50%)"
+              },
+              onPointerDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const startX = e.clientX;
+                const startY = e.clientY;
+                const startWidth = size.width;
+                const startHeight = size.height;
+                const handleMove = /* @__PURE__ */ __name((moveEvent) => {
+                  const deltaX = moveEvent.clientX - startX;
+                  const deltaY = moveEvent.clientY - startY;
+                  const newWidth = Math.max(minWidth, Math.min(startWidth + deltaX, maxWidth ?? Infinity));
+                  const newHeight = Math.max(minHeight, Math.min(startHeight + deltaY, maxHeight ?? Infinity));
+                  setSize({ width: newWidth, height: newHeight });
+                }, "handleMove");
+                const handleUp = /* @__PURE__ */ __name(() => {
+                  document.removeEventListener("pointermove", handleMove);
+                  document.removeEventListener("pointerup", handleUp);
+                }, "handleUp");
+                document.addEventListener("pointermove", handleMove);
+                document.addEventListener("pointerup", handleUp);
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Window.displayName = "Window";
+var window_default = Window;
+
+export { Window, WindowControls, window_default as default };

package/dist/device/index.js

@@ -0,0 +1,3 @@
+"use client";
+'use strict';
+

package/dist/device/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+