@rimelight/ui 0.0.20 → 0.0.22

package/src/plugins/starlightAddons/components/Keyboard.astro

@@ -0,0 +1,321 @@
+---
+interface HighlightGroup {
+  keys: string[]
+  color?: string
+  label?: string
+}
+
+interface Props {
+  highlightedKeys?: string[]
+  groups?: HighlightGroup[]
+  keyGap?: number
+  sectionGap?: number
+  keySize?: number
+  variant?: 'full' | '60'
+  os?: 'windows' | 'mac'
+  highlightColor?: string
+  backgroundColor?: string
+}
+
+const {
+  highlightedKeys = [],
+  groups = [],
+  keyGap = 8,
+  sectionGap = 40,
+  keySize = 40,
+  variant = 'full',
+  os = 'windows',
+  highlightColor = 'var(--ui-color-primary-500, #00c16a)',
+  backgroundColor = 'transparent'
+} = Astro.props
+
+interface Key {
+  label?: string
+  width: number
+  height?: number
+  code?: string
+  type?: 'spacer' | 'key'
+}
+
+const mainRows: Key[][] = [
+  [
+    { label: 'Esc', width: 1, code: 'Escape' },
+    { type: 'spacer', width: 1 },
+    { label: 'F1', width: 1 }, { label: 'F2', width: 1 }, { label: 'F3', width: 1 }, { label: 'F4', width: 1 },
+    { type: 'spacer', width: 0.5 },
+    { label: 'F5', width: 1 }, { label: 'F6', width: 1 }, { label: 'F7', width: 1 }, { label: 'F8', width: 1 },
+    { type: 'spacer', width: 0.5 },
+    { label: 'F9', width: 1 }, { label: 'F10', width: 1 }, { label: 'F11', width: 1 }, { label: 'F12', width: 1 },
+  ],
+  [
+    { label: '`', width: 1 }, { label: '1', width: 1, code: 'Digit1' }, { label: '2', width: 1, code: 'Digit2' }, { label: '3', width: 1, code: 'Digit3' },
+    { label: '4', width: 1, code: 'Digit4' }, { label: '5', width: 1, code: 'Digit5' }, { label: '6', width: 1, code: 'Digit6' }, { label: '7', width: 1, code: 'Digit7' },
+    { label: '8', width: 1, code: 'Digit8' }, { label: '9', width: 1, code: 'Digit9' }, { label: '0', width: 1, code: 'Digit0' }, { label: '-', width: 1, code: 'Minus' },
+    { label: '=', width: 1, code: 'Equal' }, { label: 'Bkspc', width: 2, code: 'Backspace' },
+  ],
+  [
+    { label: 'Tab', width: 1.5 }, { label: 'Q', width: 1 }, { label: 'W', width: 1 }, { label: 'E', width: 1 },
+    { label: 'R', width: 1 }, { label: 'T', width: 1 }, { label: 'Y', width: 1 }, { label: 'U', width: 1 },
+    { label: 'I', width: 1 }, { label: 'O', width: 1 }, { label: 'P', width: 1 }, { label: '[', width: 1 },
+    { label: ']', width: 1 }, { label: '\\', width: 1.5 },
+  ],
+  [
+    { label: 'Caps', width: 1.75, code: 'CapsLock' }, { label: 'A', width: 1 }, { label: 'S', width: 1 }, { label: 'D', width: 1 },
+    { label: 'F', width: 1 }, { label: 'G', width: 1 }, { label: 'H', width: 1 }, { label: 'J', width: 1 },
+    { label: 'K', width: 1 }, { label: 'L', width: 1 }, { label: ';', width: 1 }, { label: "'", width: 1 },
+    { label: 'Enter', width: 2.25, code: 'Enter' },
+  ],
+  [
+    { label: 'Shift', width: 2.5, code: 'ShiftLeft' }, { label: 'Z', width: 1 }, { label: 'X', width: 1 }, { label: 'C', width: 1 },
+    { label: 'V', width: 1 }, { label: 'B', width: 1 }, { label: 'N', width: 1 }, { label: 'M', width: 1 },
+    { label: ',', width: 1 }, { label: '.', width: 1, code: 'Period' }, { label: '/', width: 1, code: 'Slash' }, { label: 'Shift', width: 2.5, code: 'ShiftRight' },
+  ],
+  [
+    { label: 'Ctrl', width: 1.25, code: 'ControlLeft' }, { label: 'Win', width: 1.25, code: 'MetaLeft' }, { label: 'Alt', width: 1.25, code: 'AltLeft' },
+    { label: 'Space', width: 6.25, code: 'Space' },
+    { label: 'Alt', width: 1.25, code: 'AltRight' }, { label: 'Fn', width: 1.25 }, { label: 'Menu', width: 1.25, code: 'ContextMenu' }, { label: 'Ctrl', width: 1.25, code: 'ControlRight' },
+  ]
+]
+
+const functionRows: Key[][] = [
+  [{ label: 'PrtSc', width: 1, code: 'PrintScreen' }, { label: 'ScrLk', width: 1, code: 'ScrollLock' }, { label: 'Pause', width: 1, code: 'Pause' }],
+  [{ label: 'Ins', width: 1 }, { label: 'Home', width: 1 }, { label: 'PgUp', width: 1 }],
+  [{ label: 'Del', width: 1 }, { label: 'End', width: 1 }, { label: 'PgDn', width: 1 }],
+  [{ type: 'spacer', width: 3 }],
+  [{ type: 'spacer', width: 1 }, { label: '↑', width: 1, code: 'ArrowUp' }, { type: 'spacer', width: 1 }],
+  [{ label: '←', width: 1, code: 'ArrowLeft' }, { label: '↓', width: 1, code: 'ArrowDown' }, { label: '→', width: 1, code: 'ArrowRight' }],
+]
+
+const numpadKeys: Key[] = [
+  { label: 'Num', width: 1, code: 'NumLock' }, { label: '/', width: 1, code: 'NumpadDivide' }, { label: '*', width: 1, code: 'NumpadMultiply' }, { label: '-', width: 1, code: 'NumpadSubtract' },
+  { label: '7', width: 1, code: 'Numpad7' }, { label: '8', width: 1, code: 'Numpad8' }, { label: '9', width: 1, code: 'Numpad9' }, { label: '+', width: 1, height: 2, code: 'NumpadAdd' },
+  { label: '4', width: 1, code: 'Numpad4' }, { label: '5', width: 1, code: 'Numpad5' }, { label: '6', width: 1, code: 'Numpad6' },
+  { label: '1', width: 1, code: 'Numpad1' }, { label: '2', width: 1, code: 'Numpad2' }, { label: '3', width: 1, code: 'Numpad3' }, { label: 'Enter', width: 1, height: 2, code: 'NumpadEnter' },
+  { label: '0', width: 2, code: 'Numpad0' }, { label: '.', width: 1, code: 'NumpadDecimal' },
+]
+
+function getKeyLabel(key: Key) {
+  if (os !== 'mac') return key.label;
+
+  const macMap: Record<string, string> = {
+    'Ctrl': 'control',
+    'Win': 'option',
+    'Alt': 'command',
+    'Bkspc': 'delete',
+    'Enter': 'return',
+    'Caps': 'caps lock',
+    'Shift': 'shift',
+    'Menu': 'option',
+    'Tab': 'tab',
+    'Esc': 'esc',
+  };
+
+  const label = (key.label && macMap[key.label]) || key.label;
+
+  if (label === 'command') return 'cmd ⌘';
+  if (label === 'option') return 'opt ⌥';
+  if (label === 'control') return 'ctrl ⌃';
+  if (label === 'shift') return 'shift ⇧';
+  if (label === 'return') return 'return ↩';
+  if (label === 'delete') return 'delete ⌫';
+
+  return label;
+}
+
+function getKeyHighlight(key: Key) {
+  if (!key) return { active: false };
+
+  const code = key.code || key.label || '';
+  const label = key.label || '';
+  const macLabel = getKeyLabel(key) || '';
+
+  const isMatch = (list: string[]) => {
+    if (!list || !Array.isArray(list)) return false;
+    if (list.includes(code)) return true;
+    if (list.includes(label)) {
+      if (code.startsWith('Numpad') && /^\d$/.test(label)) return false;
+      return true;
+    }
+    return os === 'mac' && list.includes(macLabel);
+  };
+
+  if (isMatch(highlightedKeys)) {
+    return { active: true, color: highlightColor };
+  }
+
+  for (const group of groups) {
+    if (isMatch(group.keys)) {
+      return { active: true, color: group.color };
+    }
+  }
+
+  return { active: false };
+}
+
+const displayMainRows = variant === '60'
+    ? [
+      [{ label: 'Esc', width: 1, code: 'Escape' }, ...(mainRows[1] || []).slice(1)],
+      ...mainRows.slice(2)
+    ]
+    : mainRows;
+
+
+interface RenderKey extends Key {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+function processRows(rows: Key[][], startX: number, startY: number): RenderKey[] {
+  const result: RenderKey[] = [];
+  let currentY = startY;
+
+  for (const row of rows) {
+    let currentX = startX;
+    for (const key of row) {
+      const w = key.width || 1;
+      const h = key.height || 1;
+      const widthPx = w * keySize + (w - 1) * keyGap;
+      const heightPx = h * keySize + (h - 1) * keyGap;
+
+      if (key.type !== 'spacer') {
+        result.push({
+          ...key,
+          x: currentX,
+          y: currentY,
+          w: widthPx,
+          h: heightPx
+        });
+      }
+      currentX += widthPx + keyGap;
+    }
+    currentY += keySize + keyGap;
+  }
+  return result;
+}
+
+const mainRenderKeys = processRows(displayMainRows, 0, 0);
+const mainHeight = displayMainRows.length * (keySize + keyGap);
+
+let secondaryKeys: RenderKey[] = [];
+let numpadRenderKeys: RenderKey[] = [];
+let totalWidth = (15 * keySize) + (14 * keyGap);
+let finalHeight = mainHeight;
+
+if (variant === 'full') {
+  const secondaryY = mainHeight + sectionGap;
+  secondaryKeys = processRows(functionRows, 0, secondaryY);
+
+  const numpadX = (3 * keySize) + (3 * keyGap) + sectionGap;
+
+  numpadKeys.forEach((key, i) => {
+    const k = key as Key;
+    const w = k.width || 1;
+    const h = k.height || 1;
+
+    const positions = [
+      [0,0], [1,0], [2,0], [3,0],
+      [0,1], [1,1], [2,1], [3,1],
+      [0,2], [1,2], [2,2],
+      [0,3], [1,3], [2,3], [3,3],
+      [0,4], [2,4]
+    ];
+
+    const pxOffset = positions[i]?.[0] ?? 0;
+    const pyOffset = positions[i]?.[1] ?? 0;
+
+    const px = numpadX + pxOffset * (keySize + keyGap);
+    const py = secondaryY + (pyOffset + 1) * (keySize + keyGap);
+
+    numpadRenderKeys.push({
+      ...k,
+      x: px,
+      y: py,
+      w: w * keySize + (w - 1) * keyGap,
+      h: h * keySize + (h - 1) * keyGap
+    });
+  });
+
+  totalWidth = Math.max(totalWidth, numpadX + (4 * keySize) + (3 * keyGap));
+  finalHeight = secondaryY + (6 * keySize) + (5 * keyGap);
+}
+---
+
+<div class="keyboard-wrapper">
+  <div class="keyboard-container">
+    <svg
+        viewBox={`-16 -16 ${totalWidth + 32} ${finalHeight + 64}`}
+        class="keyboard-svg"
+        preserveAspectRatio="xMidYMid meet"
+    >
+      {backgroundColor && backgroundColor !== 'transparent' && (
+          <rect
+              x="-16" y="-16"
+              width={totalWidth + 32}
+              height={finalHeight + 64}
+              fill={backgroundColor}
+              rx="12"
+          />
+      )}
+
+      {[...mainRenderKeys, ...secondaryKeys, ...numpadRenderKeys].map((key) => {
+        const highlight = getKeyHighlight(key);
+        const color = highlight.active ? (highlight.color || highlightColor) : '#2a2a3e';
+        const label = getKeyLabel(key);
+
+        return (
+            <g class={`kb-key-group ${highlight.active ? 'highlighted' : ''}`}>
+              {/* Key Base / Shadow */}
+              <rect
+                  x={key.x}
+                  y={key.y + 1}
+                  width={key.w}
+                  height={key.h}
+                  rx="4"
+                  fill="#1a1a2e"
+              />
+              {/* Key Face */}
+              <rect
+                  x={key.x}
+                  y={key.y}
+                  width={key.w}
+                  height={key.h}
+                  rx="4"
+                  fill={color}
+                  stroke={highlight.active ? "#ffffff66" : "#3a3a4e"}
+                  stroke-width="1"
+              />
+              {label && (
+                  <text
+                      x={key.x + key.w / 2}
+                      y={key.y + key.h / 2}
+                      text-anchor="middle"
+                      dominant-baseline="central"
+                      class="kb-key-label"
+                      fill={highlight.active ? "#fff" : "#e0e0e0"}
+                  >
+                    {label}
+                  </text>
+              )}
+            </g>
+        );
+      })}
+
+    </svg>
+  </div>
+
+  {groups.some(g => g.label) && (
+      <div class="flex flex-wrap justify-center gap-x-6 gap-y-3 mt-6 w-full">
+        {groups.filter(g => g.label).map(group => (
+            <div class="flex items-center gap-2 m-0 p-0 text-[10px] text-[#a0a0b0] uppercase tracking-[0.05em] font-medium whitespace-nowrap leading-none">
+              <svg width="8" height="8" class="flex-shrink-0 block">
+                <rect width="8" height="8" rx="2" fill={group.color || '#6366f1'} />
+              </svg>
+              <span class="m-0 p-0 leading-none inline-block">{group.label}</span>
+            </div>
+        ))}
+      </div>
+  )}
+</div>
+

package/src/plugins/starlightAddons/index.ts

@@ -59,13 +59,7 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
   return {
     name: "rimelight-ui-starlight-addons",
     hooks: {
-      "config:setup"({
-        addIntegration,
-        updateConfig,
-        logger,
-        command,
-        config: starlightConfig
-      }) {
+      "config:setup"({ addIntegration, updateConfig, logger, command, config: starlightConfig }) {
         // --- Sidebar Topics Logic ---
         if ((command === "dev" || command === "build") && topicsData.length > 0) {
           if (starlightConfig.sidebar) {

package/src/styles/index.css

@@ -1,3 +1,156 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 @import "./prism.css";
+
+/* Keyboard Component Styles */
+.keyboard-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 100%;
+  margin: 16px 0;
+  box-sizing: border-box;
+}
+.keyboard-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.keyboard-svg {
+  width: 100%;
+  height: auto;
+  max-width: 900px;
+}
+.kb-key-label {
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+  font-weight: 600;
+  pointer-events: none;
+  user-select: none;
+}
+.kb-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px 24px;
+  margin-top: 24px;
+  width: 100%;
+}
+.keyboard-wrapper .legend-item {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px;
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 10px;
+  color: #a0a0b0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  white-space: nowrap;
+  line-height: 1 !important;
+}
+.legend-color-svg {
+  flex-shrink: 0;
+  display: block;
+}
+.keyboard-wrapper .legend-label {
+  margin: 0 !important;
+  padding: 0 !important;
+  line-height: 1 !important;
+  display: inline-block !important;
+}
+
+/* Gamepad Component Styles */
+.gamepad-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px;
+  border-radius: 24px;
+  width: 100%;
+  max-width: 100%;
+  margin: 24px 0;
+  box-sizing: border-box;
+  container-type: inline-size;
+  border: 1px solid #1a1a2e;
+}
+.gamepad-container {
+  width: 100%;
+  max-width: 440px;
+}
+.gamepad-svg {
+  width: 100%;
+  height: auto;
+}
+.gp-btn rect,
+.gp-btn circle {
+  fill: #1e1e30;
+  stroke: #33334d;
+  stroke-width: 1;
+  transition: all 0.2s ease;
+}
+.btn-label {
+  fill: #555570;
+  font-size: 10px;
+  font-family: var(--font-sans, system-ui);
+  font-weight: 800;
+  pointer-events: none;
+  line-height: 1;
+}
+.gp-btn.active rect,
+.gp-btn.active circle {
+  fill: var(--hl-color, #00c16a);
+  stroke: #ffffff33;
+  stroke-width: 1.5;
+}
+.gp-btn.active .btn-label {
+  fill: #fff;
+}
+.gamepad-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px 24px;
+  margin-top: 40px;
+  width: 100%;
+}
+.gamepad-wrapper .legend-item {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px;
+  height: 10px !important;
+  font-size: 10px;
+  color: #777790;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  line-height: 10px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.gamepad-wrapper .legend-label {
+  display: inline-block !important;
+  height: 10px !important;
+  line-height: 10px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.kb-legend-label {
+  font-family: var(--font-sans, system-ui);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.gp-legend-label {
+  font-family: var(--font-sans, system-ui);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}

package/src/themes/footer.theme.ts

@@ -0,0 +1,29 @@
+/**
+ * Theme configuration for the Footer component. Defines the slots, base styles, and variants for
+ * layout management.
+ */
+export const footerTheme = {
+  slots: ["root", "container", "left", "center", "right"],
+  base: {
+    root: "py-8 lg:py-12",
+    container:
+      "flex flex-col justify-between gap-xl lg:flex-row lg:items-stretch px-4 md:px-6 lg:px-8",
+    left: "order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:flex-none lg:items-start",
+    center: "flex flex-col items-center justify-start lg:order-2 lg:flex-1",
+    right:
+      "order-first flex flex-col items-center justify-between gap-xl lg:order-3 lg:flex-none lg:items-end"
+  },
+  variants: {
+    contain: {
+      true: {
+        container: "mx-auto max-w-7xl"
+      },
+      false: {
+        container: "w-full"
+      }
+    }
+  },
+  defaultVariants: {
+    contain: false
+  }
+} as const

package/src/themes/header.theme.ts

@@ -1,11 +1,29 @@
 /**
  * Theme configuration for the Header component. Defines the slots, base styles, and variants for
  * layout management.
+ *
+ * Slots:
+ *
+ * - `root` — the `<header>` element
+ * - `content` — inner wrapper div used for height measurement (fixed/hideOnScroll mode)
+ * - `container` — max-width flex row
+ * - `left` — left region
+ * - `center` — center region
+ * - `right` — right region
+ *
+ * Variants:
+ *
+ * - `contain` — constrains container to max-w-7xl
+ * - `sticky` — sticky positioning (ignored when `fixed` variant is true)
+ * - `fixed` — position: fixed with left/right 0 and smooth top/opacity transition; used for stacked
+ *   header layers. Top offset and z-index are applied via inline style (top prop + stackIndex prop)
+ *   rather than theme classes.
  */
 export const headerTheme = {
-  slots: ["root", "container", "left", "center", "right"],
+  slots: ["root", "content", "container", "left", "center", "right"],
   base: {
     root: "w-full",
+    content: "w-full",
     container:
       "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-4 md:px-6 lg:px-8",
     left: "flex flex-none items-center justify-start",
@@ -28,10 +46,22 @@ export const headerTheme = {
       false: {
         root: "relative"
       }
+    },
+    /**
+     * Fixed-layer mode. When true, overrides sticky/relative positioning with `position: fixed` and
+     * enables smooth transitions. `top` and `z-index` are applied via inline `:style` on the
+     * component.
+     */
+    fixed: {
+      true: {
+        root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
+      },
+      false: {}
     }
   },
   defaultVariants: {
     contain: true,
-    sticky: true
+    sticky: true,
+    fixed: false
   }
 } as const

package/src/themes/index.ts

@@ -1,13 +1,17 @@
-import { buttonTheme } from "./button.theme"
 import { headerTheme } from "./header.theme"
+import { footerTheme } from "./footer.theme"
+import { scrollToTopTheme } from "./scroll-to-top.theme"
+import { buttonTheme } from "./button.theme"
 
 /**
  * Default UI configuration for all components. This is the baseline that gets merged with
  * user-provided overrides via the Astro integration options.
  */
 export const defaultUIConfig = {
-  button: buttonTheme,
-  header: headerTheme
+  "header": headerTheme,
+  "footer": footerTheme,
+  "scroll-to-top": scrollToTopTheme,
+  "button": buttonTheme
 } as const
 
 export type DefaultUIConfig = typeof defaultUIConfig

package/src/themes/scroll-to-top.theme.ts

@@ -0,0 +1,48 @@
+/**
+ * Theme configuration for the ScrollToTop component. Defines the slots, base styles, and variants
+ * for the scroll-to-top button with progress indicator.
+ */
+export const scrollToTopTheme = {
+  slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
+  base: {
+    root: "fixed bottom-6 right-6 z-50",
+    button: "size-14 lg:size-12 p-0 rounded-full",
+    progressBase: "progress-circle-base size-full",
+    svg: "size-full",
+    iconContainer: "absolute inset-0 flex items-center justify-center text-center",
+    icon: "size-6 text-white"
+  },
+  variants: {
+    color: {
+      primary: {
+        progressBase: "",
+        svg: "",
+        iconContainer: "",
+        icon: ""
+      },
+      secondary: {
+        progressBase: "",
+        svg: "",
+        iconContainer: "",
+        icon: ""
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      classNames: {
+        icon: "text-primary-foreground"
+      }
+    },
+    {
+      color: "secondary",
+      classNames: {
+        icon: "text-secondary-foreground"
+      }
+    }
+  ],
+  defaultVariants: {
+    color: "primary"
+  }
+} as const