@rimelight/ui 0.0.19 → 0.0.21

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

@@ -1,126 +1,125 @@
-/// <reference path="./locals.d.ts" />
-import type { StarlightPlugin, StarlightUserConfig } from "@astrojs/starlight/types"
-import virtual from "vite-plugin-virtual"
-import path from "node:path"
-import { fileURLToPath } from "node:url"
-import { z } from "astro/zod"
-
-import {
-  StarlightSidebarTopicsConfigSchema,
-  StarlightSidebarTopicsOptionsSchema,
-  type StarlightSidebarTopicsUserConfig,
-  type StarlightSidebarTopicsUserOptions
-} from "./libs/config"
-import { throwPluginError } from "./libs/plugin"
-import { vitePluginStarlightSidebarTopics } from "./libs/vite"
-
-export type {
-  StarlightSidebarTopicsConfig,
-  StarlightSidebarTopicsUserConfig,
-  StarlightSidebarTopicsOptions,
-  StarlightSidebarTopicsUserOptions
-} from "./libs/config"
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-export interface StarlightAddonsConfig {
-  copy?: boolean
-  share?: boolean
-  // Merged config for Topics
-  topics?: StarlightSidebarTopicsUserConfig
-  topicOptions?: StarlightSidebarTopicsUserOptions
-}
-
-export default function starlightAddons(userConfig?: StarlightAddonsConfig): StarlightPlugin {
-  // 1. Setup default and merged config for Addons
-  const defaultAddonConfig: StarlightAddonsConfig = {
-    copy: true,
-    share: true
-  }
-
-  const addonConfig = { ...defaultAddonConfig, ...userConfig }
-
-  // 2. Validate Sidebar Topics configurations if they exist
-  const parsedTopics = StarlightSidebarTopicsConfigSchema.safeParse(addonConfig.topics || [])
-  if (!parsedTopics.success) {
-    throwPluginError(
-      `Invalid topics config: ${parsedTopics.error.issues.map((i) => i.message).join("\n")}`
-    )
-  }
-
-  const parsedOptions = StarlightSidebarTopicsOptionsSchema.safeParse(addonConfig.topicOptions)
-  if (!parsedOptions.success) {
-    throwPluginError(`Invalid topic options: ${z.prettifyError(parsedOptions.error)}`)
-  }
-
-  const topicsData = parsedTopics.data
-  const optionsData = parsedOptions.data
-
-  return {
-    name: "rimelight-ui-starlight-addons",
-    hooks: {
-      "config:setup"({
-        addIntegration,
-        updateConfig,
-        logger,
-        addRouteMiddleware,
-        command,
-        config: starlightConfig
-      }) {
-        // --- Sidebar Topics Logic ---
-        if ((command === "dev" || command === "build") && topicsData.length > 0) {
-          if (starlightConfig.sidebar) {
-            throwPluginError(
-              "Sidebar detected. To use topics, move your sidebar items into the topics config."
-            )
-          }
-
-          const topicSidebar: StarlightUserConfig["sidebar"] = topicsData.map((topic, index) => {
-            return "items" in topic
-              ? { label: String(index), items: topic.items }
-              : { label: String(index), items: [] }
-          })
-
-          updateConfig({
-            sidebar: topicSidebar,
-            components: {
-              Sidebar: `starlight-sidebar-topics/overrides/Sidebar.astro`
-            }
-          })
-        }
-
-        // --- Addons Logic ---
-        if (!addonConfig.copy && !addonConfig.share) {
-          logger.warn("StarlightAddons: No features enabled.")
-        }
-
-        updateConfig({
-          components: {
-            // This will merge with the Sidebar override if both exist
-            PageTitle: path.join(__dirname, "PageTitle.astro")
-          }
-        })
-
-        // --- Unified Integration ---
-        addIntegration({
-          name: "rimelight-ui-starlight-addons-integration",
-          hooks: {
-            "astro:config:setup": ({ updateConfig: updateAstroConfig }) => {
-              updateAstroConfig({
-                vite: {
-                  plugins: [
-                    virtual({
-                      "virtual:rimelight-starlight-addons-config": `export default ${JSON.stringify(addonConfig)}`
-                    }),
-                    // Pass the validated topic data to the vite plugin
-                    vitePluginStarlightSidebarTopics(topicsData, optionsData)
-                  ]
-                }
-              } as Record<string, unknown>)
-            }
-          }
-        })
-      }
-    }
-  }
-}
+/// <reference path="./locals.d.ts" />
+import type { StarlightPlugin, StarlightUserConfig } from "@astrojs/starlight/types"
+import virtual from "vite-plugin-virtual"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import { z } from "astro/zod"
+
+import {
+  StarlightSidebarTopicsConfigSchema,
+  StarlightSidebarTopicsOptionsSchema,
+  type StarlightSidebarTopicsUserConfig,
+  type StarlightSidebarTopicsUserOptions
+} from "./libs/config"
+import { throwPluginError } from "./libs/plugin"
+import { vitePluginStarlightSidebarTopics } from "./libs/vite"
+
+export type {
+  StarlightSidebarTopicsConfig,
+  StarlightSidebarTopicsUserConfig,
+  StarlightSidebarTopicsOptions,
+  StarlightSidebarTopicsUserOptions
+} from "./libs/config"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export interface StarlightAddonsConfig {
+  copy?: boolean
+  share?: boolean
+  // Merged config for Topics
+  topics?: StarlightSidebarTopicsUserConfig
+  topicOptions?: StarlightSidebarTopicsUserOptions
+}
+
+export default function starlightAddons(userConfig?: StarlightAddonsConfig): StarlightPlugin {
+  // 1. Setup default and merged config for Addons
+  const defaultAddonConfig: StarlightAddonsConfig = {
+    copy: true,
+    share: true
+  }
+
+  const addonConfig = { ...defaultAddonConfig, ...userConfig }
+
+  // 2. Validate Sidebar Topics configurations if they exist
+  const parsedTopics = StarlightSidebarTopicsConfigSchema.safeParse(addonConfig.topics || [])
+  if (!parsedTopics.success) {
+    throwPluginError(
+      `Invalid topics config: ${parsedTopics.error.issues.map((i) => i.message).join("\n")}`
+    )
+  }
+
+  const parsedOptions = StarlightSidebarTopicsOptionsSchema.safeParse(addonConfig.topicOptions)
+  if (!parsedOptions.success) {
+    throwPluginError(`Invalid topic options: ${z.prettifyError(parsedOptions.error)}`)
+  }
+
+  const topicsData = parsedTopics.data
+  const optionsData = parsedOptions.data
+
+  return {
+    name: "rimelight-ui-starlight-addons",
+    hooks: {
+      "config:setup"({
+        addIntegration,
+        updateConfig,
+        logger,
+        command,
+        config: starlightConfig
+      }) {
+        // --- Sidebar Topics Logic ---
+        if ((command === "dev" || command === "build") && topicsData.length > 0) {
+          if (starlightConfig.sidebar) {
+            throwPluginError(
+              "Sidebar detected. To use topics, move your sidebar items into the topics config."
+            )
+          }
+
+          const topicSidebar: StarlightUserConfig["sidebar"] = topicsData.map((topic, index) => {
+            return "items" in topic
+              ? { label: String(index), items: topic.items }
+              : { label: String(index), items: [] }
+          })
+
+          updateConfig({
+            sidebar: topicSidebar,
+            components: {
+              Sidebar: `starlight-sidebar-topics/overrides/Sidebar.astro`
+            }
+          })
+        }
+
+        // --- Addons Logic ---
+        if (!addonConfig.copy && !addonConfig.share) {
+          logger.warn("StarlightAddons: No features enabled.")
+        }
+
+        updateConfig({
+          components: {
+            // This will merge with the Sidebar override if both exist
+            PageTitle: path.join(__dirname, "PageTitle.astro")
+          }
+        })
+
+        // --- Unified Integration ---
+        addIntegration({
+          name: "rimelight-ui-starlight-addons-integration",
+          hooks: {
+            "astro:config:setup": ({ updateConfig: updateAstroConfig }) => {
+              updateAstroConfig({
+                vite: {
+                  plugins: [
+                    virtual({
+                      "virtual:rimelight-starlight-addons-config": `export default ${JSON.stringify(addonConfig)}`
+                    }),
+                    // Pass the validated topic data to the vite plugin
+                    vitePluginStarlightSidebarTopics(topicsData, optionsData)
+                  ]
+                }
+              } as Record<string, unknown>)
+            }
+          }
+        })
+      }
+    }
+  }
+}