ssovee-os-web-ui 0.1.21 → 0.1.23

package/README.md

@@ -53,6 +53,14 @@ export function Example() {
 }
 ```
 
+## Hooks
+
+Hooks are also available through the SDK-style entrypoint:
+
+```tsx
+import { useGridClasses, useDeviceSupport, useSound } from "ssovee-os-web-ui/sdk";
+```
+
 ## Public exports
 
 The package exports these components and types for external use:
@@ -85,8 +93,12 @@ The package exports these components and types for external use:
 - `Typography`
 - `ImageWithPlaceholder`
 - `Table` and its subcomponents
+- `useGridClasses`
+- `useShortcutFormatter`
+- `useDeviceSupport`
+- `useSound`
 
-Internal helpers such as `useShortcutFormatter` and `cn` are used inside the library implementation and are not part of the recommended consumer API.
+The hooks are available from the package entrypoint and from the SDK subpath.
 
 ## License
 

package/dist/index.cjs

@@ -3,6 +3,7 @@
 var React20 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@phosphor-icons/react');
+var uaParserJs = require('ua-parser-js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -1312,64 +1313,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 uaParserJs.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] = React20.useState("windows");
@@ -1380,7 +1455,7 @@ var useShortcutFormatter = () => {
   React20.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();
@@ -1398,7 +1473,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) => {
@@ -2040,6 +2115,76 @@ var TableCaption = React20__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableCaption.displayName = "TableCaption";
+var useGridClasses = (windowSize, gridRules) => {
+  const deviceType = React20.useMemo(() => {
+    if (windowSize.width <= 640) return "mobile";
+    if (windowSize.width <= 1024) return "tablet";
+    return "desktop";
+  }, [windowSize]);
+  const gridClasses = React20.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] = React20.useState(true);
+  React20.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 = React20.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 };
+};
 
 exports.Accordion = Accordion_default;
 exports.Alert = Alert_default;
@@ -2074,5 +2219,9 @@ exports.Toast = Toast_default;
 exports.Toggle = Toggle_default;
 exports.Tooltip = Tooltip_default;
 exports.Typography = Typography_default;
+exports.useDeviceSupport = useDeviceSupport;
+exports.useGridClasses = useGridClasses_default;
+exports.useShortcutFormatter = useShortcutFormatter_default;
+exports.useSound = useSound;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map