@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLAShortcuts.astro

@@ -0,0 +1,429 @@
+---
+import { getUIConfig } from "virtual:rimelight-ui"
+
+interface Props {
+  categories?: Record<string, string>
+}
+
+const {
+  categories = {},
+  ...rest
+} = Astro.props as Props
+
+const uiConfig = getUIConfig()
+const configCategories = uiConfig.shortcuts?.categories || {}
+
+// Resolve categories: prop overrides -> integration config -> fallback key
+const resolvedCategories: Record<string, string> = {}
+const configKeys = Object.keys(configCategories)
+const allKeys = [...new Set([...configKeys, ...Object.keys(categories)])]
+
+allKeys.forEach((key) => {
+  resolvedCategories[key] = categories[key] || configCategories[key]?.label || key
+})
+
+// Generate a unique ID to avoid collisions
+const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
+---
+
+<rla-shortcuts {...rest}>
+  <dialog
+    id={modalId}
+    class="rla-shortcuts-dialog"
+    autofocus
+    tabindex="-1"
+    aria-labelledby={`${modalId}-title`}
+    data-categories={JSON.stringify(resolvedCategories)}
+    data-category-order={JSON.stringify(configKeys)}
+  >
+    <div class="rla-shortcuts-content">
+      <div class="rla-shortcuts-header">
+        <h3 id={`${modalId}-title`} class="rla-shortcuts-title">Keyboard Shortcuts</h3>
+        <button class="rla-shortcuts-close" aria-label="Close shortcuts help">
+          <span class="i-lucide-x w-4 h-4"></span>
+        </button>
+      </div>
+
+      <div class="rla-shortcuts-body">
+        <!-- Active categories and shortcuts rendered dynamically client-side -->
+      </div>
+
+      <div class="rla-shortcuts-footer">
+        <span>Press <kbd class="rla-shortcuts-kbd-footer">?</kbd> to close</span>
+      </div>
+    </div>
+  </dialog>
+</rla-shortcuts>
+
+<script>
+  import { activeShortcutsStore, defineShortcuts } from "../../utils/shortcuts"
+  import type { RegisteredShortcut } from "../../utils/shortcuts"
+
+  class RLAShortcuts extends HTMLElement {
+    private shortcutsCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const dialog = this.querySelector('.rla-shortcuts-dialog') as HTMLDialogElement | null;
+      if (!dialog) return;
+
+      const body = dialog.querySelector('.rla-shortcuts-body');
+      const closeBtn = dialog.querySelector('.rla-shortcuts-close');
+
+      const resolvedCategories = JSON.parse(dialog.dataset.categories || '{}');
+      const categoryOrder = JSON.parse(dialog.dataset.categoryOrder || '[]');
+
+      let escapeCleanup: (() => void) | null = null;
+
+      const openHelp = () => {
+        dialog.showModal();
+        dialog.focus();
+        document.body.style.overflow = "hidden";
+
+        escapeCleanup = defineShortcuts({
+          escape: {
+            handler: () => closeHelp(),
+            usingInput: true
+          },
+          "?": {
+            handler: () => closeHelp(),
+            usingInput: true
+          }
+        });
+      };
+
+      const closeHelp = () => {
+        dialog.close();
+        document.body.style.overflow = "";
+        if (escapeCleanup) {
+          escapeCleanup();
+          escapeCleanup = null;
+        }
+      };
+
+      const onCloseClick = () => closeHelp();
+      closeBtn?.addEventListener('click', onCloseClick);
+
+      const onOpenEvent = () => openHelp();
+      document.addEventListener('rla-shortcuts:open', onOpenEvent);
+
+      const onDialogClick = (e: MouseEvent) => {
+        const rect = dialog.getBoundingClientRect();
+        const isInDialog = (
+          rect.top <= e.clientY &&
+          e.clientY <= rect.top + rect.height &&
+          rect.left <= e.clientX &&
+          e.clientX <= rect.left + rect.width
+        );
+        if (!isInDialog) {
+          closeHelp();
+        }
+      };
+      dialog.addEventListener('click', onDialogClick);
+
+      const qShortcutCleanup = defineShortcuts({
+        "?": {
+          handler: () => {
+            if (dialog.open) {
+              closeHelp();
+            } else {
+              openHelp();
+            }
+          },
+          label: "Show Keyboard Shortcuts",
+          description: "Display this shortcuts help cheat sheet modal",
+          category: "system",
+          order: 0
+        }
+      });
+
+      const unsubscribe = activeShortcutsStore.subscribe((shortcuts) => {
+        if (!body) return;
+        body.innerHTML = "";
+
+        if (shortcuts.length === 0) {
+          body.innerHTML = '<div class="rla-shortcuts-empty">No active shortcuts found on this page.</div>';
+          return;
+        }
+
+        const groupedCategories: Record<string, RegisteredShortcut[]> = {};
+        shortcuts.forEach(s => {
+          const cat = (s.category || "system").toLowerCase();
+          if (!groupedCategories[cat]) groupedCategories[cat] = [];
+          groupedCategories[cat].push(s);
+        });
+
+        const sortedKeys = Object.keys(groupedCategories).toSorted((keyA, keyB) => {
+          const indexA = categoryOrder.indexOf(keyA);
+          const indexB = categoryOrder.indexOf(keyB);
+
+          if (indexA !== -1 && indexB !== -1) return indexA - indexB;
+          if (indexA !== -1) return -1;
+          if (indexB !== -1) return 1;
+
+          const labelA = resolvedCategories[keyA] || keyA;
+          const labelB = resolvedCategories[keyB] || keyB;
+          return labelA.localeCompare(labelB);
+        });
+
+        sortedKeys.forEach((key) => {
+          const list = groupedCategories[key] || [];
+          list.sort((a, b) => {
+            const orderA = a.order ?? -1;
+            const orderB = b.order ?? -1;
+            if (orderA !== orderB) return orderB - orderA;
+            const labelA = a.label || a.id;
+            const labelB = b.label || b.id;
+            return labelA.localeCompare(labelB);
+          });
+
+          const categoryLabel = resolvedCategories[key] || key;
+
+          const section = document.createElement('div');
+          section.className = 'rla-shortcuts-category-section';
+
+          const title = document.createElement('h4');
+          title.className = 'rla-shortcuts-category-title';
+          title.textContent = categoryLabel;
+          section.appendChild(title);
+
+          const grid = document.createElement('div');
+          grid.className = 'rla-shortcuts-grid';
+
+          list.forEach(shortcut => {
+            const row = document.createElement('div');
+            row.className = 'rla-shortcuts-row';
+
+            const info = document.createElement('div');
+            info.className = 'rla-shortcuts-info';
+
+            const name = document.createElement('span');
+            name.className = 'rla-shortcuts-name';
+            name.textContent = shortcut.label || shortcut.id;
+            info.appendChild(name);
+
+            if (shortcut.description) {
+              const desc = document.createElement('span');
+              desc.className = 'rla-shortcuts-desc';
+              desc.textContent = shortcut.description;
+              info.appendChild(desc);
+            }
+            row.appendChild(info);
+
+            const keysContainer = document.createElement('div');
+            keysContainer.className = 'rla-shortcuts-keys';
+
+            shortcut.keys.forEach(k => {
+              const kbd = document.createElement('kbd');
+              kbd.className = 'rla-shortcuts-kbd';
+              kbd.textContent = k;
+              keysContainer.appendChild(kbd);
+            });
+            row.appendChild(keysContainer);
+            grid.appendChild(row);
+          });
+
+          section.appendChild(grid);
+          body.appendChild(section);
+        });
+      });
+
+      this.shortcutsCleanup = () => {
+        closeHelp();
+        closeBtn?.removeEventListener('click', onCloseClick);
+        dialog.removeEventListener('click', onDialogClick);
+        document.removeEventListener('rla-shortcuts:open', onOpenEvent);
+        if (escapeCleanup) escapeCleanup();
+        qShortcutCleanup();
+        unsubscribe();
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.shortcutsCleanup) {
+        this.shortcutsCleanup();
+        this.shortcutsCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-shortcuts')) {
+    customElements.define('rla-shortcuts', RLAShortcuts);
+  }
+</script>
+
+<style is:global>
+  .rla-shortcuts-dialog {
+    border: 1px solid #27272a !important;
+    background: #18181b !important;
+    color: #fff !important;
+    border-radius: 12px;
+    padding: 0;
+    max-width: 520px;
+    width: 100%;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    outline: none;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 50;
+    margin: 0;
+  }
+
+  .rla-shortcuts-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
+
+  .rla-shortcuts-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rla-shortcuts-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid #27272a;
+  }
+
+  .rla-shortcuts-title {
+    margin: 0 !important;
+    font-size: 1.125rem !important;
+    font-weight: 600 !important;
+    color: #ffffff !important; /* Force high contrast white */
+  }
+
+  .rla-shortcuts-close {
+    background: transparent;
+    border: none;
+    color: var(--color-neutral-400, #a3a3a3);
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s, background-color 0.15s;
+  }
+
+  .rla-shortcuts-close:hover {
+    color: #fff;
+    background-color: var(--color-neutral-800, #262626);
+  }
+
+  .rla-shortcuts-close:focus {
+    outline: none !important;
+  }
+
+  .rla-shortcuts-close:focus-visible {
+    outline: 2px solid var(--color-primary-500, #3b82f6) !important;
+  }
+
+  .rla-shortcuts-body {
+    padding: 20px;
+    max-height: 380px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .rla-shortcuts-category-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .rla-shortcuts-category-title {
+    margin: 0;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-primary-500, #3b82f6);
+    font-weight: 700;
+  }
+
+  .rla-shortcuts-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .rla-shortcuts-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(38, 38, 38, 0.4);
+  }
+
+  .rla-shortcuts-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .rla-shortcuts-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #f5f5f5;
+  }
+
+  .rla-shortcuts-desc {
+    font-size: 0.75rem;
+    color: var(--color-neutral-400, #a3a3a3);
+  }
+
+  .rla-shortcuts-keys {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .rla-shortcuts-kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    background-color: #27272a !important;
+    border: 1px solid #3f3f46 !important;
+    border-radius: 4px;
+    padding: 2px 6px;
+    min-width: 20px;
+    color: #a3a3a3 !important;
+    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
+  }
+
+  .rla-shortcuts-empty {
+    font-size: 0.875rem;
+    color: var(--color-neutral-500, #737373);
+    text-align: center;
+    padding: 16px 0;
+  }
+
+  .rla-shortcuts-footer {
+    padding: 12px 20px;
+    background-color: #09090b !important;
+    border-top: 1px solid #27272a;
+    font-size: 0.75rem;
+    color: var(--color-neutral-400, #a3a3a3);
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .rla-shortcuts-kbd-footer {
+    background-color: #27272a !important;
+    border: 1px solid #3f3f46 !important;
+    border-radius: 3px;
+    padding: 1px 4px;
+    font-size: 0.7rem;
+    color: #a3a3a3 !important;
+  }
+</style>