plusui-native-core 0.1.4 → 0.1.7

package/Core/Features/Keyboard/keyboard.cpp

@@ -0,0 +1,186 @@
+#include <iostream>
+#include <plusui/keyboard.hpp>
+#include <unordered_map>
+
+namespace plusui {
+
+struct Keyboard::Impl {
+  std::unordered_map<int, bool> pressedKeys;
+  std::vector<std::function<void(const KeyEvent &)>> keyDownCallbacks;
+  std::vector<std::function<void(const KeyEvent &)>> keyUpCallbacks;
+  bool autoRepeat = true;
+
+  static const std::unordered_map<KeyCode, std::string> &keyNames() {
+    static std::unordered_map<KeyCode, std::string> names = {
+        {KeyCode::Space, "Space"},
+        {KeyCode::Escape, "Escape"},
+        {KeyCode::Enter, "Enter"},
+        {KeyCode::Tab, "Tab"},
+        {KeyCode::Backspace, "Backspace"},
+        {KeyCode::Delete, "Delete"},
+        {KeyCode::Right, "Right"},
+        {KeyCode::Left, "Left"},
+        {KeyCode::Down, "Down"},
+        {KeyCode::Up, "Up"},
+        {KeyCode::A, "A"},
+        {KeyCode::B, "B"},
+        {KeyCode::C, "C"},
+        {KeyCode::D, "D"},
+        {KeyCode::E, "E"},
+        {KeyCode::F, "F"},
+        {KeyCode::G, "G"},
+        {KeyCode::H, "H"},
+        {KeyCode::I, "I"},
+        {KeyCode::J, "J"},
+        {KeyCode::K, "K"},
+        {KeyCode::L, "L"},
+        {KeyCode::M, "M"},
+        {KeyCode::N, "N"},
+        {KeyCode::O, "O"},
+        {KeyCode::P, "P"},
+        {KeyCode::Q, "Q"},
+        {KeyCode::R, "R"},
+        {KeyCode::S, "S"},
+        {KeyCode::T, "T"},
+        {KeyCode::U, "U"},
+        {KeyCode::V, "V"},
+        {KeyCode::W, "W"},
+        {KeyCode::X, "X"},
+        {KeyCode::Y, "Y"},
+        {KeyCode::Z, "Z"},
+        {KeyCode::F1, "F1"},
+        {KeyCode::F2, "F2"},
+        {KeyCode::F3, "F3"},
+        {KeyCode::F4, "F4"},
+        {KeyCode::F5, "F5"},
+        {KeyCode::F6, "F6"},
+        {KeyCode::F7, "F7"},
+        {KeyCode::F8, "F8"},
+        {KeyCode::F9, "F9"},
+        {KeyCode::F10, "F10"},
+        {KeyCode::F11, "F11"},
+        {KeyCode::F12, "F12"},
+    };
+    return names;
+  }
+};
+
+Keyboard::Keyboard() : pImpl(std::make_unique<Impl>()) {}
+Keyboard::~Keyboard() = default;
+
+Keyboard &Keyboard::instance() {
+  static Keyboard instance;
+  return instance;
+}
+
+void Keyboard::onKeyDown(std::function<void(const KeyEvent &)> callback) {
+  pImpl->keyDownCallbacks.push_back(callback);
+}
+
+void Keyboard::onKeyUp(std::function<void(const KeyEvent &)> callback) {
+  pImpl->keyUpCallbacks.push_back(callback);
+}
+
+bool Keyboard::isKeyPressed(KeyCode key) const {
+  return pImpl->pressedKeys.count(static_cast<int>(key)) &&
+         pImpl->pressedKeys.at(static_cast<int>(key));
+}
+
+bool Keyboard::areModsActive(KeyMod mods) const { return false; }
+
+std::string Keyboard::getKeyName(KeyCode key) const {
+  auto it = Impl::keyNames().find(key);
+  return it != Impl::keyNames().end() ? it->second : "Unknown";
+}
+
+KeyCode Keyboard::getKeyFromName(const std::string &name) const {
+  for (const auto &[key, keyName] : Impl::keyNames()) {
+    if (keyName == name)
+      return key;
+  }
+  return KeyCode::Unknown;
+}
+
+void Keyboard::setAutoRepeat(bool enabled) { pImpl->autoRepeat = enabled; }
+
+bool Keyboard::getAutoRepeat() const { return pImpl->autoRepeat; }
+
+struct ShortcutManager::Impl {
+  std::map<std::string, std::pair<Shortcut, std::function<void()>>> shortcuts;
+  std::function<void(const std::string &id)> triggerCallback;
+};
+
+ShortcutManager::ShortcutManager() : pImpl(std::make_unique<Impl>()) {}
+ShortcutManager::~ShortcutManager() = default;
+
+ShortcutManager &ShortcutManager::instance() {
+  static ShortcutManager instance;
+  return instance;
+}
+
+bool ShortcutManager::registerShortcut(const std::string &id,
+                                       const Shortcut &shortcut,
+                                       std::function<void()> callback) {
+  pImpl->shortcuts[id] = {shortcut, callback};
+  return true;
+}
+
+bool ShortcutManager::unregisterShortcut(const std::string &id) {
+  return pImpl->shortcuts.erase(id) > 0;
+}
+
+void ShortcutManager::clearShortcuts() { pImpl->shortcuts.clear(); }
+
+bool ShortcutManager::isRegistered(const std::string &id) const {
+  return pImpl->shortcuts.count(id) > 0;
+}
+
+Shortcut ShortcutManager::getShortcut(const std::string &id) const {
+  auto it = pImpl->shortcuts.find(id);
+  return it != pImpl->shortcuts.end() ? it->second.first : Shortcut();
+}
+
+void ShortcutManager::onShortcutTriggered(
+    std::function<void(const std::string &id)> callback) {
+  pImpl->triggerCallback = callback;
+}
+
+std::string Shortcut::toString() const {
+  std::string s;
+  if (mods & KeyMod::Control)
+    s += "Ctrl+";
+  if (mods & KeyMod::Alt)
+    s += "Alt+";
+  if (mods & KeyMod::Shift)
+    s += "Shift+";
+  if (mods & KeyMod::Super)
+    s += "Super+";
+  return s + std::to_string(static_cast<int>(key));
+}
+
+Shortcut Shortcut::parse(const std::string &str) {
+  Shortcut shortcut;
+  KeyMod mods = KeyMod::None;
+  std::string key;
+
+  for (size_t i = 0; i < str.size(); ++i) {
+    if (str[i] == '+') {
+      if (key == "Ctrl" || key == "Control")
+        mods = mods | KeyMod::Control;
+      else if (key == "Alt")
+        mods = mods | KeyMod::Alt;
+      else if (key == "Shift")
+        mods = mods | KeyMod::Shift;
+      else if (key == "Super" || key == "Win")
+        mods = mods | KeyMod::Super;
+      key.clear();
+    } else {
+      key += str[i];
+    }
+  }
+
+  shortcut.mods = mods;
+  return shortcut;
+}
+
+} // namespace plusui

package/Core/Features/Keyboard/keyboard.ts

@@ -0,0 +1,175 @@
+export enum KeyCode {
+  Unknown = 0,
+  Space = 32,
+  Escape = 256,
+  Enter = 257,
+  Tab = 258,
+  Backspace = 259,
+  Delete = 261,
+  Right = 262,
+  Left = 263,
+  Down = 264,
+  Up = 265,
+  F1 = 290,
+  F2 = 291,
+  F3 = 292,
+  F4 = 293,
+  F5 = 294,
+  F6 = 295,
+  F7 = 296,
+  F8 = 297,
+  F9 = 298,
+  F10 = 299,
+  F11 = 300,
+  F12 = 301,
+  LeftShift = 340,
+  LeftControl = 341,
+  LeftAlt = 342,
+}
+
+export enum KeyMod {
+  None = 0,
+  Shift = 1,
+  Control = 2,
+  Alt = 4,
+  Super = 8,
+}
+
+export interface KeyEvent {
+  key: KeyCode;
+  scancode: number;
+  mods: KeyMod;
+  pressed: boolean;
+  repeat: boolean;
+  keyName: string;
+}
+
+export interface Shortcut {
+  key: KeyCode;
+  mods: KeyMod;
+}
+
+export type KeyEventCallback = (event: KeyEvent) => void;
+export type ShortcutCallback = () => void;
+
+export class KeyboardAPI {
+  private shortcutHandlers: Map<string, ShortcutCallback> = new Map();
+
+  constructor(
+    private invokeFn: (name: string, args?: unknown[]) => Promise<unknown>,
+    private eventFn: (event: string, callback: (...args: unknown[]) => void) => () => void
+  ) {
+    this.setupEventListeners();
+  }
+
+  private setupEventListeners(): void {
+    this.eventFn('keyboard:keydown', (data) => {
+      const event = data as KeyEvent;
+    });
+
+    this.eventFn('keyboard:keyup', (data) => {
+      const event = data as KeyEvent;
+    });
+
+    this.eventFn('keyboard:shortcut', (data) => {
+      const { id } = data as { id: string };
+      const handler = this.shortcutHandlers.get(id);
+      if (handler) handler();
+    });
+  }
+
+  async isKeyPressed(key: KeyCode): Promise<boolean> {
+    return await this.invokeFn<boolean>('keyboard.isKeyPressed', [key]);
+  }
+
+  async setAutoRepeat(enabled: boolean): Promise<void> {
+    await this.invokeFn('keyboard.setAutoRepeat', [enabled]);
+  }
+
+  async getAutoRepeat(): Promise<boolean> {
+    return await this.invokeFn<boolean>('keyboard.getAutoRepeat', []);
+  }
+
+  onKeyDown(callback: KeyEventCallback): () => void {
+    return this.eventFn('keyboard:keydown', callback as (...args: unknown[]) => void);
+  }
+
+  onKeyUp(callback: KeyEventCallback): () => void {
+    return this.eventFn('keyboard:keyup', callback as (...args: unknown[]) => void);
+  }
+
+  async registerShortcut(id: string, shortcut: Shortcut, callback: ShortcutCallback): Promise<boolean> {
+    this.shortcutHandlers.set(id, callback);
+    return await this.invokeFn<boolean>('keyboard.registerShortcut', [id, shortcut]);
+  }
+
+  async unregisterShortcut(id: string): Promise<boolean> {
+    this.shortcutHandlers.delete(id);
+    return await this.invokeFn<boolean>('keyboard.unregisterShortcut', [id]);
+  }
+
+  async clearShortcuts(): Promise<void> {
+    this.shortcutHandlers.clear();
+    await this.invokeFn('keyboard.clearShortcuts', []);
+  }
+
+  parseShortcut(str: string): Shortcut {
+    const parts = str.toLowerCase().split('+');
+    let mods = KeyMod.None;
+    let key = KeyCode.Unknown;
+
+    for (const part of parts) {
+      const trimmed = part.trim();
+      if (trimmed === 'ctrl' || trimmed === 'control') {
+        mods |= KeyMod.Control;
+      } else if (trimmed === 'alt') {
+        mods |= KeyMod.Alt;
+      } else if (trimmed === 'shift') {
+        mods |= KeyMod.Shift;
+      } else if (trimmed === 'super' || trimmed === 'win' || trimmed === 'cmd') {
+        mods |= KeyMod.Super;
+      } else {
+        key = this.keyNameToCode(trimmed);
+      }
+    }
+
+    return { key, mods };
+  }
+
+  private keyNameToCode(name: string): KeyCode {
+    const map: Record<string, KeyCode> = {
+      'space': KeyCode.Space,
+      'escape': KeyCode.Escape,
+      'enter': KeyCode.Enter,
+      'tab': KeyCode.Tab,
+      'backspace': KeyCode.Backspace,
+      'delete': KeyCode.Delete,
+      'right': KeyCode.Right,
+      'left': KeyCode.Left,
+      'down': KeyCode.Down,
+      'up': KeyCode.Up,
+      'f1': KeyCode.F1,
+      'f2': KeyCode.F2,
+      'f3': KeyCode.F3,
+      'f4': KeyCode.F4,
+      'f5': KeyCode.F5,
+      'f6': KeyCode.F6,
+      'f7': KeyCode.F7,
+      'f8': KeyCode.F8,
+      'f9': KeyCode.F9,
+      'f10': KeyCode.F10,
+      'f11': KeyCode.F11,
+      'f12': KeyCode.F12,
+    };
+    return map[name] || KeyCode.Unknown;
+  }
+}
+
+export function createKeyboardAPI(
+  invokeFn: (name: string, args?: unknown[]) => Promise<unknown>,
+  eventFn: (event: string, callback: (...args: unknown[]) => void) => () => void
+): KeyboardAPI {
+  return new KeyboardAPI(invokeFn, eventFn);
+}
+
+export default KeyboardAPI;

package/Core/Features/Menu/context-menu.css

@@ -0,0 +1,293 @@
+/**
+ * PlusUI Context Menu Styles
+ *
+ * These styles are for HTML-based context menus rendered in the webview.
+ * Native OS menus (Windows, macOS, Linux) use system styles automatically.
+ *
+ * Use these when you want a custom-styled context menu that matches your app's theme.
+ */
+
+/* ============================================================================
+   Base Context Menu Container
+   ============================================================================ */
+
+.plusui-context-menu {
+    position: fixed;
+    z-index: 10000;
+    min-width: 180px;
+    max-width: 300px;
+    padding: 4px 0;
+    background: var(--menu-bg, #ffffff);
+    border: 1px solid var(--menu-border, #e0e0e0);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
+                0 1px 3px rgba(0, 0, 0, 0.1);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 13px;
+    user-select: none;
+    animation: plusui-menu-fade-in 0.15s ease-out;
+}
+
+@keyframes plusui-menu-fade-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* ============================================================================
+   Menu Items
+   ============================================================================ */
+
+.plusui-context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    color: var(--menu-text, #333333);
+    transition: background-color 0.1s ease;
+}
+
+.plusui-context-menu-item:hover {
+    background-color: var(--menu-hover, #f0f0f0);
+}
+
+.plusui-context-menu-item:active {
+    background-color: var(--menu-active, #e0e0e0);
+}
+
+.plusui-context-menu-item.disabled {
+    color: var(--menu-disabled, #999999);
+    cursor: not-allowed;
+}
+
+.plusui-context-menu-item.disabled:hover {
+    background-color: transparent;
+}
+
+/* ============================================================================
+   Menu Item Components
+   ============================================================================ */
+
+.plusui-context-menu-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+    flex-shrink: 0;
+}
+
+.plusui-context-menu-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.plusui-context-menu-accelerator {
+    margin-left: 24px;
+    color: var(--menu-accelerator, #888888);
+    font-size: 12px;
+    flex-shrink: 0;
+}
+
+.plusui-context-menu-arrow {
+    margin-left: 8px;
+    color: var(--menu-arrow, #666666);
+    font-size: 10px;
+}
+
+/* ============================================================================
+   Separators
+   ============================================================================ */
+
+.plusui-context-menu-separator {
+    height: 1px;
+    margin: 4px 12px;
+    background-color: var(--menu-separator, #e0e0e0);
+}
+
+/* ============================================================================
+   Checkbox & Radio Items
+   ============================================================================ */
+
+.plusui-context-menu-item.checkbox::before,
+.plusui-context-menu-item.radio::before {
+    content: '';
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+    border: 2px solid var(--menu-checkbox-border, #666666);
+    border-radius: 3px;
+    flex-shrink: 0;
+}
+
+.plusui-context-menu-item.radio::before {
+    border-radius: 50%;
+}
+
+.plusui-context-menu-item.checkbox.checked::before {
+    background-color: var(--menu-checkbox-checked, #0066cc);
+    border-color: var(--menu-checkbox-checked, #0066cc);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E");
+    background-size: 12px;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.plusui-context-menu-item.radio.checked::before {
+    background-color: var(--menu-radio-checked, #0066cc);
+    border-color: var(--menu-radio-checked, #0066cc);
+    box-shadow: inset 0 0 0 3px var(--menu-bg, #ffffff);
+}
+
+/* ============================================================================
+   Submenus
+   ============================================================================ */
+
+.plusui-context-menu-submenu {
+    position: relative;
+}
+
+.plusui-context-menu-submenu > .plusui-context-menu {
+    position: absolute;
+    top: -4px;
+    left: 100%;
+    margin-left: 2px;
+    display: none;
+}
+
+.plusui-context-menu-submenu:hover > .plusui-context-menu {
+    display: block;
+}
+
+/* ============================================================================
+   Dark Theme
+   ============================================================================ */
+
+.plusui-context-menu.dark,
+[data-theme="dark"] .plusui-context-menu {
+    --menu-bg: #2d2d2d;
+    --menu-border: #404040;
+    --menu-text: #e0e0e0;
+    --menu-hover: #3d3d3d;
+    --menu-active: #4d4d4d;
+    --menu-disabled: #666666;
+    --menu-separator: #404040;
+    --menu-accelerator: #888888;
+    --menu-arrow: #888888;
+    --menu-checkbox-border: #888888;
+    --menu-checkbox-checked: #4da6ff;
+    --menu-radio-checked: #4da6ff;
+}
+
+/* ============================================================================
+   macOS Style
+   ============================================================================ */
+
+.plusui-context-menu.macos {
+    border-radius: 6px;
+    padding: 3px 0;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2),
+                0 0 1px rgba(0, 0, 0, 0.1);
+    font-size: 13px;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    background: rgba(255, 255, 255, 0.85);
+}
+
+.plusui-context-menu.macos .plusui-context-menu-item {
+    padding: 4px 12px;
+    border-radius: 4px;
+    margin: 0 4px;
+}
+
+.plusui-context-menu.macos .plusui-context-menu-item:hover {
+    background-color: #0066cc;
+    color: white;
+}
+
+.plusui-context-menu.macos .plusui-context-menu-item:hover .plusui-context-menu-accelerator {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* ============================================================================
+   Windows 11 Style
+   ============================================================================ */
+
+.plusui-context-menu.windows11 {
+    border-radius: 8px;
+    padding: 4px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: rgba(255, 255, 255, 0.95);
+    -webkit-backdrop-filter: blur(50px) saturate(150%);
+    backdrop-filter: blur(50px) saturate(150%);
+}
+
+.plusui-context-menu.windows11 .plusui-context-menu-item {
+    padding: 10px 12px;
+    border-radius: 4px;
+}
+
+.plusui-context-menu.windows11 .plusui-context-menu-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.plusui-context-menu.windows11 .plusui-context-menu-separator {
+    margin: 4px 8px;
+}
+
+/* ============================================================================
+   Fluent Design (Acrylic)
+   ============================================================================ */
+
+.plusui-context-menu.fluent {
+    background: rgba(255, 255, 255, 0.7);
+    -webkit-backdrop-filter: blur(40px) saturate(180%);
+    backdrop-filter: blur(40px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+/* ============================================================================
+   Compact Style (for toolbars, etc.)
+   ============================================================================ */
+
+.plusui-context-menu.compact {
+    min-width: 120px;
+    font-size: 12px;
+}
+
+.plusui-context-menu.compact .plusui-context-menu-item {
+    padding: 6px 10px;
+}
+
+.plusui-context-menu.compact .plusui-context-menu-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+}
+
+/* ============================================================================
+   Utility Classes
+   ============================================================================ */
+
+/* Position menu above cursor instead of below */
+.plusui-context-menu.above {
+    transform-origin: bottom left;
+}
+
+/* Right-aligned menu */
+.plusui-context-menu.right-aligned {
+    transform-origin: top right;
+}
+
+/* No animation */
+.plusui-context-menu.no-animation {
+    animation: none;
+}