@mseep/anything-analyzer 3.6.50

package/src/renderer/ui/Spinner.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import styles from './Spinner.module.css'
+
+export interface SpinnerProps {
+  size?: 'sm' | 'md' | 'lg'
+  /** If true, renders as an overlay covering the parent container */
+  overlay?: boolean
+  className?: string
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({
+  size = 'md',
+  overlay = false,
+  className,
+}) => {
+  const content = (
+    <div className={`${styles.spinner} ${styles[size]} ${className ?? ''}`}>
+      <div className={styles.ring} />
+    </div>
+  )
+
+  if (overlay) {
+    return <div className={styles.overlay}>{content}</div>
+  }
+
+  return content
+}

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

@@ -0,0 +1,39 @@
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 36px;
+  height: 20px;
+  background: var(--color-border-hover);
+  border-radius: var(--radius-full);
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  transition: background var(--transition-normal);
+  outline: none;
+}
+
+.switch:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
+}
+
+.switch.checked {
+  background: var(--color-success);
+}
+
+.switch:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.knob {
+  width: 16px;
+  height: 16px;
+  background: var(--text-primary);
+  border-radius: var(--radius-full);
+  transition: transform var(--transition-normal);
+}
+
+.switch.checked .knob {
+  transform: translateX(16px);
+}

package/src/renderer/ui/Switch.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import styles from './Switch.module.css'
+
+export interface SwitchProps {
+  checked?: boolean
+  defaultChecked?: boolean
+  onChange?: (checked: boolean) => void
+  disabled?: boolean
+  className?: string
+}
+
+export const Switch: React.FC<SwitchProps> = ({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onChange,
+  disabled = false,
+  className,
+}) => {
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
+  const isChecked = controlledChecked !== undefined ? controlledChecked : internalChecked
+
+  const toggle = () => {
+    if (disabled) return
+    const next = !isChecked
+    if (controlledChecked === undefined) {
+      setInternalChecked(next)
+    }
+    onChange?.(next)
+  }
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isChecked}
+      className={`${styles.switch} ${isChecked ? styles.checked : ''} ${className ?? ''}`}
+      disabled={disabled}
+      onClick={toggle}
+    >
+      <span className={styles.knob} />
+    </button>
+  )
+}

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

@@ -0,0 +1,76 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tabBar {
+  display: flex;
+  align-items: stretch;
+  height: 36px;
+  background: var(--color-bar);
+  border-bottom: 1px solid var(--color-border);
+  padding: 0 var(--space-lg);
+  gap: var(--space-lg);
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+
+.tabBar::-webkit-scrollbar {
+  display: none;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color var(--transition-normal);
+  white-space: nowrap;
+  position: relative;
+}
+
+.tab:hover {
+  color: var(--text-secondary);
+}
+
+.tab.active {
+  color: var(--text-primary);
+  border-bottom-color: var(--text-primary);
+}
+
+.tabIcon {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-md);
+  opacity: 0.7;
+}
+
+.tabBadge {
+  font-size: var(--font-size-2xs);
+  padding: 1px 5px;
+  border-radius: var(--radius-lg);
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.tabContent {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Extra content on the right side of tab bar */
+.tabBarExtra {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-shrink: 0;
+}

package/src/renderer/ui/Tabs.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import styles from './Tabs.module.css'
+
+export interface TabItem {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  badge?: string | number
+  children?: React.ReactNode
+}
+
+export interface TabsProps {
+  items: TabItem[]
+  activeKey: string
+  onChange: (key: string) => void
+  /** Extra content rendered at the right end of the tab bar */
+  extra?: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const Tabs: React.FC<TabsProps> = ({
+  items,
+  activeKey,
+  onChange,
+  extra,
+  className,
+  style,
+}) => {
+  const activeItem = items.find((i) => i.key === activeKey)
+
+  return (
+    <div className={`${styles.tabs} ${className ?? ''}`} style={style}>
+      <div className={styles.tabBar}>
+        {items.map((item) => (
+          <button
+            key={item.key}
+            className={`${styles.tab} ${item.key === activeKey ? styles.active : ''}`}
+            onClick={() => onChange(item.key)}
+          >
+            {item.icon && <span className={styles.tabIcon}>{item.icon}</span>}
+            <span>{item.label}</span>
+            {item.badge !== undefined && (
+              <span className={styles.tabBadge}>{item.badge}</span>
+            )}
+          </button>
+        ))}
+        {extra && <div className={styles.tabBarExtra}>{extra}</div>}
+      </div>
+      <div className={styles.tabContent}>{activeItem?.children}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,66 @@
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: 1px 8px;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-2xs);
+  line-height: 1.4;
+  border-radius: var(--radius-badge);
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* Default */
+.default {
+  background: var(--color-surface);
+  color: var(--text-secondary);
+  border: 1px solid var(--color-border);
+}
+
+/* Semantic variants */
+.success {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+  border: 1px solid var(--color-success-border);
+}
+
+.info {
+  background: var(--color-info-bg);
+  color: var(--color-info);
+  border: 1px solid var(--color-info-border);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+  border: 1px solid var(--color-warning-border);
+}
+
+.error {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+  border: 1px solid var(--color-error-border);
+}
+
+.purple {
+  background: var(--color-purple-bg);
+  color: var(--color-purple);
+  border: 1px solid rgba(168, 85, 247, 0.15);
+}
+
+.orange {
+  background: var(--color-orange-bg);
+  color: var(--color-orange);
+  border: 1px solid rgba(249, 115, 22, 0.15);
+}
+
+/* Clickable */
+.clickable {
+  cursor: pointer;
+  transition: opacity var(--transition-fast);
+}
+
+.clickable:hover {
+  opacity: 0.8;
+}

package/src/renderer/ui/Tag.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import styles from './Tag.module.css'
+
+export type TagColor = 'default' | 'success' | 'info' | 'warning' | 'error' | 'purple' | 'orange'
+
+export interface TagProps {
+  color?: TagColor
+  /** Custom inline color (hex). Overrides color variant. */
+  customColor?: string
+  onClick?: () => void
+  className?: string
+  style?: React.CSSProperties
+  children: React.ReactNode
+}
+
+export const Tag: React.FC<TagProps> = ({
+  color = 'default',
+  customColor,
+  onClick,
+  className,
+  style,
+  children,
+}) => {
+  const cls = [
+    styles.tag,
+    !customColor && styles[color],
+    onClick && styles.clickable,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const customStyle: React.CSSProperties | undefined = customColor
+    ? {
+        background: `${customColor}14`,
+        color: customColor,
+        border: `1px solid ${customColor}26`,
+        ...style,
+      }
+    : style
+
+  return (
+    <span className={cls} style={customStyle} onClick={onClick}>
+      {children}
+    </span>
+  )
+}

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

@@ -0,0 +1,42 @@
+.timeline {
+  padding: var(--space-xs) 0;
+}
+
+.item {
+  display: flex;
+  padding-bottom: var(--space-lg);
+}
+
+.item:last-child {
+  padding-bottom: 0;
+}
+
+.tail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 20px;
+  flex-shrink: 0;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--color-info);
+  background: var(--color-content);
+  flex-shrink: 0;
+}
+
+.line {
+  flex: 1;
+  width: 1px;
+  background: var(--color-border);
+  margin-top: 4px;
+}
+
+.content {
+  flex: 1;
+  padding-left: var(--space-sm);
+  min-width: 0;
+}

package/src/renderer/ui/Timeline.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import styles from './Timeline.module.css'
+
+interface TimelineItem {
+  key: string
+  color?: string
+  children: React.ReactNode
+}
+
+interface TimelineProps {
+  items: TimelineItem[]
+  className?: string
+}
+
+export const Timeline: React.FC<TimelineProps> = ({ items, className }) => {
+  return (
+    <div className={`${styles.timeline} ${className ?? ''}`}>
+      {items.map((item, index) => (
+        <div key={item.key} className={styles.item}>
+          <div className={styles.tail}>
+            <span className={styles.dot} style={{ borderColor: item.color || 'var(--color-info)' }} />
+            {index < items.length - 1 && <span className={styles.line} />}
+          </div>
+          <div className={styles.content}>{item.children}</div>
+        </div>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,99 @@
+.container {
+  position: fixed;
+  top: 52px;
+  right: 16px;
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+  padding: 10px 16px;
+  border-radius: var(--radius-frame);
+  font-size: var(--font-size-sm);
+  backdrop-filter: blur(12px);
+  animation: slideIn 0.3s ease;
+  pointer-events: auto;
+  max-width: 360px;
+}
+
+.icon {
+  font-size: var(--font-size-lg);
+  flex-shrink: 0;
+}
+
+.text {
+  flex: 1;
+  line-height: var(--line-height-normal);
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.6;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+}
+
+.closeBtn:hover {
+  opacity: 1;
+}
+
+/* Variants */
+.success {
+  background: var(--color-success-bg);
+  border: 1px solid var(--color-success-border);
+  color: var(--color-success);
+}
+
+.error {
+  background: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
+  color: var(--color-error);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
+  color: var(--color-warning);
+}
+
+.info {
+  background: var(--color-info-bg);
+  border: 1px solid var(--color-info-border);
+  color: var(--color-info);
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+.exiting {
+  animation: slideOut 0.2s ease forwards;
+}

package/src/renderer/ui/Toast.tsx

@@ -0,0 +1,90 @@
+import React, { createContext, useContext, useState, useCallback, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import styles from './Toast.module.css'
+
+type ToastType = 'success' | 'error' | 'warning' | 'info'
+
+interface ToastItem {
+  id: number
+  type: ToastType
+  message: string
+  exiting?: boolean
+}
+
+interface ToastContextValue {
+  success: (message: string) => void
+  error: (message: string) => void
+  warning: (message: string) => void
+  info: (message: string) => void
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+const TOAST_ICONS: Record<ToastType, string> = {
+  success: '\u2713',
+  error: '\u2717',
+  warning: '\u26A0',
+  info: '\u2139',
+}
+
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [toasts, setToasts] = useState<ToastItem[]>([])
+  const counterRef = useRef(0)
+
+  const removeToast = useCallback((id: number) => {
+    setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, exiting: true } : t)))
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id))
+    }, 200)
+  }, [])
+
+  const addToast = useCallback(
+    (type: ToastType, message: string) => {
+      const id = ++counterRef.current
+      setToasts((prev) => [...prev, { id, type, message }])
+      setTimeout(() => removeToast(id), 3000)
+    },
+    [removeToast]
+  )
+
+  const contextValue: ToastContextValue = {
+    success: useCallback((msg: string) => addToast('success', msg), [addToast]),
+    error: useCallback((msg: string) => addToast('error', msg), [addToast]),
+    warning: useCallback((msg: string) => addToast('warning', msg), [addToast]),
+    info: useCallback((msg: string) => addToast('info', msg), [addToast]),
+  }
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      {createPortal(
+        <div className={styles.container}>
+          {toasts.map((toast) => (
+            <div
+              key={toast.id}
+              className={`${styles.toast} ${styles[toast.type]} ${toast.exiting ? styles.exiting : ''}`}
+            >
+              <span className={styles.icon}>{TOAST_ICONS[toast.type]}</span>
+              <span className={styles.text}>{toast.message}</span>
+              <button className={styles.closeBtn} onClick={() => removeToast(toast.id)}>
+                <svg width="12" height="12" 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>,
+        document.body
+      )}
+    </ToastContext.Provider>
+  )
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext)
+  if (!ctx) {
+    throw new Error('useToast must be used within a ToastProvider')
+  }
+  return ctx
+}

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

@@ -0,0 +1,26 @@
+.wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--color-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-button);
+  padding: var(--space-xs) var(--space-md);
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  white-space: nowrap;
+  z-index: var(--z-tooltip);
+  pointer-events: none;
+  animation: tooltipIn 0.1s ease;
+}
+
+@keyframes tooltipIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/src/renderer/ui/Tooltip.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import { createPortal } from 'react-dom'
+import styles from './Tooltip.module.css'
+
+export interface TooltipProps {
+  title: string
+  children: React.ReactElement
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ title, children }) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div
+      className={styles.wrapper}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+    >
+      {children}
+      {visible && <div className={styles.tooltip}>{title}</div>}
+    </div>
+  )
+}