ssovee-os-web-ui 0.1.21 → 0.1.23

package/dist/index.css

@@ -363,6 +363,9 @@
   .ml-12 {
     margin-left: calc(var(--spacing) * 12);
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -1094,6 +1097,9 @@
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .underline-offset-2 {
     text-underline-offset: 2px;
   }
@@ -1132,6 +1138,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1511,6 +1520,41 @@
     box-shadow: inset 0 1.5px 1.5px rgba(0, 0, 0, 0.1), inset 0 -0.5px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
   }
 }
+.window-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+.col-span-mobile-12, .col-span-tablet-12, .col-span-desktop-12 {
+  grid-column: span 12 / span 12;
+}
+.col-span-mobile-10, .col-span-tablet-10, .col-span-desktop-10 {
+  grid-column: span 10 / span 10;
+}
+.col-span-mobile-9, .col-span-tablet-9, .col-span-desktop-9 {
+  grid-column: span 9 / span 9;
+}
+.col-span-mobile-8, .col-span-tablet-8, .col-span-desktop-8 {
+  grid-column: span 8 / span 8;
+}
+.col-span-mobile-7 {
+  grid-column: span 7 / span 7;
+}
+.col-span-mobile-6, .col-span-tablet-6, .col-span-desktop-6 {
+  grid-column: span 6 / span 6;
+}
+.col-span-mobile-4, .col-span-tablet-4, .col-span-desktop-4 {
+  grid-column: span 4 / span 4;
+}
+.col-span-mobile-3, .col-span-tablet-3, .col-span-desktop-3 {
+  grid-column: span 3 / span 3;
+}
+.col-span-mobile-2, .col-span-tablet-2, .col-span-desktop-2 {
+  grid-column: span 2 / span 2;
+}
+.col-span-mobile-1, .col-span-tablet-1, .col-span-desktop-1 {
+  grid-column: span 1 / span 1;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -1639,6 +1683,59 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -1730,6 +1827,19 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
+export { useDeviceSupport, useGridClasses, useShortcutFormatter, useSound } from './sdk.cjs';
 
 interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | "success" | "filled" | "text";

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
+export { useDeviceSupport, useGridClasses, useShortcutFormatter, useSound } from './sdk.js';
 
 interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | "success" | "filled" | "text";

package/dist/index.js

@@ -1,7 +1,8 @@
 import * as React20 from 'react';
-import React20__default, { useRef, useImperativeHandle, useCallback, useEffect, useState } from 'react';
+import React20__default, { useRef, useImperativeHandle, useCallback, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ArrowCircleRightIcon, CaretDownIcon, CheckIcon, MagnifyingGlassIcon, XIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, InfoIcon, WarningIcon, CheckCircleIcon, UploadIcon } from '@phosphor-icons/react';
+import { UAParser } from 'ua-parser-js';
 
 // src/components/Button.tsx
 
@@ -1291,64 +1292,138 @@ var Tooltip = ({
   );
 };
 var Tooltip_default = Tooltip;
+
+// src/utils/constants.ts
 var globalKeyboardShortcuts = [
-  { command: "focus_search", shortcut: ["ctrl", "k"] },
-  { command: "escape_button_action", shortcut: ["escape"] }
+  {
+    command: "toggle_theme",
+    shortcut: ["Ctrl", "Shift", "M"],
+    usage: "Toggle between light and dark theme"
+  },
+  {
+    command: "app_switcher",
+    shortcut: ["Ctrl", "Shift", "S"],
+    usage: "Switch between open apps"
+  },
+  {
+    command: "exit_app",
+    shortcut: ["Ctrl", "E"],
+    usage: "Exit or quit the application"
+  },
+  {
+    command: "maximize_app",
+    shortcut: ["Ctrl", "ArrowUp"],
+    usage: "Maximize the application window"
+  },
+  {
+    command: "minimize_app",
+    shortcut: ["Ctrl", "ArrowDown"],
+    usage: "Minimize the application window"
+  },
+  {
+    command: "global_search",
+    shortcut: ["Ctrl", "Shift", "K"],
+    usage: "Open global search"
+  },
+  {
+    command: "toggle_search_mode",
+    shortcut: ["Ctrl", "Shift", "L"],
+    usage: "Enable AI and Voice command (start/stop voice input in search)"
+  },
+  {
+    command: "toggle_control_center",
+    shortcut: ["Ctrl", "Shift", "O"],
+    usage: "Toggle control center panel or drawer"
+  },
+  {
+    command: "arrow_up",
+    shortcut: ["ArrowUp"],
+    usage: "Navigate up in lists, menus and options"
+  },
+  {
+    command: "arrow_down",
+    shortcut: ["ArrowDown"],
+    usage: "Navigate down in lists, menus and options"
+  },
+  {
+    command: "escape_button_action",
+    shortcut: ["Escape"],
+    usage: "Close or go back from any open alert, popup, search, or control center"
+  },
+  {
+    command: "enter_button_action",
+    shortcut: ["Enter"],
+    usage: "Select or confirm the currently focused item"
+  },
+  {
+    command: "toggle_filters",
+    shortcut: ["Ctrl", "Shift", "U"],
+    usage: "To open or close filters of any current active app"
+  },
+  {
+    command: "focus_search",
+    shortcut: ["Ctrl", "k"],
+    usage: "Focus on current app search"
+  },
+  {
+    command: "toggle_all_apps",
+    shortcut: ["Ctrl", "Shift", "A"],
+    usage: "Toggle showing all available apps and plugins"
+  }
 ];
 var keyMap = {
+  mac: {
+    ctrl: "\u2318",
+    alt: "\u2325",
+    shift: "\u21E7",
+    enter: "\u23CE",
+    backspace: "\u232B",
+    arrowup: "\u2191",
+    arrowdown: "\u2193"
+  },
   windows: {
     ctrl: "Ctrl",
     alt: "Alt",
     shift: "Shift",
-    meta: "Win",
-    escape: "Esc",
     enter: "Enter",
-    k: "K"
-  },
-  mac: {
-    ctrl: "Ctrl",
-    alt: "\u2325",
-    shift: "\u21E7",
-    meta: "\u2318",
-    escape: "Esc",
-    enter: "Enter",
-    k: "K"
+    backspace: "Backspace",
+    arrowup: "\u2191",
+    arrowdown: "\u2193"
   },
   linux: {
     ctrl: "Ctrl",
     alt: "Alt",
     shift: "Shift",
-    meta: "Meta",
-    escape: "Esc",
     enter: "Enter",
-    k: "K"
+    backspace: "Backspace",
+    arrowup: "\u2191",
+    arrowdown: "\u2193"
   }
 };
 var detectOS = () => {
-  if (typeof navigator === "undefined") {
-    return "windows";
-  }
-  const userAgent = navigator.userAgent.toLowerCase();
-  if (userAgent.includes("mac")) return "mac";
-  if (userAgent.includes("win")) return "windows";
-  return "linux";
+  const parser = new UAParser();
+  const osName = parser.getOS().name?.toLowerCase() || "";
+  if (osName.includes("mac")) return "mac";
+  if (osName.includes("windows")) return "windows";
+  if (osName.includes("linux")) return "linux";
+  return "windows";
 };
+var normalizeKey = (key) => key.toLowerCase();
 var matchShortcut = (event, shortcut, os) => {
-  const normalizedShortcut = shortcut.map((key) => key.toLowerCase());
-  const hasModifier = normalizedShortcut.includes("ctrl") ? event.ctrlKey : normalizedShortcut.includes("meta") ? event.metaKey : normalizedShortcut.includes("alt") ? event.altKey : true;
-  if (!hasModifier) return false;
-  const primaryKey = normalizedShortcut.find((key) => !["ctrl", "meta", "alt", "shift"].includes(key));
-  if (!primaryKey) return normalizedShortcut.every((key) => {
-    if (key === "ctrl") return event.ctrlKey;
-    if (key === "meta") return event.metaKey;
-    if (key === "alt") return event.altKey;
-    if (key === "shift") return event.shiftKey;
-    return false;
-  });
-  const matchesPrimaryKey = event.key.toLowerCase() === primaryKey;
-  const shiftRequired = normalizedShortcut.includes("shift");
-  const shiftMatches = shiftRequired ? event.shiftKey : true;
-  return matchesPrimaryKey && shiftMatches;
+  const keySet = new Set(shortcut.map(normalizeKey));
+  const pressed = [];
+  if (os === "mac") {
+    if (event.metaKey) pressed.push("ctrl");
+  } else {
+    if (event.ctrlKey) pressed.push("ctrl");
+  }
+  if (event.altKey) pressed.push("alt");
+  if (event.shiftKey) pressed.push("shift");
+  if (event.key && !["Control", "Meta", "Alt", "Shift"].includes(event.key)) {
+    pressed.push(normalizeKey(event.key));
+  }
+  if (pressed.length !== shortcut.length) return false;
+  return pressed.every((k) => keySet.has(k));
 };
 var useShortcutFormatter = () => {
   const [os, setOS] = useState("windows");
@@ -1359,7 +1434,7 @@ var useShortcutFormatter = () => {
   useEffect(() => {
     const handleKeyDown = (event) => {
       for (const shortcut of globalKeyboardShortcuts) {
-        if (matchShortcut(event, shortcut.shortcut)) {
+        if (matchShortcut(event, shortcut.shortcut, os)) {
           const listeners = listenersRef.current.get(shortcut.command);
           if (listeners) {
             event.preventDefault();
@@ -1377,7 +1452,7 @@ var useShortcutFormatter = () => {
     return keys.map((key) => keyMap[os][key.toLowerCase()] || key.toUpperCase()).join(" + ");
   };
   const getShortcutByCommand = (command) => {
-    const found = globalKeyboardShortcuts.find((shortcut) => shortcut.command === command);
+    const found = globalKeyboardShortcuts.find((s) => s.command === command);
     return found ? found.shortcut : [""];
   };
   const addShortcutListener = (command, listener) => {
@@ -2019,7 +2094,77 @@ var TableCaption = React20.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TableCaption.displayName = "TableCaption";
+var useGridClasses = (windowSize, gridRules) => {
+  const deviceType = useMemo(() => {
+    if (windowSize.width <= 640) return "mobile";
+    if (windowSize.width <= 1024) return "tablet";
+    return "desktop";
+  }, [windowSize]);
+  const gridClasses = useMemo(() => {
+    const classes = {};
+    for (const element in gridRules) {
+      const classRules = gridRules[element];
+      const colSpan = classRules["col-span"][deviceType];
+      classes[element] = `col-span-${deviceType}-${colSpan}`;
+    }
+    return classes;
+  }, [deviceType, gridRules]);
+  return { gridClasses, deviceType };
+};
+var useGridClasses_default = useGridClasses;
+var useDeviceSupport = () => {
+  const [isSupported, setIsSupported] = useState(true);
+  useEffect(() => {
+    function checkSupport() {
+      const ua = typeof window !== "undefined" ? window.navigator.userAgent : "";
+      const width = typeof window !== "undefined" ? window.innerWidth : 1920;
+      const height = typeof window !== "undefined" ? window.innerHeight : 1080;
+      const isTouch = typeof window !== "undefined" ? "ontouchstart" in window : false;
+      const isMobile = /Mobi|Android|iPhone|iPod/.test(ua) && width <= 767;
+      const isTablet = /iPad|Tablet|Android/.test(ua) && !/Mobile/.test(ua) || isTouch && width >= 600 && width <= 1024;
+      const isTabletPortrait = isTablet && width < height;
+      const isTabletLandscape = isTablet && width > height && width >= 1024 && width <= 1366;
+      const isLaptop = width >= 1024 && !isMobile && (!isTablet || isTabletLandscape);
+      if (isMobile) {
+        setIsSupported(false);
+      } else if (isTabletPortrait) {
+        setIsSupported(false);
+      } else if (isTabletLandscape) {
+        setIsSupported(true);
+      } else if (isLaptop) {
+        setIsSupported(true);
+      } else {
+        setIsSupported(true);
+      }
+    }
+    checkSupport();
+    window.addEventListener("resize", checkSupport);
+    return () => window.removeEventListener("resize", checkSupport);
+  }, []);
+  return isSupported;
+};
+var soundMap = {
+  click: "/sounds/click-tone.wav",
+  alert: "/sounds/error-tone.wav",
+  notification: "/sounds/notification-tone.wav",
+  error: "/sounds/error-tone.wav",
+  success: "/sounds/success-tone.wav",
+  swipe: "/sounds/swipe-tone.wav"
+};
+var useSound = () => {
+  const playSound = useCallback((type) => {
+    if (typeof window === "undefined" || typeof window.Audio === "undefined") {
+      return;
+    }
+    const soundSrc = soundMap[type];
+    const audio = new window.Audio(soundSrc);
+    audio.play().catch((err) => {
+      console.error("Sound playback failed:", err);
+    });
+  }, []);
+  return { playSound };
+};
 
-export { Accordion_default as Accordion, Alert_default as Alert, Avatar_default as Avatar, Badge_default as Badge, Button_default as Button, Card_default as Card, Checkbox_default as Checkbox, Divider_default as Divider, Dropdown_default as Dropdown, FileUpload_default as FileUpload, ImageWithPlaceholder_default as ImageWithPlaceholder, Input_default as Input, Loading_default as Loading, Modal_default as Modal, Pagination_default as Pagination, Progress_default as Progress, Radio_default as Radio, SearchInput_default as SearchInput, Select_default as Select, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs_default as Tabs, TextArea_default as TextArea, Toast_default as Toast, Toggle_default as Toggle, Tooltip_default as Tooltip, Typography_default as Typography };
+export { Accordion_default as Accordion, Alert_default as Alert, Avatar_default as Avatar, Badge_default as Badge, Button_default as Button, Card_default as Card, Checkbox_default as Checkbox, Divider_default as Divider, Dropdown_default as Dropdown, FileUpload_default as FileUpload, ImageWithPlaceholder_default as ImageWithPlaceholder, Input_default as Input, Loading_default as Loading, Modal_default as Modal, Pagination_default as Pagination, Progress_default as Progress, Radio_default as Radio, SearchInput_default as SearchInput, Select_default as Select, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs_default as Tabs, TextArea_default as TextArea, Toast_default as Toast, Toggle_default as Toggle, Tooltip_default as Tooltip, Typography_default as Typography, useDeviceSupport, useGridClasses_default as useGridClasses, useShortcutFormatter_default as useShortcutFormatter, useSound };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map