@mseep/anything-analyzer 3.6.50

package/src/renderer/ui/InputNumber.tsx

@@ -0,0 +1,104 @@
+import React, { forwardRef } from 'react'
+import styles from './InputNumber.module.css'
+
+export interface InputNumberProps {
+  value?: number
+  defaultValue?: number
+  onChange?: (value: number | null) => void
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  placeholder?: string
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      min,
+      max,
+      step = 1,
+      disabled = false,
+      placeholder,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState<string>(
+      defaultValue !== undefined ? String(defaultValue) : ''
+    )
+    const displayValue =
+      controlledValue !== undefined ? String(controlledValue) : internalValue
+
+    const clamp = (v: number): number => {
+      if (min !== undefined && v < min) return min
+      if (max !== undefined && v > max) return max
+      return v
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = e.target.value
+      setInternalValue(raw)
+      if (raw === '' || raw === '-') {
+        onChange?.(null)
+        return
+      }
+      const num = parseFloat(raw)
+      if (!isNaN(num)) {
+        onChange?.(clamp(num))
+      }
+    }
+
+    const stepValue = (direction: 1 | -1) => {
+      const current = parseFloat(displayValue) || 0
+      const next = clamp(current + step * direction)
+      setInternalValue(String(next))
+      onChange?.(next)
+    }
+
+    return (
+      <div
+        className={`${styles.wrapper} ${disabled ? styles.disabled : ''} ${className ?? ''}`}
+        style={style}
+      >
+        <input
+          ref={ref}
+          type="text"
+          inputMode="numeric"
+          className={styles.input}
+          value={displayValue}
+          onChange={handleChange}
+          disabled={disabled}
+          placeholder={placeholder}
+        />
+        <div className={styles.controls}>
+          <button
+            type="button"
+            className={styles.stepBtn}
+            onClick={() => stepValue(1)}
+            disabled={disabled}
+            tabIndex={-1}
+          >
+            ▲
+          </button>
+          <button
+            type="button"
+            className={styles.stepBtn}
+            onClick={() => stepValue(-1)}
+            disabled={disabled}
+            tabIndex={-1}
+          >
+            ▼
+          </button>
+        </div>
+      </div>
+    )
+  }
+)
+InputNumber.displayName = 'InputNumber'

package/src/renderer/ui/Modal.module.css

@@ -0,0 +1,83 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal-backdrop);
+  animation: fadeIn 0.15s ease;
+}
+
+.modal {
+  background: var(--color-frame);
+  color: var(--text-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-frame);
+  box-shadow: var(--shadow-overlay);
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+  animation: scaleIn 0.15s ease;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-xl) var(--space-3xl);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.closeBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-badge);
+  transition: all var(--transition-fast);
+}
+
+.closeBtn:hover {
+  background: var(--color-hover);
+  color: var(--text-secondary);
+}
+
+.body {
+  padding: var(--space-xl) var(--space-3xl);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-md);
+  padding: var(--space-xl) var(--space-3xl);
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}

package/src/renderer/ui/Modal.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import styles from './Modal.module.css'
+
+export interface ModalProps {
+  open: boolean
+  onClose: () => void
+  title?: React.ReactNode
+  footer?: React.ReactNode
+  width?: number | string
+  children: React.ReactNode
+  /** If true, show a close button in the header */
+  closable?: boolean
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  open,
+  onClose,
+  title,
+  footer,
+  width = 520,
+  children,
+  closable = true,
+}) => {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    },
+    [onClose]
+  )
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener('keydown', handleKeyDown)
+      return () => document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open, handleKeyDown])
+
+  if (!open) return null
+
+  return createPortal(
+    <div className={styles.backdrop} onClick={onClose}>
+      <div
+        className={styles.modal}
+        style={{ width: typeof width === 'number' ? `${width}px` : width }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {(title || closable) && (
+          <div className={styles.header}>
+            <span className={styles.title}>{title}</span>
+            {closable && (
+              <button className={styles.closeBtn} onClick={onClose}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            )}
+          </div>
+        )}
+        <div className={styles.body}>{children}</div>
+        {footer !== undefined && <div className={styles.footer}>{footer}</div>}
+      </div>
+    </div>,
+    document.body
+  )
+}

package/src/renderer/ui/Popconfirm.module.css

@@ -0,0 +1,73 @@
+.wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-frame);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-lg);
+  z-index: var(--z-dropdown);
+  min-width: 200px;
+  animation: popIn 0.15s ease;
+}
+
+/* Right-aligned variant — popover anchored to the right edge */
+.popoverEnd {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+
+.message {
+  font-size: var(--font-size-base);
+  color: var(--text-secondary);
+  margin-bottom: var(--space-lg);
+  line-height: var(--line-height-normal);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-md);
+}
+
+/* Arrow */
+.popover::after {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  width: 8px;
+  height: 8px;
+  background: var(--color-frame);
+  border-right: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.popoverEnd::after {
+  left: auto;
+  right: 12px;
+  transform: rotate(45deg);
+}
+
+@keyframes popIn {
+  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+@keyframes popInEnd {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.popoverEnd {
+  animation-name: popInEnd;
+}

package/src/renderer/ui/Popconfirm.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Button } from './Button'
+import styles from './Popconfirm.module.css'
+
+export interface PopconfirmProps {
+  title: string
+  onConfirm: () => void
+  onCancel?: () => void
+  okText?: string
+  cancelText?: string
+  /** Horizontal alignment of the popover. Default: 'center' */
+  align?: 'center' | 'end'
+  children: React.ReactNode
+}
+
+export const Popconfirm: React.FC<PopconfirmProps> = ({
+  title,
+  onConfirm,
+  onCancel,
+  okText = 'OK',
+  cancelText = 'Cancel',
+  align = 'center',
+  children,
+}) => {
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handleClickOutside = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  const handleConfirm = () => {
+    setOpen(false)
+    onConfirm()
+  }
+
+  const handleCancel = () => {
+    setOpen(false)
+    onCancel?.()
+  }
+
+  return (
+    <div ref={wrapperRef} className={styles.wrapper}>
+      <div
+        onClick={(e: React.MouseEvent) => {
+          e.stopPropagation()
+          setOpen(!open)
+        }}
+      >
+        {children}
+      </div>
+      {open && (
+        <div className={`${styles.popover} ${align === 'end' ? styles.popoverEnd : ''}`}>
+          <div className={styles.message}>{title}</div>
+          <div className={styles.actions}>
+            <Button size="sm" onClick={handleCancel}>
+              {cancelText}
+            </Button>
+            <Button size="sm" variant="danger" onClick={handleConfirm}>
+              {okText}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/renderer/ui/Progress.module.css

@@ -0,0 +1,35 @@
+.track {
+  width: 100%;
+  height: 4px;
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.bar {
+  height: 100%;
+  background: var(--color-accent);
+  border-radius: var(--radius-full);
+  transition: width 0.3s ease;
+}
+
+.bar.success {
+  background: var(--color-success);
+}
+
+.bar.error {
+  background: var(--color-error);
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.percent {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  min-width: 36px;
+  text-align: right;
+}

package/src/renderer/ui/Progress.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import styles from './Progress.module.css'
+
+export interface ProgressProps {
+  percent: number
+  status?: 'normal' | 'success' | 'error'
+  showPercent?: boolean
+  className?: string
+}
+
+export const Progress: React.FC<ProgressProps> = ({
+  percent,
+  status = 'normal',
+  showPercent = true,
+  className,
+}) => {
+  const clampedPercent = Math.min(100, Math.max(0, percent))
+
+  return (
+    <div className={`${styles.wrapper} ${className ?? ''}`}>
+      <div className={styles.track}>
+        <div
+          className={`${styles.bar} ${status !== 'normal' ? styles[status] : ''}`}
+          style={{ width: `${clampedPercent}%` }}
+        />
+      </div>
+      {showPercent && <span className={styles.percent}>{Math.round(clampedPercent)}%</span>}
+    </div>
+  )
+}

package/src/renderer/ui/Select.module.css

@@ -0,0 +1,91 @@
+.wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 28px;
+  padding: 0 var(--space-lg);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  color: var(--text-primary);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-input);
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--transition-normal);
+  user-select: none;
+}
+
+.trigger:hover {
+  border-color: var(--color-border-hover);
+}
+
+.trigger.open {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
+}
+
+.trigger:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.placeholder {
+  color: var(--text-muted);
+}
+
+.arrow {
+  color: var(--text-muted);
+  transition: transform var(--transition-normal);
+  flex-shrink: 0;
+}
+
+.arrow.up {
+  transform: rotate(180deg);
+}
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--color-frame);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-input);
+  box-shadow: var(--shadow-md);
+  z-index: var(--z-dropdown);
+  padding: var(--space-xs) 0;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  padding: var(--space-sm) var(--space-lg);
+  font-size: var(--font-size-base);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+
+.option:hover {
+  background: var(--color-hover);
+  color: var(--text-primary);
+}
+
+.option.selected {
+  color: var(--color-accent);
+}
+
+.option.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/src/renderer/ui/Select.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useRef, useEffect } from 'react'
+import styles from './Select.module.css'
+
+export interface SelectOption {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+export interface SelectProps {
+  options: SelectOption[]
+  value?: string
+  defaultValue?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const Select: React.FC<SelectProps> = ({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  placeholder = 'Select...',
+  disabled = false,
+  className,
+  style,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '')
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue
+  const selectedOption = options.find((o) => o.value === value)
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [isOpen])
+
+  const handleSelect = (opt: SelectOption) => {
+    if (opt.disabled) return
+    if (controlledValue === undefined) {
+      setInternalValue(opt.value)
+    }
+    onChange?.(opt.value)
+    setIsOpen(false)
+  }
+
+  return (
+    <div ref={wrapperRef} className={`${styles.wrapper} ${className ?? ''}`} style={style}>
+      <button
+        type="button"
+        className={`${styles.trigger} ${isOpen ? styles.open : ''}`}
+        disabled={disabled}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+      >
+        {selectedOption ? (
+          <span>{selectedOption.label}</span>
+        ) : (
+          <span className={styles.placeholder}>{placeholder}</span>
+        )}
+        <svg
+          className={`${styles.arrow} ${isOpen ? styles.up : ''}`}
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className={styles.dropdown}>
+          {options.map((opt) => (
+            <div
+              key={opt.value}
+              className={`${styles.option} ${opt.value === value ? styles.selected : ''} ${opt.disabled ? styles.disabled : ''}`}
+              onClick={() => handleSelect(opt)}
+            >
+              {opt.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/renderer/ui/Spinner.module.css

@@ -0,0 +1,44 @@
+.spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ring {
+  border: 2px solid var(--color-border);
+  border-top-color: var(--text-secondary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Sizes */
+.sm .ring {
+  width: 14px;
+  height: 14px;
+}
+
+.md .ring {
+  width: 20px;
+  height: 20px;
+}
+
+.lg .ring {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+}
+
+/* Full-area spinner with overlay */
+.overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(10, 10, 10, 0.6);
+  z-index: 10;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}