@rimelight/ui 0.0.37 → 0.0.39

package/src/components/shortcuts/RLAShortcuts.astro

@@ -0,0 +1,430 @@
+---
+import RLAIcon from "../icon/RLAIcon.astro"
+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">
+          <RLAIcon name="close" class="w-4 h-4" />
+        </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>

package/src/components/sidebar/RLASidebar.astro

@@ -0,0 +1,162 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { SidebarProps, SidebarItem } from "./sidebar"
+import sidebarThemeDefault from "./sidebar.theme"
+import RLABadge from "../badge/RLABadge.astro"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+const sidebarTheme = sidebarThemeDefault
+const sidebar = scv(sidebarTheme)
+
+const {
+  items = [],
+  side = "left",
+  collapsible = "none",
+  variant = "sidebar",
+  logo,
+  ui: uiProp,
+  class: className,
+  t = (key: string) => key,
+  _depth = 0,
+  ...rest
+} = Astro.props as SidebarProps & { t?: (key: string) => string; _depth?: number }
+
+const classes = resolveClasses(sidebar, {
+  side,
+  collapsible,
+  variant
+}, useUi("sidebar", uiProp), className)
+
+const hasActiveChild = (item: SidebarItem): boolean => {
+  if (item.active) return true
+  return (item.children ?? []).some(c => hasActiveChild(c))
+}
+
+function normalizeBadge(badge: any) {
+  if (!badge) return null
+  if (typeof badge === "string") {
+    return { text: badge, color: "primary", variant: "soft" as const, class: "" }
+  }
+  let color = badge.color || "primary"
+  let badgeVariant = badge.variant || "soft"
+  if (badge.variant) {
+    const v = badge.variant.toLowerCase()
+    if (v === "tip" || v === "success") { color = "success"; badgeVariant = "soft" }
+    else if (v === "caution" || v === "warning") { color = "warning"; badgeVariant = "soft" }
+    else if (v === "error") { color = "error"; badgeVariant = "soft" }
+    else if (v === "note" || v === "default") { color = "primary"; badgeVariant = "soft" }
+  }
+  return { text: badge.text || badge.label || "", color, variant: badgeVariant as "solid" | "outline" | "soft", class: badge.class || "" }
+}
+
+const isRoot = _depth === 0
+// Indentation per depth level
+const indentClass = _depth === 0 ? "ml-6" : _depth === 1 ? "ml-4" : "ml-3"
+const textSizeClass = _depth === 0 ? "" : "text-xs"
+---
+
+{isRoot ? (
+  <>
+    <aside class={classes.root} data-slot="root" data-sidebar {...rest}>
+      <!-- Header -->
+      <div class={classes.header} data-slot="header">
+        <slot name="header">
+          {logo && (
+            <span data-slot="sidebar-logo" class="flex items-center gap-2">
+              <RLAIcon name="layers" class="size-5 text-primary" />
+              <span class="truncate">{logo}</span>
+            </span>
+          )}
+        </slot>
+      </div>
+
+      <!-- Body -->
+      <div class={classes.content} data-slot="content">
+        <slot>
+          <Astro.self items={items} t={t} _depth={1} ui={uiProp} />
+        </slot>
+      </div>
+
+      <!-- Footer -->
+      <div class={classes.footer} data-slot="footer">
+        <slot name="footer" />
+      </div>
+    </aside>
+
+    {collapsible === "offcanvas" && (
+      <button
+        type="button"
+        data-sidebar-toggle
+        class="fixed top-4 left-4 z-50 flex size-9 items-center justify-center rounded-md bg-background border border-border shadow-sm hover:bg-muted transition-colors"
+        aria-label="Toggle sidebar"
+      >
+        <RLAIcon name="panelLeft" class="size-4" />
+      </button>
+    )}
+
+    <script>
+      document.querySelectorAll("[data-sidebar-toggle]").forEach(toggle => {
+        toggle.addEventListener("click", () => {
+          const sidebar = document.querySelector("[data-sidebar]");
+          if (!sidebar) return;
+          sidebar.classList.toggle("-translate-x-full");
+        });
+      });
+    </script>
+  </>
+) : (
+  <div class="flex flex-col gap-0.5">
+    {items.map((item: SidebarItem) => {
+      const hasChildren = item.children && item.children.length > 0
+      const isActive = item.active || hasActiveChild(item)
+      const b = normalizeBadge(item.badge)
+      return (
+        <div class={_depth === 1 ? classes.item : ""} data-slot={_depth === 1 ? "item" : undefined}>
+          {hasChildren ? (
+            <details open={isActive} class="group/details">
+              <summary
+                class={
+                  (_depth === 1 ? classes.itemLink : `flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors ${textSizeClass}`) +
+                  (isActive ? " text-foreground bg-muted" : "") +
+                  " list-none cursor-pointer"
+                }
+                data-slot="item-summary"
+              >
+                {item.icon && <span class={(_depth === 1 ? classes.itemIcon : "size-3.5 shrink-0") + " " + item.icon} aria-hidden="true" />}
+                <span data-slot="item-text" class="truncate flex-1">{t(item.label)}</span>
+                {b && (
+                  <RLABadge variant={b.variant} color={b.color} size="xs" class={"ml-auto select-none " + b.class} data-slot="item-badge">
+                    {t(b.text)}
+                  </RLABadge>
+                )}
+                <RLAIcon name="chevronRight" class="size-3 ml-auto transition-transform group-open/details:rotate-90" />
+              </summary>
+              <div class={`mt-0.5 ${indentClass} flex flex-col gap-0.5`}>
+                <Astro.self items={item.children} t={t} _depth={_depth + 1} />
+              </div>
+            </details>
+          ) : (
+            <a
+              href={item.href ?? "#"}
+              class={
+                (_depth === 1 ? classes.itemLink : `flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors ${textSizeClass}`) +
+                (isActive ? " text-foreground bg-muted" : "")
+              }
+              aria-current={isActive ? "page" : undefined}
+            >
+              {item.icon && <span class={(_depth === 1 ? classes.itemIcon : "size-3.5 shrink-0") + " " + item.icon} aria-hidden="true" />}
+              <span data-slot="item-text" class="truncate flex-1">{t(item.label)}</span>
+              {b && (
+                <RLABadge variant={b.variant} color={b.color} size="xs" class={"ml-auto select-none " + b.class} data-slot="item-badge">
+                  {t(b.text)}
+                </RLABadge>
+              )}
+            </a>
+          )}
+        </div>
+      )
+    })}
+  </div>
+)}

package/src/components/sidebar/sidebar.theme.ts

@@ -0,0 +1,48 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createSidebarTheme = () =>
+  defineTheme({
+    slots: ["root", "header", "content", "footer", "item", "itemLink", "itemIcon", "itemBadge"],
+    base: {
+      root: "flex flex-col h-full w-64 bg-background border-r border-border shadow-sm transition-all duration-300",
+      header:
+        "flex h-16 items-center px-6 border-b border-border gap-2 font-semibold text-lg text-foreground",
+      content: "flex-1 overflow-y-auto p-4 flex flex-col gap-1.5",
+      footer: "p-4 border-t border-border flex items-center justify-between",
+      item: "relative",
+      itemLink:
+        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer",
+      itemIcon: "size-4 text-current",
+      itemBadge:
+        "ml-auto flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold"
+    },
+    variants: {
+      side: {
+        left: { root: "left-0 border-r" },
+        right: { root: "right-0 border-l" }
+      },
+      collapsible: {
+        icon: {
+          root: "w-16 [&_[data-slot=item-text]]:hidden [&_[data-slot=item-badge]]:hidden [&_[data-slot=sidebar-logo]]:hidden"
+        },
+        offcanvas: { root: "-translate-x-full" },
+        none: {}
+      },
+      variant: {
+        sidebar: {},
+        floating: {
+          root: "m-4 rounded-xl border border-border shadow-md h-[calc(100vh-2rem)] bg-background/95 backdrop-blur"
+        },
+        inset: {
+          root: "bg-muted/40 border-none p-2"
+        }
+      }
+    },
+    defaultVariants: {
+      side: "left",
+      collapsible: "none",
+      variant: "sidebar"
+    }
+  })
+
+export default createSidebarTheme()

package/src/components/sidebar/sidebar.ts

@@ -0,0 +1,53 @@
+import type { BadgeProps } from "../badge/badge"
+
+export interface SidebarItem {
+  label: string
+  href?: string
+  icon?: string
+  badge?: string | BadgeProps
+  active?: boolean
+  children?: SidebarItem[]
+  items?: SidebarItem[]
+  collapsed?: boolean
+}
+
+export interface SidebarScope {
+  id?: string
+  label: string
+  href?: string
+  icon?: string
+  items?: SidebarItem[]
+  collapsed?: boolean
+}
+
+export interface SidebarProps {
+  /**
+   * The navigation links array.
+   */
+  items?: SidebarItem[]
+  /**
+   * Side of the page.
+   */
+  side?: "left" | "right"
+  /**
+   * Collapsible mode.
+   */
+  collapsible?: "icon" | "offcanvas" | "none"
+  /**
+   * The visual style variant of the sidebar.
+   */
+  variant?: "sidebar" | "floating" | "inset"
+  /**
+   * Header logo or text.
+   */
+  logo?: string
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}