@rimelight/ui 0.0.37 → 0.0.39

package/src/components/keyboard/RLAKeyboard.astro

@@ -0,0 +1,350 @@
+---
+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(--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>
+
+<style is:global>
+  .keyboard-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 0.75rem;
+    width: 100%;
+    max-width: 100%;
+    margin: 1rem 0;
+    box-sizing: border-box;
+  }
+  .keyboard-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .keyboard-svg {
+    width: 100%;
+    height: auto;
+    max-width: 56.25rem;
+  }
+  .kb-key-label {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.625rem;
+    font-weight: 600;
+    pointer-events: none;
+    user-select: none;
+  }
+</style>

package/src/components/knob/RLAKnob.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { KnobProps } from "./knob"
+import knobTheme from "./knob.theme"
+
+
+const knob = scv(knobTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as KnobProps
+
+const classes = resolveClasses(knob, {}, useUi("knob", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/knob/knob.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createKnobTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createKnobTheme()

package/src/components/label/RLALabel.astro

@@ -0,0 +1,27 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { LabelProps } from "./label"
+import { resolveTheme } from "../../utils/resolveTheme"
+import labelThemeDefault, { createLabelTheme } from "./label.theme"
+const labelTheme = resolveTheme(labelThemeDefault, createLabelTheme)
+
+
+const label = scv(labelTheme)
+
+const {
+  for: htmlFor,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LabelProps
+
+const classes = resolveClasses(label, {
+  size
+}, useUi("label", uiProp), className)
+---
+<label class={classes.root} data-slot="root" for={htmlFor} {...rest}>
+  <slot />
+</label>

package/src/components/label/label.theme.ts

@@ -0,0 +1,22 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createLabelTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    },
+    variants: {
+      size: {
+        sm: { root: "text-xs" },
+        md: { root: "text-sm" },
+        lg: { root: "text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createLabelTheme()