@rimelight/ui 0.0.36 → 0.0.38

package/src/components/astro/RLAShortcuts.astro

@@ -1,429 +0,0 @@
----
-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>

package/src/components/astro/RLASidebar.astro

@@ -1,158 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SidebarProps, SidebarItem } from "../../types"
-import sidebarThemeDefault from "../../themes/sidebar.theme"
-import RLABadge from "./RLABadge.astro"
-
-const sidebarTheme = sidebarThemeDefault
-const sidebar = scv(sidebarTheme)
-
-const {
-  items = [],
-  side = "left",
-  collapsible = "none",
-  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
-}, 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 variant = badge.variant || "soft"
-  if (badge.variant) {
-    const v = badge.variant.toLowerCase()
-    if (v === "tip" || v === "success") { color = "success"; variant = "soft" }
-    else if (v === "caution" || v === "warning") { color = "warning"; variant = "soft" }
-    else if (v === "danger") { color = "danger"; variant = "soft" }
-    else if (v === "note" || v === "default") { color = "primary"; variant = "soft" }
-  }
-  return { text: badge.text || "", color, variant: variant 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">
-              <span class="i-lucide-layers 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"
-      >
-        <span class="i-lucide-panel-left 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>
-                )}
-                <span class="i-lucide-chevron-right 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/astro/RLASkeleton.astro

@@ -1,24 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SkeletonProps } from "../../types"
-import skeletonThemeDefault, { createSkeletonTheme } from "../../themes/skeleton.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const skeletonTheme = uiConfig.colors ? createSkeletonTheme() : skeletonThemeDefault
-
-const skeleton = scv(skeletonTheme)
-
-const {
-  shape = "rounded",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SkeletonProps
-
-const classes = resolveClasses(skeleton, {
-  shape
-}, useUi("skeleton", uiProp), className)
----
-<div class={classes.root} data-slot="root" {...rest} />